Anatomia delle lettere

Documenti analoghi
Anatomia di un carattere

Anatomia di un carattere

Anatomia di un carattere

Tipo-grafica: la parola vestita 2

Il disegno della scrittura

CORSO DI INFOGRAFICA PROF. MANUELA PISCITELLI A.A.

USARE I FONT. piccole cose da sapere sull utilizzo dei caratteri per esperti e meno esperti

La storia della tipografia

Liceo Artistico Statale PAOLO CANDIANI Busto Arsizio. Progettazione Classe 4G3 Prof. Saverio Hernandez. Ud1. Il lettering

LETTERING LEZIONE _

LETTERING LEZIONE _

150 Anniversario del Sistema Camerale. Manuale d identità visiva Logo Impresa Storica d Italia 1. Elementi base

LETTERING. a.s. 2006/2007. prof.ssa Miriam Degani - prof. Aldo Gorla. _lettering

Linee guida per la comunicazione del piano. Elementi base dell identità visiva

CSS: Colori, testo, caratteri, liste e link

A. Elementi base Versione Giugno 2006

THEO VAN BOXEL - ROAD TO WORDPRESS - 5 LUGLIO 2017

LETTERING LEZIONE _

PROF. MANUELA PISCITELLI

IL CARATTERE TIPOGRAFICO

CSS / TIPOGRAFIA WEB. LABORATORIO DI COMUNICAZIONE VISIVA HTML+CSS docente: Diana Quarti 1

Dare stile al testo significa impostare con i CSS:

Laboratorio Artistico

Laboratorio di scrittura

Lo stemma, patrimonio identitario della Regione

Il disegno della scrittura

Manuale d identità visiva

Manuale di utilizzo del Marchio VIBUR

Corso di Graphic creations _ Prof. MANUELA PISCITELLI

IL LETTERING Parte 1

appunti di editoria Corso di Grafica I prof. arch. Francesco E. Guida a.a. 2003/2004

LA MISURAZIONE DEL CARATTERE

MANUALE DI IDENTITÀ VISIVA USO ESTERNO

BRAND GUIDELINE. Regole per un corretto utilizzo del logotipo e dell immagine coordinata

DISEGNO GRAFICO. Graphic Design. Disegnare > to design > to drawing

Fabriano 2012 un progetto di Silvana Amato disegnato da Steven Guarnaccia il testo è composto in Miller di Matthew Carter

PROF. MANUELA PISCITELLI

Analisi e comparazione del numero 5 in tre varianti di caratteri

Adige. Visual Identity Guidelines

I.S.I.S. Zenale e Butinone Treviglio (BG) KIT RECUPERO E IDONEITÀ. Classi Seconde. Scienze e Tecnologie Applicate

MEDIO FRIULI. Design del marchio e Manuale di applicazione grafica. Matteo Palmisano Giuseppe D Orsi. 18 luglio 2010

Visual Identity Guidelines

MANUALE D USO DEL MARCHIO

Tipografia digitale. Lezione del corso di Interazione Uomo Macchina I Laurea in Informatica AA

Brand manual. Linee guida per l uso

SALUTE LAZIO SISTEMA SANITARIO REGIONALE MANUALE DI IDENTITÀ VISIVA

KIT RECUPERO IDONEITA' Classi Seconde. Scienze e Tecnologie Applicate

TITOLO MARCHIO ARTIGIANI IN LIGURIA: MANUALE D USO

Informatica d ufficio

Lo Stemma del Comune di Udine

I font a disposizione sul proprio sistema operativo sono diversi da quelli presenti sui sistemi operativi degli utenti.

Architettura dell Informazione

Indicazioni generali per la creazione di contenuti didattici inclusivi

Guida all uso del logo MANDARINA DUCK

Linee Guida. comunicazione aziendale

POCHI E SCELTI BENE. I caratteri stanno alla grafica editoriale come i colori stanno alla grafica pubblicitaria:

Croce Rossa Italiana

M A N U A L E D I D E N T I T À V I S I V A

1.3c: Font BITMAP e Font SCALABILI

Modulo 1: Le I.C.T. UD 1.3b: Grafica Bitmap e Vettoriale FONT Bitmap e Scalabili

LUDIS IUNGIT MANUALE DI IDENTITÀ GRAFICA

Lo scopo è di rimarcare l'identità visiva su tutte le pubblicazioni sia di carattere istituzionale, sia di carattere tecnico o divulgativo.

Regione Toscana Immagine coordinata. Caratteri generali per la costruzione dell immagine. Costruzione geometrica

Parmigiano Reggiano. Visual Identity. Gennaio 2018

Manuale di Identità. Elementi Base

Il disegno della scrittura

Sistema di identità visiva Elementi base. Versione 1.1 Luglio 2008

