1

maurizio
mercurioz

Teoria dei caratteri

1

Grafiche tratto da: Il Segno Grafico - G. Fibbi - Hoepli editore. (libro di testo del mio corso)
e da: Fondamenti Di Grafica G. Ambrose e P. Harris Logos editore (testo consigliato).

2
maurizio
mercurioz

LE VARIABILI DELLARMONIA DEI CARATTERI.

Larghezza

ARCHITETTURA

SPAZI BIANCHI
Altezza

Valori
funzionali.
Aspetti di
leggibilit.

Valori
Pi leggibilit. Pi estetica.
semantici.
Aspetti di stile
per trasferire
estetica e
personalit.

Fra caratteri.
Fra parole.

3
maurizio
mercurioz

LANTICA TIPOGRAFIA
Perch ne parliamo?
Perch condiziona la logica delle misurazioni e limpaginazione.

l
de
rpo re
Co ratte
ca

4
maurizio
mercurioz

CORPO MISURE E ALLINEAMENTI

N.B. Non tutti i caratteri coprono laltezza assegnata, per vezzo o per stile.

5
maurizio
mercurioz

CORPO MISURE E ALLINEAMENTI

I caratteri possono non occupare

tutto il corpo a disposizione.
5

Oltre al
corpo c
linterlinea.

6
maurizio
mercurioz

LANTICA TIPOGRAFIA
Corpo e interlinea.

Aguzzate la
vista per trovare
la differenza.

7
maurizio
mercurioz

ESTENSIONE VERTICALE: INTERLINEA

Linterlinea misura la distanza fra una linea di base e la
successiva. N.B.non lo spazio fra le stringhe di testo.
I caratteri tipografici vengono espressi con due valori:
il primo misura il corpo, il seconda linterlinea suggerita.
Es.: Helvetica 10/14significa che 10 punti sono laltezza del corpo
(A) e 14 linterlinea (B).
10/10 significa con nessuna separazione fra i corpi delle due righe
(in questo caso si definisce sterlineato).

8
maurizio
mercurioz

ESTENSIONE VERTICALE: INTERLINEA

Linterlinea misura la distanza fra una linea di base e la
successiva (non lo spazio fra le stringhe di testo).

9
maurizio
mercurioz

IL NUMERO DEI CARATTERI SMISURATO

Ogni carattere esprime:
un tono,
uno stile e
uno stato danimo.
Ma anche una leggibilit.

Cosa vi sembra pi appropriato?

10
maurizio
mercurioz

10

TERMINOLOGIA DEI COMPONENTI

11
maurizio
mercurioz

11

TERMINOLOGIA DEI COMPONENTI

12
maurizio
mercurioz

TANTI CARATTERI. PERCH?

12

Ci sono elementi di stile

e particolari
che danno fantasia a una serie infinita di caratteri.
Ogni carattere ha uno stile suo e rappresenta diversi
stati danimo per il racconto visivo.

El
e

maurizio
mercurioz

Grazie

m
en
ti

Armonia
13
Citazione
Trasgressione
.

di
s

til
e

Grazie
1
2
1
2

13

14
maurizio
mercurioz

A COSA SERVONO LE GRAZIE?

grazie

A leggere meglio da vicino.

Ci vuol anche dire che da lontano
ostacolano la lettura.

14

15
maurizio
mercurioz

15

TIPI DI GRAZIE

16
maurizio
mercurioz

16

CON GRAZIE (SERIF)

SENZA GRAZIE (SANS SERIF)

17
maurizio
mercurioz

17

CARATTERI MONOSPAZIATE E PROPORZIONALI

18
maurizio
mercurioz

GRASSETTO O BOLD
Semanticamente un carattere rinforzato nel corpo sta gridando.

Esteticamente uno spessore maggiore del carattere dar una

risposta pi invasiva
quindi pi colore tipografico (influenzato anche dalla spaziatura).

18

Anche il fondo nero con i caratteri bianchi aumenta la drammaticit.

19
maurizio
mercurioz

CORSIVO O ITALIC
Alcuni caratteri, come lHlvetica, hanno uninclinazione meccanica
dei caratteri normali,
Altri come il palatino sono completamnte rridisegnati. Vedasi le a.

19

20
maurizio
mercurioz

MAIUSCOLETTO
Il maiuscoletto generato dai programmi di scrittura riduce in proporzione
i corpi delle lettere che occupano posti minuscoli,

Mentre il vero maiuscoletto lo ridisegna dando lo stesso peso alle stesse

lettere.
Adatto a
rappresentare il
prestigio.

20

21
maurizio
mercurioz

VARIANTI DELLO STESSO CARATTERE

Ogni carattere ha una declinazione articolata.
La stessa lettera sar:normale, corsiva, bold, extrabold,fine,extrafine

21

22
maurizio
mercurioz

VARIANTI DELLO STESSO CARATTERE

Ogni carattere ha una declinazione articolata.

22

23
maurizio
mercurioz

VARIANTI DELLO STESSO CARATTERE

Ogni carattere ha una declinazione articolata .

23

maurizio
mercurioz

