La tipografia Balbuzie digitale Le regole per l’uso del colore e del carattere tipografico valide per la stampa non sono applicabili in toto allo schermo. Infatti, se abitualmente vale Stampa  foglio di carta bianca + testo nero Schermo  sfondo bianco + testo nero, vale ancora? AA 2005/06 Prof. Paola Trapani – Progettare l’immagine coordinata – Il carattere tipografico

La tipografia Balbuzie digitale Trasferimento che non considera le differenze tra i due media: Stampa  foglio di carta bianca e il testo nero come oggetti tangibili, il colore con sostanza di pigmento Schermo  sfondo bianco costituito da onde luminose, il testo nero come assenza di luce. Dopo un certo lasso temporale l’irraggiamento diventa irritante per gli occhi. AA 2005/06 Prof. Paola Trapani – Progettare l’immagine coordinata – Il carattere tipografico

La tipografia Balbuzie digitale Conclusione Ciò che funziona per la stampa non può essere semplicemente trasferito allo schermo così com’è. Leggibilità a stampa e a schermo completamente diverse. Non scegliere il colore solo per comunicare una certa emozione, ma considerare da subito la leggibilità. Tuttavia le regole per la stampa sono un bagaglio di partenza e un punto di riferimento utile. Per innovare bisogna infrangere le regole. Ma per infrangere le regole bisogna conoscerle. AA 2005/06 Prof. Paola Trapani – Progettare l’immagine coordinata – Il carattere tipografico

La tipografia Elementi di base Anatomia del carattere tipografico Le lettere hanno braccia, gambe, occhi, code, gambe … ascendente apice occhiello o pancia braccio Linea superiore T p f A Linea della maiuscola gamba Linea base Linea inferiore asta discendente traversa AA 2005/06 Prof. Paola Trapani – Progettare l’immagine coordinata – Il carattere tipografico

La tipografia Classi di caratteri Nella tipografia moderna due sono le forme basilari di carattere: Antique serif = con grazie Grotesque sans serif = senza grazie o bastoni Con differenti spessori delle aste Con o senza differenti spessori delle aste Serif Bastoni AA 2005/06 Prof. Paola Trapani – Progettare l’immagine coordinata – Il carattere tipografico

La tipografia Classi di caratteri Antique serif = con grazie Grotesque sans serif = senza grazie o bastoni Serif Bastoni Si utilizzano per testi nell’editoria di libri e giornali. Si utilizzano per titoli, intestazioni e pubblicità AA 2005/06 Prof. Paola Trapani – Progettare l’immagine coordinata – Il carattere tipografico

La tipografia Classi di caratteri Antique serif = con grazie Grotesque sans serif = senza grazie o bastoni A dimensione standard sono meno adatti allo schermo, adatti alla stampa. Se si deve utilizzarli, scegliere quelli con grazie e aste non troppo sottili. Sono più adatti alla griglia di pixel dello schermo. AA 2005/06 Prof. Paola Trapani – Progettare l’immagine coordinata – Il carattere tipografico

La tipografia Classi di caratteri Antique serif = con grazie Grotesque sans serif = senza grazie o bastoni Baskerville Bodoni Bookman Garamond Goudy Lucida Palatino Times … Avant Garde Arial Impact Futura Gill Sans Helvetica Tahoma Verdana … 2, pg 99 AA 2005/06 Prof. Paola Trapani – Progettare l’immagine coordinata – Il carattere tipografico

La tipografia Famiglie di caratteri Mappa grammaticale di una convenzionale famiglia di caratteri ampia. I filetti spessi indicano l’estensione della famiglia nucleare. Muoversi lungo qualunque linea, tuttavia il salto di una tappa corrisponde a un’ellisse: cortocircuito delle regole grammaticali. AA 2005/06 Prof. Paola Trapani – Progettare l’immagine coordinata – Il carattere tipografico