CSS. Esercizi CC BY ALESSANDRO URSOMANDO DIAPOSITIVA 2 CSS PROPRIETÀ

CARATTERE, FONT, INTERLINEA. Appendice alla lezione 9 Corpo ed interlinea. Sito IL LABORATORIO DEL LIBRO.

Caratteri e font. Ad ogni glifo (unità grafica astratta) possono corrispondere molteplici disegni (unità grafica concreta) Esempio: glifo A

Articolo UNO. Manuale di utilizzo del logotipo.

Elaborazione dei testi con Micosoft Word

Brand Book V M G R O U P updated 3/1/2019

POCHI E SCELTI BENE. I caratteri stanno alla grafica editoriale come i colori stanno alla grafica pubblicitaria:

NORME REDAZIONALI. - utilizzare WORD e non altri programmi

LINEE GUIDA PER LA CORRETTA DECLINAZIONE DELLA CORPORATE IDENTITY DI ATENEO. A cura dell Ufficio Comunicazione

INDICE / INDEX COSTRUZIONE / CONSTRUCTION... 1 VERSIONI CROMATICHE / CHROMATIC VERSIONS... 3 AREA DI RISPETTO / SAFE AREA... 7

Tutorial di HTML basato su HTML 4.0 e CSS 2

Tipo-grafica: la parola vestita

Manuale d uso del marchio UTILIZZO DEL MANUALE

BRAND GUIDE 2017 Sitael S.p.A.

Laboratorio di Informatica

copertina. immagine (eventuale): a tutta pagina (margini al vivo) oppure in un riquadro. scala di grigio o CMYK, tiff

BRAND IDENTITY GUIDELINE DI BASE

Apartments. Manuale di Identità Elementi base. Bozza 18 Aprile 2016

Lo stemma, patrimonio identitario della Regione

ALLEGATO A DGR nr. 420 del 09 aprile MANUALE D USO Breve guida sull uso del logo delle fattorie sociali del Veneto

Manuale d'uso per il marchio territoriale Lago di Garda Trentino

Manuale d identità visiva. 1. Elementi base

ELEMENTI BASE. Servizio Sanitario Regionale Emilia Romagna

FARMACIA DEI SERVIZI FEDERFARMA

FARMACIA DEI SERVIZI FEDERFARMA

UNIVERSITÀ DEGLI STUDI DI BRESCIA

Programma Operativo Regionale GUIDA AL LOGOTIPO ISTITUZIONALE E ALLE SUE CORRETTE APPLICAZIONI

L oggetto libro Osservare, analizzare, ricostruire. Verso il workbook

Terre di Siena carbon free Terre di Siena carbon free 2015 Copertina

COMPANY MANUAL AGENZIA REGIONALE DEL TURISMO

struttura del lettering

Gli alfabeti romani di Francesco Griffo

Transcript:

Anatomia delle lettere Le ragioni dietro le forme dei caratteri LABORATORIO DI DESIGN DELLA COMUNICAZIONE

Le parole stampate sono viste, non sentite. El Lisickij Topografia della tipografia, 1923 LABORATORIO DI DESIGN DELLA COMUNICAZIONE

Leggere è un modo specializzato di guardare. Riccardo Falcinelli designer

definizione di carattere tipografico Un carattere tipografico (typeface in inglese) è un insieme coerente di segni alfabetici, numerici e di interpunzione progettati in modo coerente per essere utilizzati insieme per la riproduzione di un testo.

composizione di un set di caratteri

Tondo, corsivo e maiuscoletto confronto fra maiuscolo, maiuscoletto e minuscolo maiuscolo maiuscololetto minuscolo tondo (roman) corsivo (italic) Mmm Mmm Mmm Meta corpo 60 pt Bodoni T.t corpo 60 pt Caslon corpo 60 pt maiuscoletto (small caps)

i numeri 0123456789 0123456789 Numeri cardinali Numerazione alto/bassa o numeri saltellanti Dal 1961 dal 1961 DAL 1961 Con il minuscolo è preferibile usare la numerazione alto/bassa Con il maiuscoletto è preferibile usare la numerazione alto/bassa Con il maiuscolo è preferibile usare la numerazione cardinale

forme e controforme Ogni lettera è costituita da: nero (tratti) + bianco (controforme). Le forme bianche, generate dai tratti neri, hanno la funzione di mantenere equilibrati i tratti neri. Non si può modificare l una senza influenzare l altra.

forme e controforme Le parole sono formate da lettere adiacenti. Il rapporto tra forma e controforma è alla base della percezione. La chiave sta nel ritmo tra bianchi e neri che genera l'equilibrio complessivo e la leggibilità.

10