VARIANTI DELLO STESSO CARATTERE

SERIE DI CARATTERI HELVETICA A DISPOSIZIONE
Le variabili apportate allo stesso carattere sono:
La forma ortografica maiuscola e minuscola.
Lo spessore delle aste. Daranno diversi livelli di bold.

Linclinazione delle aste. Daranno il corsivo che sar pi o meno bold.

La compressione dei caratteri. Compressed + compatto, extended -.

25
maurizio
mercurioz

I CARATTERI
Micro
composizione
delle lettere

25

26
maurizio
mercurioz

DEFORMAZIONI OTTICHE DEI CARATTERI

Le aste orizzontali appaiono pi larghe delle verticali (H).
Bisogner allagare pochissimo queste ultime per riportare equilibrio.
In parte lo si far anche sulle oblique.
Se un quadrato diviso orizzontalmente a met, la parte superiore
ci sembra pi grande.
Bisogner alzare di pochissimo lasta della: B, E, H, K.
Alcune lettere hanno forma triangolare: A, V.
Altre quadrate: H, I, L, M, N, R, T, Z.
Altre miste: B, D, T, U.
Applicheremo i criteri per la deformazione delle forme geometriche.

26

27
maurizio
mercurioz

DEFORMAZIONI
Micro
composizione
delle lettere

27

28
maurizio
mercurioz

28

DEFORMAZIONI

29
maurizio
mercurioz

29

DEFORMAZIONI

30
maurizio
mercurioz

ESTENSIONE VERTICALE: INTERLINEA

Tratto da: Fondamenti di Grafica. Gavin Ambrose e Paul Harris. Logos editore

30

31
maurizio
mercurioz

AVVICINAMENTO DELLE LETTERE E SPAZIATURA

La separazione fra parole ha lobiettivo di giustificare un testo.
La separazione fra caratteri ha lobiettivo di alleggerire.
Lavvicinamento (lo spazio bianco fra un carattere e il successivo)
cambia da lettera a lettera.
Non dovrebbe mai essere alterato quello proposto da chi ha
disegnato il carattere.

31

32
maurizio
mercurioz

AVVICINAMENTO DELLE LETTERE E SPAZIATURA

32

33
maurizio
mercurioz

ESTENSIONE ORIZZONTALE: AVVICINAMENTO

Tratto da: Il segno Grafico Gianni Fibli. HOEPLY editore

Tra una lettera e laltra larmonia pretende la stessa area.

33

Le regole pratiche cambiano in funzione della forma geometrica

delle lettere.

34
maurizio
mercurioz

ESTENSIONE ORIZZONTALE: AVVICINAMENTO

Tratto da: Il segno Grafico Gianni Fibli. HOEPLY editore

Lunit di misura la quarta parte del trattino dell H.

Tra due lettere quadrate si lasciano 3 unit di spaziatura.
Tra due triangolari rivolte nella stessa direzione (fra due A o
due V) si lasciano 1 unit di spaziatura.
Se contrapposti si lascia meno di 1 unit unit di spaziatura.
Fra due tonde si lascia 1 unit di spaziatura.
Fra tonde e quadrato si lasciano 2 unit di spaziatura.
Fra tonde e triangolare si lascia 0 spazio.
Fra triangolare e quadrata si lascia 1 unit di spaziatura.

34

35
maurizio
mercurioz

ESTENSIONE ORIZZONTALE: AVVICINAMENTO

Ogni disegnatore di caratteri e di loghi d precise istruzioni:

35

36
maurizio
mercurioz

ESTENSIONE ORIZZONTALE: AVVICINAMENTO

Crenare significa avvicinare i caratteri quando locchio lo consiglia.

36

37
maurizio
mercurioz

AVVICINAMENTO DELLE LETTERE E SPAZIATURA

La prima scritta non giustificata. Esce dalla gabbia e d fastidio.
La seconda palesa la sua contrazione, e d altrettanto fastidio.

37

38
maurizio
mercurioz

ESTENSIONE ORIZZONTALE: AVVICINAMENTO

molto semplice
con il computer
modificare i
caratteri e la loro
estensione, ma,
se lobiettivo
larmonia, se
possibile
meglio evitare.

38

39
maurizio
mercurioz

LEGGIBILIT DEL TESTO.

Ogni parola memorizzata nel cervello come segno.
La velocit, e la possibilit, di lettura dipende da:
Forma della parola.
Tono(quantit di nero/ampiezza del carattere) e grigio tipografico.
Rapporto fra spazi stampati e aria attorno.
La forma del testo.
Il fondo e il contesto grafico.

39

40
maurizio
mercurioz

COMPOSIZIONE DEL TESTO.

Rientro per rendere
pi chiaro il capoverso. Si
usa in lunghi testi.
Locchio colpisce subito
linizio del paragrafo
rendendo la lettura pi
selettiva. Potrebbe essere
enfatizzata ingrandendo
la prima lettera o con un
disegno che la incorpori.

Composizione
a bandiera
sinistra.

Composizione
a epigrafe
(breve per!!!)

Composizione
a bandiera
destra.