La tipografia Famiglie di caratteri La famiglia di caratteri lega insieme i componenti grazie a caratteristiche visive simili. I membri di una famiglia si assomigliano, ma conservano la loro individualità dei tratti. I membri di una famiglia hanno differenti pesi e spessori. Alcune famiglie hanno molti membri, altre sono ridotte a pochi. 2, pg.104-105 AA 2005/06 Prof. Paola Trapani – Progettare l’immagine coordinata – Il carattere tipografico

La tipografia Famiglie di caratteri Le famiglie più estese possono avere caratteri sia serif che bastoni. AA 2005/06 Prof. Paola Trapani – Progettare l’immagine coordinata – Il carattere tipografico

La tipografia Unità di misura dei caratteri Due unità di misura principali: Pica  per misurare la lunghezza delle righe o giustezza Punti  per specificare la grandezza del carattere (corpo) distanza tra le righe (interlinea) AA 2005/06 Prof. Paola Trapani – Progettare l’immagine coordinata – Il carattere tipografico

La tipografia Evidenziazione dei caratteri - Stampa Varie opzioni per evidenziare i passaggi di un testo con dimensione del carattere uniforme: Spessore e stile Thin, Semi-bold, Bold, Italic… Spaziatura Narrow, Broad Maiuscoletti e maiuscole Caratteri serif e sans serif compresenti Modifica della dimensione del carattere (con parsimonia) Scegliere solo alcune di queste opportunità, non usarle tutte insieme! AA 2005/06 Prof. Paola Trapani – Progettare l’immagine coordinata – Il carattere tipografico

La tipografia Interlinea - Stampa L’interlinea garantisce al lettore una lettura agile. Misurata a partire dalla linea di base fino alla mediana della riga successiva, deve essere pari a 1,5 altezza della x. Extrema ratio is a brand of world wide extension Per linee particolarmente lunghe utilizzare un’interlinea maggiore. Se l’interlinea è eccessiva, il lettore oltre alle righe vede anche gli spazi negativi in mezzo. L’alternanza di elementi positivi e negativi irrita l’occhio. AA 2005/06 Prof. Paola Trapani – Progettare l’immagine coordinata – Il carattere tipografico

La tipografia Dimensioni del carattere - Stampa La dimensione come variabile fondamentale ai fini della leggibilità del testo I testi stampati a 6 pt non si leggono I titoli dovrebbero essere tra 14 e 18 I sottotitoli tra 12 e 14 Per i testi mantenere una dimensione minima di 8/10 pt AA 2005/06 Prof. Paola Trapani – Progettare l’immagine coordinata – Il carattere tipografico

La tipografia Dimensioni del carattere - Stampa La dimensione del carattere dipende da formato in cui deve apparire il testo (es. Fax, quotidiano, formato A4…) larghezza della colonna quantità di testo AA 2005/06 Prof. Paola Trapani – Progettare l’immagine coordinata – Il carattere tipografico

La tipografia Layout del testo - Stampa Una riga normale ha una lunghezza di circa 50 caratteri. Utilizzare l’interlinea automatica. Righe con più di 50 caratteri richiedono un’interlinea extra, per aiutare a trovare il capo delle riga successiva. Se le righe sono troppo corte, può essere difficile leggere, salvo i casi di note in cui il testo è breve. Se le righe sono più corte si può utilizzare un corpo del carattere più piccolo. 2, pg 74-75 AA 2005/06 Prof. Paola Trapani – Progettare l’immagine coordinata – Il carattere tipografico

La tipografia Allineamento dei caratteri - Stampa L’allineamento dei caratteri determina l’aspetto tipografico di un testo. Nei giornali il testo è giustificato e utilizza l’intera larghezza della colonna. Negli inviti il testo è allineato al centro. Adatto solo per piccole porzioni di testo. Il testo giustificato a destra o a sinistra si dice a bandiera a desta (b/d) o a bandiera a sinistra (b/s). Evita i buchi del testo giustificato. Ma utilizzare solo per testi brevi il b/d. AA 2005/06 Prof. Paola Trapani – Progettare l’immagine coordinata – Il carattere tipografico