il bianco, il nero e la parola Nella scrittura, così come nella tipografia i bianchi e i neri si susseguono in un insieme ritmico. Senza questo ritmo non esiste la parola. Le forme influiscono sulla spaziatura, così come lo spessore dei tratti. Trovare l equilibrio tra i bianchi e i neri è la chiave di tutti i caratteri tipografici.

nozioni ottiche di base Nel comporre le lettere del nostro alfabeto occorre, oltre che conoscerne l evoluzione, avere delle nozioni ottiche indispensabili per correggere le "aberrazioni" che la nostra retina continuamente impressiona attraverso la visuale.

lo spessore dei tratti questi spessori sono uguali o differenti?

lo spessore dei tratti L occhio umano percepisce diversamente uno spessore orizzontale e uno identico ma verticale.

lo spessore dei tratti questi spessori sono uguali o differenti?

9,75 mm 11 mm

L occhio umano percepisce diversamente uno spessore orizzontale e uno identico ma verticale. 36

9,3 mm 10 mm

Sembra più grande per effetto del bianco interno

la posizione dei tratti Anche la posizione dei tratti è studiata per sembrare otticamente al centro.

40,1 30,1 mm 34,8 mm 42,1 mm

la dimensione dei vuoti Ne consegue che le lettere normalmente hanno vuoti più ampi nella parte inferiore della lettera, per una questione di leggibilità.

sinistra/ esatto destra/ errato

rapporto tra le forme: altezza delle lettere Le lettere sembrano alte allo stesso modo invece... Apici e curve sporgono in alto e in basso, rispetto all altezza delle forme squadrate.

correzioni nelle dimensioni sinistra/ esatto destra/ errato 36

Gotham AHOV

Mercury Text AHOV

leggibilità delle forme Per un fenomeno ottico, la lettura avviene sulla parte superiore della riga. La parte inferiore del minuscolo è meno leggibile della parte superiore

Università Università

leggibilità delle forme L occhio si concentra nella parte interna della lettera (fattore importante nella ricerca dell armonia fra chiaro e scuro)

i contrografismi H B A

leggibilità delle forme I contorni delle parole - il ritmo visivo della parola scritta - aiutano gli occhi nella lettura, per questo il minuscolo è più leggibile del maiuscolo.

Tipografia TIPOGRAFIA

le origini "solide" delle forme piane Dalla tipografia al piombo alla tipografia digitale

punzone matrice Strumenti per la fusione dei caratteri a piombo

la fusione del carattere al piombo forma per fusione carattere

composizione manuale cassa tipografica uppercase maiuscole, maiuscoletto lowercase minuscolo, numeri, spazi

composizione manuale compositoio interlinea interlinea giustezza

altezza tipografica tacca corpo larghezza del fusto Nomenclatura del carattere tipografico Varie tipologie di tacche

senza grazie con grazie Sans serif Lineari bastoni A A B B C C Serif Graziati le parti terminali: GRAZIE o serif

senza grazie con grazie Akzidenz Futura Gill Sans Univers Helvetica Optima Bembo Garamond Caslon Baskerville Bodoni Times New Roman

Anatomia delle lettere linea ascendente Adg corpo occhio linea ascendente linea di base linea discendente lettera maiuscola lettera minuscola discendente lettera minuscola ascendente

anatomia del carattere

anatomia del carattere

Asta retta DpuVz discendente media montante obliqua LtAMI orizzontale trasersale in incrocio trasversale barra montanti verticale Asta curva D O s ad arco ad anello ondulata

il corpo del carattere Il corpo di un carattere è la sua altezza. Si misura in punti tipografici. Questo sistema si usa anche per misurare altri elementi e spazi della composizione tipografica. 1 pt = 0,35 mm L occhio medio del carattere, o altezza della x, cambia a seconda del disegno del carattere.

tipometria la misura dei caratteri Sistema didot (Francia, 1870) 1 pt (punto tipografico) = 0,35 mm per misurare corpo ed interlinea 12 pt = 1 riga tipografica o cicero (4,2 mm) sistema duodecimale 1 pt PICA = 0,351 _ 12 pt PICA = 4,217 riga tipografica anglosassone

L occhio medio del carattere, o altezza della x, cambia a seconda del disegno del carattere. Più l'occhio è grande e più il carattere sarà leggibile.

anatomia del carattere Contrasto: differenza fra i tratti più spessi e quelli più sottili.

43

1996 A parità di corpo, interlinea, spaziatura e giustezza 1996 Dimensioni dell occhio in altezza e larghezza

larghezza La larghezza della lettera è data dalla larghezza dell occhio più un sottile spazio ai lati. Dipende dalle proporzioni del carattere. Attenzione: Cambiare le proporzioni di una lettera è un crimine tipografico! 47

