aa 2003/04prof. paola trapani – comunicazione visiva la tipografia 1 la tipografia balbuzie...
TRANSCRIPT
AA 2003/04 Prof. Paola Trapani – Comunicazione VisivaLa tipografia
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?
AA 2003/04 Prof. Paola Trapani – Comunicazione VisivaLa 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.
AA 2003/04 Prof. Paola Trapani – Comunicazione VisivaLa tipografia
3
La tipografiaBalbuzie digitale
ConclusioneCiò 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à.
AA 2003/04 Prof. Paola Trapani – Comunicazione VisivaLa tipografia
4
La tipografiaElementi di base
Anatomia del carattere tipograficoLe lettere hanno braccia, gambe, occhi, code, gambe …
Tbraccio
gamba f
ascendente
pdiscenden
teasta
Linea della maiuscola
Linea base
occhiello o
pancia
A
apice
traversa
Linea superiore
Linea inferiore
AA 2003/04 Prof. Paola Trapani – Comunicazione VisivaLa 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
Serif
Con o senza differenti spessori delle asteCon differenti spessori delle aste
AA 2003/04 Prof. Paola Trapani – Comunicazione VisivaLa tipografia
6
La tipografiaClassi di caratteri
Antique
serif = con grazie
Grotesque
sans serif = senza grazie o bastoni
Serif Si utilizzano per testi nell’editoria di libri e giornali.
Si utilizzano per titoli, intestazioni e pubblicità
AA 2003/04 Prof. Paola Trapani – Comunicazione VisivaLa 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.
AA 2003/04 Prof. Paola Trapani – Comunicazione VisivaLa tipografia
8
La tipografiaClassi di caratteri
Antique
serif = con grazie
Grotesque
sans serif = senza grazie o bastoniBaskerville
BodoniBookmanGaramondGoudyLucidaPalatinoTimes…
Avant GardeArialImpactFuturaGill SansHelveticaTahomaVerdana…
AA 2003/04 Prof. Paola Trapani – Comunicazione VisivaLa 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.
AA 2003/04 Prof. Paola Trapani – Comunicazione VisivaLa 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.
AA 2003/04 Prof. Paola Trapani – Comunicazione VisivaLa tipografia
11
La tipografiaFamiglie di caratteri
Le famiglie più estese possono avere caratteri sia serif che bastoni.
AA 2003/04 Prof. Paola Trapani – Comunicazione VisivaLa 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)
AA 2003/04 Prof. Paola Trapani – Comunicazione VisivaLa 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!
AA 2003/04 Prof. Paola Trapani – Comunicazione VisivaLa 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.
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
AA 2003/04 Prof. Paola Trapani – Comunicazione VisivaLa 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
AA 2003/04 Prof. Paola Trapani – Comunicazione VisivaLa 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
AA 2003/04 Prof. Paola Trapani – Comunicazione VisivaLa 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.
AA 2003/04 Prof. Paola Trapani – Comunicazione VisivaLa 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.
AA 2003/04 Prof. Paola Trapani – Comunicazione VisivaLa 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.
AA 2003/04 Prof. Paola Trapani – Comunicazione VisivaLa 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.
AA 2003/04 Prof. Paola Trapani – Comunicazione VisivaLa 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.
AA 2003/04 Prof. Paola Trapani – Comunicazione VisivaLa 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)…
AA 2003/04 Prof. Paola Trapani – Comunicazione VisivaLa 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.
AA 2003/04 Prof. Paola Trapani – Comunicazione VisivaLa 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.
AA 2003/04 Prof. Paola Trapani – Comunicazione VisivaLa 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.
AA 2003/04 Prof. Paola Trapani – Comunicazione VisivaLa 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.
AA 2003/04 Prof. Paola Trapani – Comunicazione VisivaLa 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.
AA 2003/04 Prof. Paola Trapani – Comunicazione VisivaLa 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.
AA 2003/04 Prof. Paola Trapani – Comunicazione VisivaLa 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.
AA 2003/04 Prof. Paola Trapani – Comunicazione VisivaLa 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.
AA 2003/04 Prof. Paola Trapani – Comunicazione VisivaLa 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> </FONT><BR> (resta inteso che naturalmente il SIZE=+1 può essere aumentato, se necessario).
AA 2003/04 Prof. Paola Trapani – Comunicazione VisivaLa 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.