La tipografia Spaziatura tra le lettere - Stampa tracking  distanza tra le lettere. La scelta giusta di questo parametro dipende dal carattere, dal corpo, dal peso scelto. Deve risultare un texture tipografica armoniosa (con leggerezza e pesantezza bilanciate). I caratteri piccoli hanno necessità di un tracking maggiore rispetto alle lettere più grandi. 2, pg. 124 AA 2005/06 Prof. Paola Trapani – Progettare l’immagine coordinata – Il carattere tipografico

La tipografia Spaziatura tra le parole - Stampa kerning  distanza tra le parole. Dev’essere proporzionato al tracking, le lettere devono confluire con ritmo e grazia nelle parole. Ricordare il fattore di vicinanza nella leggibilità. Evitare eccessive concentrazioni di carattere neri seguiti da buchi bianchi troppo ampi. Se aumenta il treking  aumentare anche il kerning. I caratteri narrow e bold possono avere spaziature inferiori tra le lettere e le parole. AA 2005/06 Prof. Paola Trapani – Progettare l’immagine coordinata – Il carattere tipografico

La tipografia Tipografia e leggibilità a schermo Leggere a schermo è faticoso. Evitare i testi lunghi. Nei libri e riviste il layout è sempre molto denso per motivi economici. Lo spazio della schermata non ha questo problema. Usare un’interlinea ampia. AA 2005/06 Prof. Paola Trapani – Progettare l’immagine coordinata – Il carattere tipografico

La tipografia Tipografia e leggibilità a schermo I caratteri convenzionali (print font) non possono essere semplicemente trasferiti sullo schermo. I caratteri stampati hanno una risoluzione tra 1200 e 2400 dpi, contro i 72 dpi del carattere a schermo! Esistono particolari caratteri per lo schermo (detti screen font), il cui design è adattato alla risoluzione di schermo = 72 dpi ed ottimizzato per la lettura Chicago (quello del Mac) Verdana Georgia (alternativo al Times su PC) Geneva Monaco New York (Times New Roman su Mac)… AA 2005/06 Prof. Paola Trapani – Progettare l’immagine coordinata – Il carattere tipografico

La tipografia Gli screen font Il designer (es. Matthew Carter per Microsoft) ha considerato ogni singolo carattere a livello di pixel, e ne ha ottimizzato le forme per farli 'funzionare' costretti nelle rigide maglie della griglia dello schermo. Ecco perché il corsivo risulta sempre brutto, specie nelle piccole dimensioni: infatti non collima con una griglia perfettamente squadrata di pixel e pertanto va usato solo quando assolutamente inevitabile. AA 2005/06 Prof. Paola Trapani – Progettare l’immagine coordinata – Il carattere tipografico

La tipografia L’antialiasing - Schermo L'antialiasing è una sfumatura che rende il contorno delle lettere più morbido attraverso l'utilizzo di pixel intermedi fra il colore di primo piano e di sfondo. AA 2005/06 Prof. Paola Trapani – Progettare l’immagine coordinata – Il carattere tipografico

La tipografia L’antialiasing - Schermo Espediente per superare la scalettatura dei contorni delle lettere dovuta alla bassa risoluzione del monitor. Molto efficace per dimensioni del carattere più grandi, a piccole dimensioni crea una sfocatura fastidiosa che ostacola la lettura. Es. l'Arial a 18 punti rende bene, ma lo stesso carattere a 12 punti risulta troppo sfocato, mentre un carattere più 'leggero' come il Courier risulta evanescente anche alla stessa dimensione di 18pt. AA 2005/06 Prof. Paola Trapani – Progettare l’immagine coordinata – Il carattere tipografico