Gotham Bold LARGHEZZA Gotham Bold Condensed LARGHEZZA LARGHEZZA 48

peso Il "peso" è il rapporto tra area inchiostrata e area in bianco del carattere (e della serie di caratteri). Il "peso" è indipendentemente dalla dimensione del carattere e, invece, è funzione dello spessore dei tratti che lo compongono. 57

Tavola sinottica di Adrian Frutiger per il carattere Univers. Al centro l Univers 55, il carattere standard. Sugli assi orizzontali le compressioni e su quelli verticali gli spessori. I numeri dispari indicano il tondo, i pari il corsivo.

varianti di larghezza expanded regular condensed ultra condensed varianti di inclinazione regular (tondo) oblique (corsivo)

varianti di peso thin light medium bold black extra black Il "peso" è il rapporto tra area inchiostrata e area in bianco della serie di caratteri.

stili 60

spaziatura La spaziatura è un valore numerico attribuito ad ogni singola lettera e determina lo spazio che va a collocarsi a destra e a sinistra della lettera stessa.

50

kerning Il kerning è una variazione sistematica della spaziatura tra due lettere, per casi particolari. Lo spazio tra le lettere non è costante ma varia a seconda dei casi. Quando i caratteri di un font sono spaziati in modo troppo uniforme, si generano spazi bianchi soprattutto in caso di lettere con forme angolate verso l esterno. Nella tipografia digitale lo spazio tra le lettere è controllato da una tavola di crenatura che stabilisce la spaziatura tra diverse combinazioni di coppie di lettere.

quando avere la padronanza del kerning Anche se con un po di cautela, a volte è necessario intervenire manualmente. Soprattutto quando si lavora con corpi molto grandi.

tracking Il tracking è la variazione della spaziatura complessiva tra tutte le lettere (non tra due soltanto). Di solito nei testi giustificati può essere utile variare il tracking, tra +5 e -5 al massimo (ma controllate sempre con una stampa).

legature o politipi Sono "glifi" creati per ovviare al problema di caratteri che, accostati, si sovrappongono.

Letters are things, not pictures of things. Eric Gill

il disegno del carattere da manuale a digitale

Helvetica Aa Ee Rr Aa Ee Rr Kunsthalle abcdefghijklm nopqrstuvwxyz I Sabon.,... Ram.m r... Ne-.. Ram.m r... Ne R,:wn.u, r... Ne R<1m.u, r... Ne R,.,,..., r..,... Ne.- R<n.m Tm,e Ne Ra New Romsn Tim;:s: New Rotn:9.n Timcs New Ron1;3n Tim.::s: New Ronun Timcs New Rotn3n Tim.::s: New Roman Tìmes New!loman Tirnes New lloman Times New lloman Times New s New Roman Tìmes New Roman Times New Roman Times NE nes New Roman Times New Roman Timei mes New Roman Times Nev imes New Roman Tir imes New Roma1 i1nes New Ro1... - - ---- ---- --,_..... -- ---- - - --- -- ---- ----- ----- --- --- --.. ------- LJHmN OpCJ'I YyZ..,.MCclW Set,..,,1 G4 _...,,._ Jòl,...r:s""..._ b1;d efgh IJ 11:1,.nop,..,i-ur1wAB.C - - -- _,.,,._... Hjll.. fl--.. dc,d,of I,,,u...,,.. cw lfl: D flllrlll rw m. Mmo INl'ifP "-' ABCOEFGHIJK a&cdcfpljldmn P'l:m: LMNOPQRSTU The Monotype COrpor tton ; a Fetw YMI. LolMl<MI 11,c..4 CinÙ'U un,.,,1 YOU- L...)-iJ-t... LL!, LN' "'8.. E i! I I strc Frutiger Aa I E 1 e Rr Aa Ee Rr Accès aux avions abcdefghijklm nopqrstuvwxyz

type designers protagonisti del graphic design

Claude Garamond 1532-1535 GARAMOND John Baskerville XVIII sec. BASKERVILLE Gianbattista Bodoni 1778 BODONI Stanley Morrison 1923-32 Times Paul Renner 1933 Futura Max Miedinger Edward Hoffmann 1957 HELVETICA the best of... font classici nell editoria Adrian Frutiger 1957 Frutiger Matther Carter 1996 Verdana

riferimenti bibliografici sulla tipografia Jim Williams, Type matters, Merrell Robert Bringhurst, Gli elementi dello stile tipografico, Edizioni Sylvestre Bonnard Gerard Unger, Il gioco della lettura, Stampa Alternativa & Graffiti Ellen Lupton, Caratteri, testo, gabbia, Zanichelli www.thinkingwithtype.com

link utili sulla tipografia http://www.typeconnection.com http://fontsinuse.com http://www.typewolf.com