AA 2003/04Prof. Paola Trapani – Comunicazione Visiva La tipografia 1 La tipografia Balbuzie...

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?


2


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


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à.


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


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


6


Antique

serif = con grazie

Grotesque


Serif Si utilizzano per testi nell’editoria di libri e giornali.

Si utilizzano per titoli, intestazioni e pubblicità


7


Antique

serif = con grazie

Grotesque


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


Antique

serif = con grazie

Grotesque

sans serif = senza grazie o bastoniBaskerville

BodoniBookmanGaramondGoudyLucidaPalatinoTimes…

Avant GardeArialImpactFuturaGill SansHelveticaTahomaVerdana…


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.


10


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.


11


Le famiglie più estese possono avere caratteri sia serif che bastoni.


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)


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!


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


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


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


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.


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.


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.


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.


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.


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)…


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.


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.


25


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


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

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.


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.


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.


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.


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).


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.

AA 2003/04Prof. Paola Trapani – Comunicazione Visiva La tipografia 1 La tipografia Balbuzie...

Documents

Transcript of AA 2003/04Prof. Paola Trapani – Comunicazione Visiva La tipografia 1 La tipografia Balbuzie...