La presentazione è in caricamento. Aspetta per favore

La presentazione è in caricamento. Aspetta per favore

AA 2005/06Prof. Paola Trapani – Progettare l’immagine coordinata – Il carattere tipografico 1 La tipografia Balbuzie digitale Le regole per l’uso del colore.

Presentazioni simili


Presentazione sul tema: "AA 2005/06Prof. Paola Trapani – Progettare l’immagine coordinata – Il carattere tipografico 1 La tipografia Balbuzie digitale Le regole per l’uso del colore."— Transcript della presentazione:

1 AA 2005/06Prof. Paola Trapani – Progettare l’immagine coordinata – Il carattere tipografico 1 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?

2 AA 2005/06Prof. Paola Trapani – Progettare l’immagine coordinata – Il carattere tipografico 2 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.

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

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

5 AA 2005/06Prof. Paola Trapani – Progettare l’immagine coordinata – Il carattere tipografico 5 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 Serif Bast oni Con o senza differenti spessori delle asteCon differenti spessori delle aste

6 AA 2005/06Prof. Paola Trapani – Progettare l’immagine coordinata – Il carattere tipografico 6 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à

7 AA 2005/06Prof. Paola Trapani – Progettare l’immagine coordinata – Il carattere tipografico 7 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.

8 AA 2005/06Prof. Paola Trapani – Progettare l’immagine coordinata – Il carattere tipografico 8 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

9 AA 2005/06Prof. Paola Trapani – Progettare l’immagine coordinata – Il carattere tipografico 9 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.

10 AA 2005/06Prof. Paola Trapani – Progettare l’immagine coordinata – Il carattere tipografico 10 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

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

12 AA 2005/06Prof. Paola Trapani – Progettare l’immagine coordinata – Il carattere tipografico 12 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)

13 AA 2005/06Prof. Paola Trapani – Progettare l’immagine coordinata – Il carattere tipografico 13 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!

14 AA 2005/06Prof. Paola Trapani – Progettare l’immagine coordinata – Il carattere tipografico 14 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. 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. Extrema ratio is a brand of world wide extension

15 AA 2005/06Prof. Paola Trapani – Progettare l’immagine coordinata – Il carattere tipografico 15 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

16 AA 2005/06Prof. Paola Trapani – Progettare l’immagine coordinata – Il carattere tipografico 16 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

17 AA 2005/06Prof. Paola Trapani – Progettare l’immagine coordinata – Il carattere tipografico 17 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

18 AA 2005/06Prof. Paola Trapani – Progettare l’immagine coordinata – Il carattere tipografico 18 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.

19 AA 2005/06Prof. Paola Trapani – Progettare l’immagine coordinata – Il carattere tipografico 19 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

20 AA 2005/06Prof. Paola Trapani – Progettare l’immagine coordinata – Il carattere tipografico 20 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.

21 AA 2005/06Prof. Paola Trapani – Progettare l’immagine coordinata – Il carattere tipografico 21 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.

22 AA 2005/06Prof. Paola Trapani – Progettare l’immagine coordinata – Il carattere tipografico 22 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)…

23 AA 2005/06Prof. Paola Trapani – Progettare l’immagine coordinata – Il carattere tipografico 23 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.

24 AA 2005/06Prof. Paola Trapani – Progettare l’immagine coordinata – Il carattere tipografico 24 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.

25 AA 2005/06Prof. Paola Trapani – Progettare l’immagine coordinata – Il carattere tipografico 25 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.

26 AA 2005/06Prof. Paola Trapani – Progettare l’immagine coordinata – Il carattere tipografico 26 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.

27 AA 2005/06Prof. Paola Trapani – Progettare l’immagine coordinata – Il carattere tipografico 27 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.

28 AA 2005/06Prof. Paola Trapani – Progettare l’immagine coordinata – Il carattere tipografico 28 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.

29 AA 2005/06Prof. Paola Trapani – Progettare l’immagine coordinata – Il carattere tipografico 29 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.

30 AA 2005/06Prof. Paola Trapani – Progettare l’immagine coordinata – Il carattere tipografico 30 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.

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

32 AA 2005/06Prof. Paola Trapani – Progettare l’immagine coordinata – Il carattere tipografico 32 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 (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.

33 AA 2005/06Prof. Paola Trapani – Progettare l’immagine coordinata – Il carattere tipografico 33 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


Scaricare ppt "AA 2005/06Prof. Paola Trapani – Progettare l’immagine coordinata – Il carattere tipografico 1 La tipografia Balbuzie digitale Le regole per l’uso del colore."

Presentazioni simili


Annunci Google