La tipografia L’antialiasing - Schermo Consiglio usare l'anti-aliasing solo per le headlines, e uno 'screen font' senza anti-alias per le piccole dimensioni (meno di 18 punti. AA 2005/06 Prof. Paola Trapani – Progettare l’immagine coordinata – Il carattere tipografico

La tipografia Gli stili light, normale, bold - Schermo La leggibilità a schermo dipende dalla scelta cromatica di testo e sfondo. Se lo sfondo è bianco, i bordi del carattere tendono a essere bruciati per effetto della sovraluminosità, dunque il carattere sembra più sottile. Compensare scegliendo un carattere dalle aste più spesse, oppure scurire lo sfondo. Gli stili light e ultralight su schermo vanno solo a dimensioni molto grandi. Per normali e bold aumentare il traking. AA 2005/06 Prof. Paola Trapani – Progettare l’immagine coordinata – Il carattere tipografico

La tipografia Dimensione del carattere - Schermo I titoli dovrebbero essere tra 18 e 20 pt I sottotitoli tra 16 e 18 Per i testi mantenere una dimensione minima di 10 pt, meglio tra 11 e 14 pt Considerare il contrasto con lo sfondo. Un colore chiaro su sfondo scuro appare più grassetto di un colore scuro sullo stesso sfondo, a causa dell’alone di sovraluminosità che emana. AA 2005/06 Prof. Paola Trapani – Progettare l’immagine coordinata – Il carattere tipografico

La tipografia Spaziatura tra le lettere - Schermo Il testo su schermo dovrebbe avere un tracking da 5 a 10 unità per garantire una maggiore leggibilità. Se si diminuisce il tracking le lettere tendono a fondersi. Es. r+n=m, c+l=d. I grassetti devono avere tracking maggiore dello stile normale. Se però il tracking è eccessivo le parole tendono a spezzarsi. AA 2005/06 Prof. Paola Trapani – Progettare l’immagine coordinata – Il carattere tipografico

La tipografia Interlinea - Schermo Normalmente l’interlinea a schermo è pari al 120% dell’interlinea singola (impostazione Auto). Nell’interlinea singola i discendenti e gli ascendenti di 2 linee consecutive paiono toccarsi. 35 caratteri/riga sono la lunghezza ideale su schermo. L’interlinea ideale = 150% della singola. Caratteri expanded e light richiedono un’interlinea maggiore di quelli narrow e bold. AA 2005/06 Prof. Paola Trapani – Progettare l’immagine coordinata – Il carattere tipografico

La tipografia Interlinea - Schermo Nell'HTML non esiste ancora il concetto di interlinea (il CSS non è ancora supportato a dovere dai browser) Esiste un trucco per simulare l'interlinea: inserire spazi di maggiori dimensioni all'interno di righe di testo. Il tag: <FONT SIZE=+1> </FONT><BR> (resta inteso che naturalmente il SIZE=+1 può essere aumentato, se necessario). AA 2005/06 Prof. Paola Trapani – Progettare l’immagine coordinata – Il carattere tipografico

La tipografia Lunghezza della riga - Schermo Il limite massimo è di 35 caratteri per riga o anche meno. Limitare la lunghezza della riga con uno dei seguenti metodi: usare la funzione BlockQuote inserire un <BR> (break) dove si desidera andare a capo costringere il testo in colonne di una data larghezza usando delle tabelle La lunghezza della riga è in relazione all’interlinea. AA 2005/06 Prof. Paola Trapani – Progettare l’immagine coordinata – Il carattere tipografico

Bibliografia Robert Bringhurst, Gli elementi dello stile tipografico, Ed. Bonnard, Milano, 2001 Michele Spera, La progettazione grafica tra creatività e scienza, Gangemi Editore, Roma, 2001 AA 2005/06 Prof. Paola Trapani – Progettare l’immagine coordinata – Il carattere tipografico