Schermo

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
1
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
2
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
3
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 …
braccio
Linea superiore
T
gamba
Linea inferiore
asta
AA 2005/06
occhiello
o pancia
pf
discendente
4
ascendente
A
apice
Linea della
maiuscola
Linea base
traversa
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
Grotesque
serif = con grazie
sans serif = senza grazie o
bastoni
Con differenti spessori delle aste
Serif
AA 2005/06
5
Con o senza differenti spessori delle aste
Bast
Prof. Paola Trapani – Progettare l’immagine coordinata – Il
carattere tipografico
La tipografia
Classi di caratteri
Antique
Grotesque
serif = con grazie
sans serif = senza grazie o
bastoni
Serif
Si utilizzano per testi
nell’editoria di libri e
giornali.
AA 2005/06
6
Bastoni
Si utilizzano per
titoli, intestazioni e
pubblicità
Prof. Paola Trapani – Progettare l’immagine coordinata – Il
carattere tipografico
La tipografia
Classi di caratteri
Antique
Grotesque
serif = con grazie
sans serif = senza grazie o
bastoni
A dimensione
standard sono meno
adatti allo schermo,
adatti alla stampa.
Sono più adatti alla
griglia di pixel dello
schermo.
Se si deve utilizzarli,
scegliere quelli con
grazie e aste non
troppo sottili.
AA 2005/06
7
Prof. Paola Trapani – Progettare l’immagine coordinata – Il
carattere tipografico
La tipografia
Classi di caratteri
Antique
Grotesque
serif = con grazie
sans serif = senza grazie o bastoni
Baskerville
Bodoni
Bookman
Garamond
Goudy
Lucida
Palatino
Times
…
AA 2005/06
2, pg 99
8
Avant Garde
Arial
Impact
Futura
Gill Sans
Helvetica
Tahoma
Verdana
…
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
9
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
10
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
11
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
12
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
13
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
14
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
15
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
16
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
17
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
18
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
19
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
20
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
21
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
22
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
23
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
24
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
25
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
26
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
27
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
28
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
29
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
30
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>&nbsp;</FONT><BR> (resta inteso
che naturalmente il SIZE=+1 può essere
aumentato, se necessario).
AA 2005/06
31
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
32
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
33
Prof. Paola Trapani – Progettare l’immagine coordinata – Il
carattere tipografico