Composizione
Giustificata xx
xxx xx xxx
Anche andare a
capo un atto
comunicativo.
Nidifica
gli
argomenti.

40

41
maurizio
mercurioz

QUANTO PU ESSERE LUNGA UNA RIGA?

Tratto da: Fondamenti Di Grafica G. Ambrose e P. Harris Logos editore .

Un headline pubblicitario
regge massimo 5 parole.
I giornali ci hanno abituato a
scrivere su strette colonne,
Se il problema fosse stato
solo quello della veloce
lettura avrebbero potuto
essere pi larghe ma
lesigenza era la correzione
degli errori.

41

42
maurizio
mercurioz

QUANTO PU ESSERE LUNGA UNA RIGA?

Tratto da: Fondamenti Di Grafica G. Ambrose e P. Harris Logos editore .

In un libro o in un dplian fitto ci sono criteri per favorire la velocit.

Lettura per colpi docchio.
Proposta 1. Righe di 5 parole (media 5 lettere a parola)

Proposta 2. Una volta e mezza lalfabeto minuscolo.

Proposta 3. Da un minimo di 26 caratteri a un massimo di 68.

42

43
maurizio
mercurioz

TERMINOLOGIA DA CONOSCERE
La giustezza.

43

la lunghezza di una parola, di una frase

o di un testo.

44
maurizio
mercurioz

TERMINOLOGIA DA CONOSCERE
Il corpo.

Carattere Helvetica:

44

Altezza fra la spalla superiore e quella inferiore, non

della lettera, ma del tassello dove storicamente si
inseriva il carattere tipografico.

Carattere Times New Roman

45
maurizio
mercurioz

TERMINOLOGIA DA CONOSCERE
Il punto tipografico.

Unit di misura (inventata dal tipografo

francese Didot) della tipografia non
britannica che usa il PICA.

Tipometro
45

46
maurizio
mercurioz

I CARATTERI
La scelta del carattere (font) assolve un obiettivo
funzionale (percezione dellelaborato)
lettura da vicino o da lontano
materiale di supporto (web, carta, altro)
contesto
semantico (trasmette tono, stile ed elementi evocativi).
N.B.
Mai corsivi
per il web.

46

47
maurizio
mercurioz

I CARATTERI COME SCELTA SEMANTICA

Come attori in un casting

47

48
maurizio
mercurioz

48

CLASSIFICAZIONE

49
maurizio
mercurioz

49

CLASSIFICAZIONE

50
maurizio
mercurioz

50

LART DIRECTOR, POI, AGGIUNGE DEL SUO

51
maurizio
mercurioz

51

QUANDO LA CREATIVIT AFFIDATA AL FONT

52
maurizio
mercurioz

52

QUANDO LA CREATIVIT AFFIDATA AL FONT

53
maurizio
mercurioz

53

QUANDO LA CREATIVIT AFFIDATA AL FONT

E AL COLORE

54
maurizio
mercurioz

54

QUANDO LA CREATIVIT AFFIDATA AL FONT

INTERPRETATO SEMANTICAMENTE

55
maurizio
mercurioz

55

QUANDO LA CREATIVIT AFFIDATA AL FONT

INTERPRETATO SEMANTICAMENTE

56
maurizio
mercurioz

56

CARATTERE, IMPAGINAZIONE E STILE

57
maurizio
mercurioz

57

CARATTERE, IMPAGINAZIONE E STILE

58
maurizio
mercurioz

58

CARATTERE, IMPAGINAZIONE E STILE

59
maurizio
mercurioz

59

CARATTERE, IMPAGINAZIONE DINAMICA

60
maurizio
mercurioz

CARATTERI PER IL WEB

Per una migliore leggibilit bisogner:
Usare caratteri senza
Evitare linee trasversali
grazie (a bastoni).
non solo nel segno ma
anche nei caratteri.

60

61
maurizio
mercurioz

CARATTERI PER IL WEB

Tratto da Credibilit e Web Design efficace.

La lettura sul web pi

faticosa di quella sulla
carta quindi premuriamoci
di essere pi semplici e
puliti nella composizione
di testo e immagini.
Come garantire la leggibilit:
Uso accurato del contrasto tipografico.
Enfatizzare solo aspetti importanti del testo.
Lunghezza di una riga di circa 9 parole (media di 5
lettere per parola).
Utilizzo di testi brevi (al massimo 20 righe).
Dimensione minima del font di 12 punti.
61

62
maurizio
mercurioz

62

CARATTERI SPECIFICI PER IL WEB

63
maurizio
mercurioz

VEDOVE E ORFANI

Evitate che una pagina

finisca con le prime righe di
un paragrafo che inizia.
Evitate che una pagina inizi
con le ultime righe di un
paragrafo.

63

64
maurizio
mercurioz

64

maurizio
mercurioz

E
I
Z
GRA

.
E
N
O
I
Z
N
E
T
T
A

L
L
DE

Il file di questa presentazione su:

http://mauriziomercurio.weebly.com
Pagina CONFERENZE
Per contatti: mmercurio@hotmail.it
Tel.: 3355648232