La tipografia Balbuzie digitale

1. La tipografiaBalbuzie 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? Prof. Paola Trapani – Comunicazione Visiva La tipografia

2. La tipografiaBalbuzie 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. Prof. Paola Trapani – Comunicazione Visiva La tipografia

3. La tipografiaBalbuzie digitale ConclusioneCiò 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. Prof. Paola Trapani – Comunicazione Visiva La tipografia

4. La tipografiaElementi di base Anatomia del carattere tipografico Le lettere hanno braccia, gambe, occhi, code, gambe … apice ascendente occhiello o pancia braccio Linea superiore p A T f Linea della maiuscola gamba Linea base Linea inferiore asta discendente traversa Prof. Paola Trapani – Comunicazione Visiva La tipografia

5. La tipografiaClassi 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 Prof. Paola Trapani – Comunicazione Visiva La tipografia

6. La tipografiaClassi 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à Prof. Paola Trapani – Comunicazione Visiva La tipografia

7. La tipografiaClassi 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. Prof. Paola Trapani – Comunicazione Visiva La tipografia

8. La tipografiaClassi di caratteri Antique serif = con grazie Grotesque sans serif = senza grazie o bastoni BaskervilleBodoniBookmanGaramondGoudyLucidaPalatinoTimes… Avant GardeArialImpactFuturaGill SansHelveticaTahomaVerdana… Prof. Paola Trapani – Comunicazione Visiva La tipografia

9. La tipografiaFamiglie 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. Prof. Paola Trapani – Comunicazione Visiva La tipografia

10. La tipografiaFamiglie 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. Prof. Paola Trapani – Comunicazione Visiva La tipografia

11. La tipografiaFamiglie di caratteri Le famiglie più estese possono avere caratteri sia serif che bastoni. Prof. Paola Trapani – Comunicazione Visiva La tipografia

12. La tipografiaUnità di misura dei caratteri Due unità di misura principali: • Pica  per misurare la lunghezza delle righe • Punti  per specificare • la grandezza del carattere (corpo) • distanza tra le righe (interlinea) Prof. Paola Trapani – Comunicazione Visiva La tipografia

13. La tipografiaEvidenziazione 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 • Caratteriserif e sans serif compresenti • Modifica della dimensione del carattere (con parsimonia) Scegliere solo alcune di queste opportunità, non usarle tutte insieme! Prof. Paola Trapani – Comunicazione Visiva La tipografia

14. La tipografiaInterlinea - 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. Prof. Paola Trapani – Comunicazione Visiva La tipografia

15. La tipografiaDimensioni 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 Prof. Paola Trapani – Comunicazione Visiva La tipografia

16. La tipografiaDimensioni 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 Prof. Paola Trapani – Comunicazione Visiva La tipografia

17. La tipografiaLayout 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. Prof. Paola Trapani – Comunicazione Visiva La tipografia

18. La tipografiaAllineamento 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. Prof. Paola Trapani – Comunicazione Visiva La tipografia

19. La tipografiaSpaziatura 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. Prof. Paola Trapani – Comunicazione Visiva La tipografia

20. La tipografiaSpaziatura 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. Prof. Paola Trapani – Comunicazione Visiva La tipografia

21. La tipografiaTipografia 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. Prof. Paola Trapani – Comunicazione Visiva La tipografia

22. La tipografiaTipografia 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)… Prof. Paola Trapani – Comunicazione Visiva La tipografia

23. La tipografiaGli 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. Prof. Paola Trapani – Comunicazione Visiva La tipografia

24. La tipografiaL’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. Prof. Paola Trapani – Comunicazione Visiva La tipografia

25. La tipografiaL’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. Prof. Paola Trapani – Comunicazione Visiva La tipografia

26. La tipografiaL’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. Prof. Paola Trapani – Comunicazione Visiva La tipografia

27. La tipografiaGli stili light, normale, bold - Schermo La leggibilità a schermo dipende dalla scelta cromatica di testo e sfondo (ricordare il triangolo del colore). 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. Prof. Paola Trapani – Comunicazione Visiva La tipografia

28. La tipografiaDimensione 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. Prof. Paola Trapani – Comunicazione Visiva La tipografia

29. La tipografiaSpaziatura 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. Prof. Paola Trapani – Comunicazione Visiva La tipografia

30. La tipografiaInterlinea - 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. Prof. Paola Trapani – Comunicazione Visiva La tipografia

31. La tipografiaInterlinea - 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>&nbsp;</FONT><BR> (resta inteso che naturalmente il SIZE=+1 può essere aumentato, se necessario). Prof. Paola Trapani – Comunicazione Visiva La tipografia

32. La tipografiaLunghezza 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. Prof. Paola Trapani – Comunicazione Visiva La tipografia