Tipografia digitale - L`anatomia dei font

II
eGutenberg
Project
Tipografia Digitale
L’anatomia dei Font
A cura di Letizia Bollini
Angela Nuzzi, Matteo Ostuni e
Domenica Pontieri
III
Tipografia Digitale
eGutenberg Project, www.egutenberg-project.it
Università degli Studi di Milano - Bicocca. Corso di Laurea
Magistrale in Teoria e Tecnologia della Comunicazione. Corso di Grafica a.a. 2010/2011
Milano, ottobre 2011
Testi tratti da:
Pag. 3-24, 36-39, 43, 45, 46, 49-53, 56-69, 72-87:
Bollini L, Pomati F. (2005). Cultura e strumenti per il visual
design. Laboratorio di grafica vettoriale.
Pag. 57-63, 65, 66, 68, 69, 79-84, 91-95, 100-102:
Bollini L, Greco M. (2008). Organizzare presentazioni efficaci. Progettare e realizzare diapositive per parlare in pubblico.
Pag. 90-102:
Bollini L, Cova R. (2009). Basic Web Design 2: standard e
strumenti per la progettazione web.
Testi parziali e immagini:
Angela Nuzzi - [email protected]
Matteo Ostuni - [email protected]
Domenica Pontieri - [email protected]
Impaginazione:
Domenica Pontieri - [email protected]
Copertina e concept grafico:
Rinaldo de Palma - [email protected]
Licenza Creative Commons
Attribuzione - Non commerciale - Condividi allo stesso modo
3.0 Italia License
In copertina: Francesco Griffo
IV
Indice
Presentazione
VII
2
18
23
55
71
89
108
113
125
128
Anatomia della parola scritta
Misurazione del carattere
Tipi grafici
La composizione
La forma del testo
Tipografia web
L’intervista
Riferimenti
Indice delle immagini
Biografie degli autori
V
VI
Presentazione
L’
esperienza didattica maturata durante il corso di Graphic Design del Corso di Laurea in Teoria
e Tecnologia della Comunicazione presso l’Università degli Studi di Milano-Bicocca è confluita nella
realizzazione di questa collana distribuita in diversi formati elettronici, articolata in sette lezioni che
intendono affrontare le diverse tematiche connesse
alla progettazione grafica nell’ambito della comunicazione visiva, snodandosi attraverso un costante
percorso di analisi dello stato dell’arte, di osservazione degli interpreti più significativi e di esplorazione degli scenari più innovativi, fornendo di volta
in volta strumenti, spunti ed occasioni di riflessione, confronto, partecipazione e divertimento, in uno
scenario in continua evoluzione e rapido mutamento.
Il carattere tipografico, la sua storia, i suoi dettagli non sono altro che la manifestazione visiva della
parola, elemento centrale di ogni tipo di comunicazione. Saper comunicare visivamente un progetto
dal punto di vista grafico implica l’essere in grado
di organizzare, gestire e impostare correttamente
un testo al fine di ottenere un impaginato coerente.
In questo volume, verranno presi in esame tutti gli
elementi che realizzano correttamente un testo e un
layout grafico. Partendo dall’analisi degli elementi
che costituiscono e contraddistinguono i diversi tipi
di carattere vedremo come il linguaggio scritto si è
mutato nel corso del tempo, facendo evolvere i caratteri dalla scrittura calligrafica a quella digitale.
VII
VII
Titolo di capitolo
WORD
KEY
Anatomia della
parola scritta
NCE
ESSE
I
ntrodurre il tema della tipografia significa dedicare uno spazio sufficientemente ampio ai caratteri e alla loro importante funzione all’interno
di ogni progetto grafico.
Questa prima parte del capitolo è dedicata all’analisi di quella che definiamo l’anatomia della
parola scritta, in cui si analizzerà il carattere da
un punto di vista prettamente grafico. Conoscere
da quali elementi è costituito un carattere è utile
per progettare in maniera corretta e significativa un testo e
un layout grafico.
Di seguito vengono analizzati
gli elementi che costituiscono
e contraddistinguono i diversi
tipi di carattere (asse, discendente, ascendente, apice, vertice, asta, etc).
3
Asse
Ogni tipo, famiglia di caratteri ha un proprio asse
sul quale vengono disegnate e costruite le lettere.
La presenza dell’asse imita il tratto di una penna, generando sezioni spesse o sottili, più o meno
inclinate, come se la lettera fosse disegnata con
un pennino. La O è ideale per individuare l’asse
di una lettera, perché ne mette chiaramente in
evidenza l’inclinazione.
001
001. Asse sulla lettera O
4
Linea di base
La linea di base è la linea immaginaria sulla quale
poggiano le lettere.
Tutte le lettere discendenti, come la g, la y e la j
si estendono sotto la linea di base. Normalmente
nella maggior parte dei caratteri, le lettere arrotondate e appuntite, si estendono leggermente
sotto la linea di base.
002
002. Linea di base
5
Discendente
Il discendente è la parte di una lettera che si
estende sotto la linea di base e si trova nelle lettere g, j, p, q, y. I discendenti dello stesso carattere, possono avere profondità diverse.
003
003. Discendente
6
Ascendente
L’ascendente è la parte di una lettera che si estende sopra l’altezza della x. Si trovano nelle lettere
b, d, f, h, k, l, t. In alcuni casi a seconda del disegno del carattere, l’ascendente risulta essere più
alto della lettera maiuscola.
004
004. Acendente
7
Apice
L’apice è il punto di
intersezione più alto
della lettera, dove si incontrano due tratti.
005
Vertice
Il vertice è il punto di
intersezione più basso
tra due tratti, nei pressi
della linea di base.
006
005. Apice
006. Vertice
8
Asta
L’asta di una lettera
è il principale tratto
verti- cale di questa,
non include ornamenti di nessun tipo.
007
Asta primaria e secondaria
In alcuni caratteri
come nella lettera M
e H, di tipo serif (con
grazie), spesso sono
presenti aste primarie e secondarie.
008
007. Asta
008. Asta primaria e secondaria
9
Asta trasversale
L’asta trasversale o incrocio, è il tratto orizzontale che attraversa
un altro tratto.
009
Barra
La barra è il tratto orizzontale che
collega due tratti.
010
009. Asta trasversale
010. Barra
10
Braccio
Il braccio è il
tratto ascendente, orizzontale o
diagonale, collegato alla lettera
ad una estremità
e libero dall’altra.
011
Gamba
La gamba è il
tratto diagonale
discendente, collegato alla lettera
ad una estremità
e libero dall’altra.
012
011. Braccio
012. Gamba
11
Sperone
Lo sperone è una breve proiezione appuntita di un’asta
o di un tratto di un carattere
serif (graziato).
013
Svolazzo
Lo svolazzo è il tratto terminale decorativo, aggiunto al
carattere, presente o meno, a
seconda del tipo e dello stile
del carattere utilizzato.
014
013. Sperone
014. Svolazzo
12
Spina
La spina è il punto
principale della curva
della lettera S, s.
015
Collo
Il collo è il tratto che
collega la sezione superiore a quella inferiore della lettera g.
Ricordiamo che può
essere anche molto
diverso da carattere a
carattere.
016
015. Spina
016. Collo
13
Anello/Gancio
L’anello è il tratto discendente della lettera
g. Quando è completamente chiuso è detto
anello, quando è aperto
è detto gancio.
017
Orecchio
L’orecchio è una breve
sporgenza della lettera
g. In base allo stile di
carattere potrebbe trovarsi anche nelle lettere
p ed r.
018
017. Anello/Gancio
018. Orecchio
14
Coda
La coda è il prolungamento che si estende da
una lettera verso il basso, normalmente sotto
la linea di base. Si presenta sempre attaccata
ad una estremità e libera dall’altra, come nelle
lettere Q e j.
019
Occhiello
L’occhiello è lo spazio
chiuso nella parte superiore della lettera.
020
019. Coda
020. Occhiello
15
Spalla
La spalla è la parte arrotondata di
una lettera minuscola che collega due aste o due
tratti verticali.
021
Contorno interno
Il contorno interno è l’area della lettera interamente racchiusa
da un contorno.
022
021. Spalla
022. Contorno interno
16
Misurazione del
carattere
NSION
DIME
L
a dimensione del carattere è detta corpo del
carattere e viene espressa e misurata in punti tipografici (pt) per quello che riguarda la grafica a
stampa. Per le misure tipografiche ci si avvale del
tipometro, uno strumento in plastica trasparente, composto da varie scale graduate in cui sono
presenti le misure in centimetri e in millimetri e
le corrispondenti misure tipografiche.
Nel 1770 F. A. Didot introdusse il sistema di
misura basato sul punto tipografico, che corrisponde a 0.375 mm. Il sistema
venne adottato da quasi tutti
i Paesi europei, tranne che da
Inghilterra e Stati Uniti che
assunsero come unità di misura un punto pari a 0,351 mm1.
A partire dal 1980, la parola
font è stata usata in alternati1. Per ulteriori aggiornava con la parola carattere, per
menti sui sistemi di misurazione del carattere, si
indicare la rappresentazione
suggerisce di consultare il
testo in bibliografia “Fardi tutti i caratteri costituenti
si un libro” (Bandinelli,
uno specifico stile.
Lussu, Iacobelli, 1990)
All’interno del font sono con-
19
tenuti anche i valori predefiniti degli attributi
del carattere, come spaziature e interlinee, anche
se è possibile intervenire in qualsiasi momento
per modificarli. I font sono inoltre raggruppati
in famiglie, che ne descrivono le varianti di stile (condensed, extended, etc) e di spessore (bold,
medium, light, etc)2.
I font standard includono 26 lettere (maiuscole e
minuscole), numeri (compresi tra 0 e 9) e caratteri aggiuntivi (segni di punteggiatura, accenti,
2. Per ulteriori aggiornamenti sulle font, si suggerisce di consultare il testo
in bibliografia “Grafica
& Stampa” (Fioravanti,
1984)
caratteri o simboli particolari,
segni di paragrafo, etc).
Non tutte le categorie di font
contengono però le stesse lettere: nei font per titolazione
ad esempio, utilizzati solo in
grandi dimensioni, potrebbero mancare alcuni caratteri
presenti nei font di testo. Vi
sono poi i set di caratteri speciali, come font ornamentali o
20
simbolici, che normalmente non includono alcuna lettera, ma solo simboli tipici del particolare
set di carattere.
Ricordiamo che è sempre necessario comunicare al tipografo che dovrà stampare il progetto,
la piattaforma utilizzata per creare il documento (Windows o Macintosh) e inserire, insieme al
progetto, anche una cartella con tutti i font utilizzati all’interno del documento. Le font verranno caricate sul sistema operativo in modo da non
avere problemi nella stampa finale del documento. In alternativa si possono convertire i testi in
tracciati vettoriali.
21
Titolo Tipi
di capitolo
grafici
W
S
ANS
ORD
SERIF
KEY
I
l linguaggio scritto si è evoluto nel corso dei
millenni, facendo evolvere i caratteri dalla scrittura calligrafica degli amanuensi ai caratteri industriali a piombo fino a quelli odierni digitali.
Per organizzare questo patrimonio sono state
ideate numerose classificazioni degli stili di carattere3. Di seguito vengono citati alcuni tra i più
significativi sistemi di classificazione.
Aldo Novarese
3. Per ulteriori aggiornamenti sui sistemi di classificazione delle categorie
di caratteri, si suggerisce
di consultare il testo in
bibliografia “Questioni di
carattere” (Rattin, Ricci,
1997)
In Italia, Aldo Novarese, studioso di estetica del carattere e
designer per la fonderia Nebiolo, propose una classificazione
in dieci gruppi, secondo criteri
storici e formali (tipo di grazie).
Questa classificazione comprende i caratteri: lapidari, medioevali, veneziani, transizionali,
bodoniani, scritti, ornati, egiziani, lineari e fantasie.
24
Lapidari
Il carattere lapidario, chiamato anche “capitale quadrata” e “maiuscola elegante”, nasce per essere usato per le epigrafi e per le iscrizioni sui monumenti.
Aspetto riconoscibile di questi caratteri sono le grazie, le quali terminano formando un angolo di 30° e
la base completamente piatta4.
Un esempio è quello presente in una stele del basamento della Colonna Traiana, eretta a Roma nel
4. Per approfondimenti
consultare l’articolo in sitografia “Come conoscere
ed utilizzare i caratteri
tipografici. Le classificazioni stilistiche”
5. Per approfondimenti
consultare l’articolo in
sitografia “Lapidari - Romani Antichi (Classificazione Novarese)”
114 d.C.. Si tratta di caratteri
le cui grazie sono triangolari e
formano un angolo acuto con la
linea di base.
Il carattere Trajan, maiuscolo e
maiuscoletto, disegnato da Carol Twombly è quello che meglio rappresenta la digitalizzazione del carattere lapidario5.
25
023
024
023. Carattere Trajan
024. Dettaglio della Colonna Traiana, Roma
26
Medioevali
I caratteri medioevali (chiamati anche gotici) sono
caratteri tipici del periodo di Gutenberg, che oggi
sono considerati di difficile lettura proprio per la
loro pesantezza visiva. Si tratta di caratteri derivati
dalle varie scritture usate nell’Alto Medioveo e nel
Rinascimento. Sono caratterizzati dalle estremità
allungate che terminano con angoli accentuati che
imitano le forme eseguite con la penna d’oca. Le maiuscole hanno spesso terminali molto svolazzanti.
Le grazie di questa tipologia di carattere sono anche
definite “a punta di lancia rivolta verso il basso”.
025. Carattere Old London
025
27
Veneziani
I caratteri veneziani derivano dai caratteri romani
antichi, sono caratterizzati dall’estremità arrotondata delle grazie e dal piede dell’asta leggermente
concavo. Il carattere «Garamond» è il più adoperato, ma vi sono altre tipologie di Veneziani: «Bembo», «Poliphilus Roman» «Blado Italic», «Jenson»,
«Garaldus», «ITC Galliard», «Golden», «Caledonia», «Centaur», «De Roos», «Elzevir», «Sabon»,
«Vendôme», «Romulus», «Trajanus», «Meno»,
«Minion», «Van Dijck», «Bitstream Iowan Old
Style», «Serlio», «Aurelia», «Dante»6.
6. Per approfondimenti
consultare l’articolo in sitografia “Veneziani - Rinascimentali (Classificazione Novarese)”
026. Carattere Garamond
026
28
Transizionali
I caratteri transizionali sono tutti quei caratteri
nati tra il periodo degli Old Style e dei Moderni quindi tra la fine del XVII e il XVIII secolo.
Le caratteristiche che contraddistinguono questi tipi di carattere riguardano le grazie le quali
non hanno quasi mai inclinazione e si uniscono
all’asta verticale con una piccola curva, mentre la
base è quasi completamente piatta7. Un esempio
di carattere transizionale è lo Scotch Roman creato, probabilmente, da Richard Austin (n. 1765 –
m. 1830) e poi digitalizzato dalla Monotype.
7. Per approfondimenti
consultare l’articolo in
sitografia “Transizionali
- Barocche (Classificazione Novarese)” e “Come
conoscere ed utilizzare i
caratteri tipografici. Le
classificazioni stilistiche”
027. Carattere Scotch
Roman
027
29
Bodoniani
I bodoniani sono caratteri classici ispirati a Giovanbattista Bodoni. Sono caratterizzati da un rapporto
di spessore esasperato tra le aste e dal contrasto tra
gli spessori delle grazie e delle aste. Le grazie si
uniscono con l’asta verticale della lettera, formando
un evidente angolo retto e sono solitamente ridotte
a un filetto completamente piatto. Vengono molto
utilizzati sia in editoria che in pubblicità.
028
028. Carattere Bodoni
30
Scritti
Gli scritti sono detti anche calligrafici in quanto
si avvicino alla scrittura a mano. Hanno caratteristiche eterogenee e variabili a seconda del tipo
di strumento di scrittura che si imita. Si distinguono in calligrafici legati o non legati.
Alcuni esempi sono: Bo Chen Font, Desyrel, Elliot Six, Gorri Sans8.
029
8. Per approfondimenti
consultare l’articolo in
sitografia “12 Font Scritti a Mano per Uso Commerciale” e “50 Beautiful
Hand-Drawn Web Design”
029. Carattere Desyrel
31
Ornati
I caratteri ornati sono caratteri con decorazioni accentuate e ombreggiature che di solito vengono utilizzati come capilettera e sempre affiancati ad altri
caratteri9. Un esempio di tale carattere è l’Ornate
Initial Styles Two Std ideato da Gerald Gallo.
030
9. Per approfondimenti
consultare l’articolo in sitografia “Come conoscere
ed utilizzare i caratteri
tipografici. Le classificazioni stilistiche”
030. Carattere Ornate
32
Egiziani
I caratteri egiziani nascono a seguito del ritrovamento della stele di Rosetta oggi esposta al
British Museum. Hanno molta forza espressiva.
Sono riconoscibili per le grazie ad angolo retto.
031
031. Carattere Clarendon
032. Dettaglio geroglifico della stele di Rosetta
032
33
Lineari
I caratteri lineari sono detti anche più comunemente bastoni o sans serif. Sono caratteri più moderni,
privi di grazie e spessori delle aste uniformi.
Tra i più famosi troviamo: Arial, Helvetica, Futura,
Tahoma, Trebuchet MS e Verdana.
033
033. Carattere Futura
34
Fantasie
I caratteri fantasie comprendono tutti quei caratteri che presentano degli effetti particolari o
dei fregi e non rientrano nelle precedenti categorie. Sono caratteri inventati senza nessuna regola
costruttiva10. Molto spesso presentano una ricca
quantità di dettagli che per essere comprensibili
devono essere riprodotti in grandi dimensioni11.
Un esempio dei caratteri fantasia è il Critter, creato da Craig Fraiser, nel quale ogni lettera è rap-
10. Per approfondimenti
consultare l’articolo in sitografia “Come conoscere
ed utilizzare i caratteri
tipografici. Le classificazioni stilistiche”
11. Per approfondimenti
sui caratteri fantasie, si
suggerisce di consultare il testo in bibliografia
“Tipografia digitale. Evoluzione tecnica dei caratteri” (Marvin, 1998)
presentata dal mondo animale,
in particolare il nome di ogni
animale inizia con la lettera
rappresentata: per esempio la
lettera Z è rappresentata da
una zebra. Questo tipo di carattere è composto da sole lettere maiuscole.
35
034
Sistema Lawson
034. Carattere Critter
Il sistema AtypI (Association
Typographique
Internationale)
venne adottato dall’associazione tipografica internazionale
e indica dieci categorie: Humane (Tondi del XV sec), Garalde (Francesi del XVI sec),
Réale (Transizionali), Didone
(Bodoni), Mécane (con grazie
squadrate), Linéale (sans serif), Incise (caratteri con grazie
36
triangolari), Script, Manuaire e Fractura.
Il sistema DIN Schriften, fu proposto da Hermann
Zapf nel 1967 e si fonda sulla classificazione in tre
categorie di caratteri e relative sottocategorie: Roman (che comprende Renaissance, Baroque, Neoclassic, Free Roman, Linear, Block, Roman, Script),
Blackletter e Non-roman.
Il sistema Typerfinder fu proposto da Christopher
Perfect e Gordon Rookledge nel 1983 e usa due categorie primarie e sedici sottocategorie. Il sistema
è stato concepito per offrire una
facile identificazione dei diversi
stili di carattere. Le due categorie principali comprendono: stili
di carattere per il corpo del testo
e stili di carattere decorative.
La classificazione che verrà
presa in esame in questa sede è
quella attuata da Lawson, integrata da alcune nuove categorie
alla luce della particolare evoluzione che la scrittura ha subito
nell’evoluzione contemporanea
37
del desktop publishing e dei media digitali. Le ultime due categorie in realtà non rientrano nel sistema
di classificazione Lawson, ma importanti per lo sviluppo che hanno avuto negli ultimi anni.
La classificazione comprende le seguenti categorie:
Blackletter, Serif (che comprende Oldstyle, Transitional e Modern), Sans Serif (che comprende Grotteschi, Geometrici e Umanistici), Script, Brush, Decorative, Pixel e Simboli (PI). Questa classificazione
mette chiaramente in evidenza le diverse famiglie
di caratteri, le differenze di stile e di uso proprie di
ogni singola categoria.
Blackletter
I primi stili di carattere imitavano i tratti dei pennini e dei pennelli, utilizzati dagli amanuensi.
Nei primi periodi della pubblicazione editoriale infatti, l’obbiettivo del grafico-compositore era
quello di creare dei documenti
che apparissero il più possibile
vicini ai costosi e preziosi lavori
38
trascritti manualmente.
Questi stili che includono marcati caratteri di aspetto gotico e medioevale, hanno quindi una forte connotazione storica e una forte personalità.
Poetica Chancery (disegnato da Robert Slimbach)
è rappresentativo dello stile cancelleresco usato dagli amanuensi prima di Gutenberg. La famiglia di
font presenta diversi svolazzi nelle lettere maiuscole e una gamma di caratteri alternati. Alcune lettere prese dal Book of Kells, rappresentano lettere di
manoscritti sapientemente dipinti a colori.
Esempi di lettere con forme
grafiche medioevali utilizzate
nei Paesi germanici fino alla Seconda Guerra Mondiale sono:
il Wittenberger Fraktur (disegnato da Monotype Design
Staff nel 1903), il Wilhelm
Klingspor Gotish (disegnato
da Rudolph Koch nel 1925) e il
Fette Fraktur (disegnato da C.
E. Weber nel 1875).
39
Il Clairvaux (disegnato da Herbert Maring nel
1981), il Duc De Berry (disegnato da Gottfried Pott
nel 1990) e il San Marco (disegnato da Karlgeorge Hoefer nel 1990) invece hanno un sapore prettamente rinascimentale.
035. Caratteri Blackletter
035
40
Serif
La parola grazia è la traduzione della parola serif,
ed è un segno più o meno accentuato, disegnato per
raccordare un’asta o un tratto, con funzione di ornamento. Traggono la loro origine dal segno calligrafico della scrittura (pennello, penna d’oca, etc).
Sono i caratteri i cui estremi terminano con degli
allungamenti ortogonali detti grazie che possono
essere più o meno elaborate. Le grazie hanno una
12. Per approfondimenti sugli studi riguardati
la leggibilità consultare l’articolo in sitografia
“Which Are More Legible: Serif or Sans Serif
Typefaces?”
valenza ornamentale ed estetica
nel disegno del font stesso ma
anche la funzione percettiva di
legare visivamente tra loro le
lettere. Prima si pensava che
le grazie migliorassero la leggibilità perché forniscono più
elementi indicativi per l’occhio,
ma studi più recenti12 hanno dimostrato che le grazie sono più
leggibili per coloro che sono
cresciuti leggendo caratteri con
esse, mentre i caratteri senza
41
grazie sono più leggibili per quelli che sono stati
abituati in questo modo13.
I caratteri graziati vengono suddivisi in tre sottocategorie: Old Style, Transitional e Modern.
13. Per approfondimenti
sulla distinzione tra caratteri bastoni e graziati
visionare il video “Leggibilità Trebuchet” http://
www.youtube.com/watch
?v=mhAPTgrCr6Q&feat
ure=player_embedded
036. Caratteri Serif
036
42
La categoria Old Style ebbe inizio con il primo
carattere tondo disegnato da Nicholas Jensen nel
1470 e con il primo corsivo disegnato da Aldo Manunzio14. Gli stili di carattere Oldstyle hanno l’asse
leggermente inclinato verso sinistra e presentano
uno spessore di tratto uniforme.
Fanno parte di questa categoria: Aldus, Garamound,
Granjon, Caslon, Minion, Palatino e altri ancora.
14. Aldo Manunzio è il
più importante editore e
stampatore del Rinascimento, a lui si deve l’affermazione definitiva del
carattere romano sul gotico e alla diffusione dei
primi testi classici. Per ulteriori approfondimenti si
suggerisce di consultare i
testi in bibliografia Grafica & Stampa (Fioravanti,
1984) e Cinque secoli di
stampa (Steinberg, 1982)
I Transitional presentano un
forte contrasto tra gli spessori del tratto e le grazie, che si
presentano molto sottili e diritte. L’asse del carattere è quasi
verticale. Fanno parte di questa
categoria: New Caledonia, Fairfield, Bulmer, Times New Roman, Stone serif, New Barskeville e altri ancora.
I Modern per l’aspetto contrastante tra tratti spessi e
sottili, viene considerata una
43
categoria elegante, e con molta personalità.
Fanno parte di questa categoria: (Bauer) Bodoni,
Linotype Didot, Didot, Walbaum, Melior, Fenice, New Century School Book e altri ancora.
037
037. Caratteri Old Style,
Transitional e Modern
44
Sans Serif
Gli stili di carattere Sans Serif sono senza grazie,
comunemente definiti con il termine di bastoni, apparsi per la prima volta in un campionario di caratteri pubblicato da William Caslon IV nel 181615. Il
design del carattere Sans Serif fu notevolmente influenzato dagli studi del designer inglese Eric Gill16
(n. 1882 – m.1940), ideatore del carattere Gill Sans,
i caratteri bastoni furono inoltre il campo di ricerca
15. Per approfondimenti
si suggerisce di consultare il testo in bibliografia
“Tipografia digitale. Evoluzione tecnica dei caratteri” (Marvin, 1998)
16. Per approfondimenti
su Eric Gill consultare il
suo sito personale www.
ericgill.com
17. Per approfondimenti
sulla scuola di di architettura, arte e design tedesca
consultare il sito http://
www.sapere.it/enciclopedia/Bauhaus.html
e sviluppo del linguaggio moderno e razionalista del Staatliches Bauhaus17 (1919 - 1933),
la scuola architettura, arte e design diretta da Walter Gropius
a Weimer Kandinskij, in Germania. La caratteristica più importante ed evidente di questa
categoria è l’assenza delle grazie, i caratteri Sans Serif si presentano con un tratto uniforme
e sono particolarmente indicati
per titoli, titoletti o intestazioni,
45
ma non per passaggi di testo medio-lunghi.
Fanno parte di questa categoria: Avant Garde, Trebuchet, Helvetica, Gill Sans e altri ancora.
I caratteri San Serif comprendono tre categorie: i
Grotteschi, i Geometrici e gli Umanistici.
038. Caratteri Sans Serif
038
46
I caratteri Grotteschi nascono verso l’inizio
dell’80018 e prendono il nome dalle loro caratteristiche piuttosto “grezze” che successivamente vennero definite “grottesche”. Questi caratteri infatti sono caratterizzati da linee massicce e piuttosto
marcate, senza la presenza di contrasto tra le linee19.
Un esempio di questa categoria di caratteri è il Monotype Grotesque realizzato nel 1926 da Monotype
con il supervisione di Frank Hinman Pierpont (n.
1860 - m. 1937).
18. Per approfondimenti
si suggerisce di consultare l’articolo in sitografia
“Classificazionedeicaratteri–Lineare–Museo virtuale della Stampa”
19. Per approfondimenti
si suggerisce di consultare il testo in bibliografia
“Tipografia digitale. Evoluzione tecnica dei caratteri” (Marvin, 1998)
I caratteri Geometrici si basano, come suggerisce il nome
stesso, sulle forme geometriche
elementari. Il più noto e rappresentativo è il carattere Futura
progettato nel 1928 dal tipografo e grafico tedesco Paul Renner
(n. 1878 - m.1956).
I caratteri Umanistici si basano
sui manoscritti del ‘400 e richiamano molto le lettere romane. I
caratteri distintivi riguardano i
47
contrasti delle linee che risultano affusolate. Il più
famoso esempio di carattere umanistico è l’Optima
creato nel 1958 da Hermann Zapf (n. 1918)20.
039
20. Per approfondimenti
si suggerisce di consultare il testo in bibliografia
“Tipografia digitale. Evoluzione tecnica dei caratteri” (Marvin, 1998)
039. Caratteri Grotteschi, Geometrici e Umanistici
48
Script, Brush
Questa categoria include qualsiasi stile che sembri creato con un pennino, simulando una calligrafia o scrittura a mano libera. Le lettere presenti in questa categoria possono presentarsi come
formali ed eleganti, leggere, scritte a mano. Sono
spesso inclinate e tendono per questo a unirsi tra
loro, il che le rende di non facile leggibilità.
Fanno parte di questa categoria: Bertold script,
Vivaldi, Lucida Calligraphy,
English, e altri ancora per lo
stile formale ed elegante. Comic sans, Mistral, Manoline
script, Caflish script e altri ancora per lo stile a mano libera.
49
040
Decorative
040. Caratteri
Brush
Script,
Gli stili di carattere decorative
possono essere estremamente
elaborati e particolareggiati e
sono prevalentemente indicati
per titoli di grandi dimensioni o
per specifiche esigenze, non devono assolutamente essere utilizzati nel corpo dei testi. Questi stili furono resi disponibili in
Inghilterra e in Francia a partire dal XVIII secolo e il loro nu-
50
mero aumentò notevolmente in particolar modo in
risposta alla domanda degli inserzionisti.
Fanno parte di questa categoria: Bremen, Broadway,
Stencil, Mesquite, PepperWood, Bernard Fashion,
Visigoth, Stop, Umbra, Futura Black, Christmas e
altri ancora.
041
041. Carattere Christmas
51
Pixel
Appartengono a questa categoria i font nati per la
visualizzazione a monitor. I caratteri di questa categoria sono costituiti da veri e propri punti (pixel),
il loro disegno è geometrico e squadrato, disegnato
come un’immagine bitmap, punto per punto e dunque non presentano alcuna curva. Grazie alla loro
caratteristica di essere costituiti da singoli pixel,
sono leggibili anche a dimensioni molto ridotte21.
Un esempio di questi caratteri è il Paskowy che ricorda quello utilizzato nei codici a barre.
21. Per approfondimenti
si consiglia di consultare l’articolo in sitografia
“Pixel Font cosa sono e
dove trovarle?”
042. Carattere Paskowy
042
52
Simboli (PI)
I caratteri PI, spesso chiamati anche Simboli, non
contengono lettere e numeri, ma solo elementi
grafici, pittogrammi o icone di diverso genere, a
seconda della tipologia di font selezionato. Questa famiglia di caratteri viene utilizzata quindi
per inserire simboli, disegni o elementi grafici,
non testuali, tipici dello stile selezionato.
I tipi di carattere PI sono principalmente segni
decorativi, orologi, simboli ferroviari, numeri
racchiusi in cerchi ed altro. Alcuni esempi sono:
Zapf Dingbats, Webdings e Wingdings.
043
043. Caratteri Simboli
53
La composizione
TURE
FEA
S
copo di questo paragrafo è analizzare gli attributi del testo che ne delineano l’aspetto tipografico:
stile, dimensione, giustezza di riga, spaziatura e interlinea, colore, giustificazione, griglia, margini, colonne e altro ancora. Questi concetti vengono spesso
erroneamente trascurati, ma rivestono un’importanza fondamentale nella gestione dell’intero testo
e dell’intero layout di pagina. Prestando attenzione
ad attributi come allineamenti e interlinea, il testo
risulterà maggiormente leggibile e il design generale della
pagina migliorerà, acquistando
armonia e qualità estetica.
Quando si lavora con il testo
è utile conoscerne gli elementi che vanno dalla selezione di
uno stile alle scelte dei relativi
attributi, fino ad arrivare al suo
posizionamento all’interno della pagina, nella griglia di impaginazione. Quando un individuo
legge un brano, compie delle
56
azioni percettive piuttosto articolate e complesse: il
suo occhio segue la riga di testo con discontinuità,
a sbalzi (scatti), questi salti si alternano a momenti di fissazione, in cui l’occhio si ferma per qualche
frazione di secondo. È soltanto in questo periodo di
fissazione che viene percepita l’informazione visiva.
Nel periodo di fissazione, l’occhio del lettore non
registra i singoli caratteri, ma intere parole o parti
di esse. Conoscere questo processo, può servire per
scegliere i giusti criteri di composizione del testo22.
Interlinea
22. Per ulteriori informazioni sui sistemi di percezione visiva legati alla
lettura di un testo scritto e in generale per analizzare le principali linee
guida della progettazione grafica, si suggerisce
di consultare il testo in
bibliografia “Il particolare nella progettazione
grafica” (Heller, Ghwast,
1988), (traduzione a cura
di Girardello, 1997)
Per interlinea si intende lo spazio tra le linee di testo, a partire dalla linea di base di una riga
di testo superiore, a quella della
riga inferiore. L’interlinea viene misurata dalla linea di base
di una riga, alla linea di base
di un’altra riga. Nella scelta
dell’impostazione dell’interlinea
è necessario tenere conto dei
57
criteri di leggibilità del testo e si consiglia sempre
di effettuare diverse prove di stampa, per stabilire
il valore più indicato, per poi passare alla composizione definitiva. Si può notare infatti come variando
l’interlinea, cambi l’aspetto generale dello stile di
carattere e di conseguenza anche della leggibilità.
Molti programmi di editing di testo e di impaginazione grafica, assegnano in modo predefinito un’interlinea, pari a circa il 120% della dimensione del
corpo del carattere. Per cui un corpo pari a 12 pt
avrà un’interlinea pari a 14 pt e verrà indicata con la
seguente dicitura 12/14.
Ricordiamo tuttavia che ogni
famiglia di carattere ha proprie
caratteristiche specifiche (disegno delle lettere, dimensioni e
proporzioni), si consiglia quindi
di calcolare e specificare il reale
valore dell’interlinea che meglio
si adatta alla tipologia di carattere e all’uso che se ne deve fare
(testo da leggere, titolazione,
testo decorativo).
58
045
044
046
044. Spaziatura alto valore
045. Spaziatura valore
standard
046. Spaziatura valore ridotto
59
Spaziatura
La spaziatura è lo spazio tra le lettere. Quasi tutti i
sistemi di impaginazione elettronica permettono di
variare il valore predefinito di spaziatura.
Il controllo della spaziatura è un modo eccellente
per gestire ed eliminare vedove e orfane (singole parole o sillabe che ricadono nell’ultima riga di testo o
all’inizio di una pagina o di una colonna successiva),
e per ottenere effetti particolari sul testo.
È necessario usarla con cautela, nei casi di testo da leggere,
le lettere devono infatti essere
adeguatamente distanziate, perché la loro forma possa interagire correttamente con le lettere
circostanti, secondo le proporzioni ottimali e armoniche definite dal font designer. Un eccessivo avvicinamento può rendere
complicata la lettura del testo,
un eccessivo allontanamento
rende altresì difficoltoso il pro-
60
cesso di lettura, nel combinare le lettere, troppo distanziate, per formare le parole.
Giustezza
La giustezza di una colonna di testo, indica quanto
è lunga la riga di testo. La giustezza di un testo è
molto importante ai fini della sua leggibilità e del
suo inserimento all’interno della griglia di impaginazione. Ma quanto deve essere
lunga una riga di testo? Dipende dal tipo di carattere utilizzato, dal relativo corpo, dal layout
complessivo della pagina e da
tutti gli attributi impostati.
Un testo troppo lungo (larghezza di riga eccessiva), rende difficoltoso il processo di lettura,
una volta arrivati alla fine della riga, si trova difficoltà nel ritrovare quella successiva. Per
contro, un testo troppo corto
61
(larghezza di riga minima), costringe l’occhio ad
effettuare troppi salti e troppe interruzioni di riga,
rendendo anche in questo caso il processo di lettura
difficoltoso e stancante.
Paragrafi
La giustificazione è il modo in cui viene allineato
o giustificato un testo. Ci sono diversi modi per allineare un testo, i più utilizzati
sono: composizione giustificata,
composizione centrata e composizione a bandiera.
Altri modi più personalizzati e usati in contesti particolari
sono: la composizione a sagoma
(quando tutte le righe del blocco di testo seguono la sagoma
di un disegno o tracciato), e la
composizione a giustezza crescente o decrescente (quando le
righe variano in modo costante,
62
aumentando o diminuendo).
Si consiglia di impostare il tipo di giustificazione in
base al tipo di progetto e in base al layout grafico
della pagina (elementi, oggetti grafici, illustrazioni
e struttura dell’impaginato).
Composizione giustificata (a blocchetto)
Nella composizione a blocchetto, le righe hanno
uguale lunghezza e il testo è allineato in modo da
avere entrambe i margini uguali
e perfettamente regolari. In alcune applicazioni vi è la possibilità di selezionare una giustificazione centrata (l’ultima riga
di testo viene centrata rispetto
alla larghezza del blocco di testo), oppure una giustificazione
a destra (l’ultima riga di testo
viene allineata al margine destro del blocco). Questo tipo di
composizione è la più utilizzata,
per i libri e in generale per tut-
63
ti i documenti con lunghi passaggi di testo, perché
facilita il processo di lettura. Una buona composizione di questo tipo non è facile da realizzare e va
gestita con la giusta calibrazione della spaziatura
fra le parole. La lettura diventa infatti sgradevole
quando si vengono a creare buchi bianchi, dati da
una giustificazione di tipo forzato.
Composizione centrata (a
epigrafe)
Nella composizione a epigrafe,
le righe, di diversa lunghezza,
vengono centrate rispetto alla
larghezza del blocco di testo, secondo un asse centrale. È preferibile usarla per brevi passaggi
di testo, perché produce un affaticamento della vista nell’andare sempre a cercare l’inizio di
ogni nuova riga.
64
Composizione a bandiera
Nella composizione a bandiera, le righe, di diversa
lunghezza, sono allineate al margine destro (bandiera spalla destra) o sinistro (bandiera spalla sinistra) del blocco di testo.
In questo tipo di composizione c’è il vantaggio di
avere spaziature uniformi, non condizionate dall’esigenza di arrivare a giustezza e di avere un allineamento stabile a sinistra o a destra, soprattutto in
assenza di sillabazione delle parole (si ricorda che l’allineamento a destra è più difficoltoso per
la lettura, almeno nella nostra
cultura occidentale, in cui l’ordine di lettura è da sinistra a destra. Viene utilizzato solo in casi
specifici e per brevi passaggi di
testo). Lo svantaggio della composizione a bandiera è quello di
non avere un punto determinato
per la fine di ogni riga.
65
048
047
047. Composizione giustificata (a blocchetto)
048. Composizione centrata (a epigrafe)
049. Composizione a bandiera (sinistra e destra)
049
66
Margini e colonne
Quando si progetta un qualsiasi prodotto editoriale (libro, catalogo, brochure, rivista, etc) è necessario prestare attenzione allo spazio occupato
da testo e immagini, ma anche allo spazio vuoto
circostante. Per molto tempo, nell’impaginazione di libri e riviste, i margini utilizzati sono stati quelli di concezione tipicamente classica, con
forti simmetrie e con un andamento decisamente regolare, ancora applicabili
per una produzione sobria e
raffinata. Si sono tuttavia sviluppati altri modi di composizione più moderni e a volte
anche più esasperati, particolarmente adatti per l’impaginazione di progetti editoriali
pubblicitari, cataloghi e impaginati ricchi di illustrazioni,
in cui la segmentazione della
superficie non risulta più sim-
67
metrica e regolare, ma fluida e dinamica.
Una buona regola è quella di controllare la giustezza delle colonne, in relazione all’interlinea
e al tipo di carattere utilizzato e lasciare spazio
sufficiente affinché i caratteri non siano troppo
ravvicinati al margine esterno della pagina e le
colonne di testo non siano troppo attaccate tra
loro (a meno di effetti esasperati, ma voluti).
Tono e colore
In una pagina stampata, la
densità delle lettere viene
chiamata colore, e indica il
tono chiaroscurale della massa tipografica, che determina
l’impressione di nero (impressione di colore). Questa sensazione di colore può essere provocata da un paragrafo, da una
colonna o da un gruppo di colonne all’interno della pagina,
dal tipo di font utilizzato, dal
68
relativo corpo, dall’impostazione dei valori interlineari e di spaziatura, dal tipo di giustificazione
e dall’irregolarità stessa delle righe.
Se si socchiudono leggermente gli occhi e si osservano i tre blocchi di testo proposti, si può notare con chiarezza il diverso impatto chiaroscurale di questi, in relazione all’impostazione dei
diversi attributi. Questo esercizio è utile anche
per valutare il layout complessivo di una pagina:
rapporti fra testo, immagini e spazi bianchi.
69
La forma del testo
BILITY
LEGI
F
ino ad ora si è parlato del testo in modo puramente tecnico, definendo l’anatomia dei caratteri e
l’aspetto tipografico, ma lettere e parole hanno un
proprio stile e una propria personalità e andando
ad inserirsi all’interno di uno spazio, si caricano di
valenze emotive molto forti. Esiste una stretta relazione tra parole e immagini e tra parole e spazio
compositivo e senso.
Relazioni
sionali
dimen-
In questo paragrafo vengono
analizzate le relazioni dimensionali e di senso che si vengono a
creare tra testo e spazio compositivo. Ipotizziamo di scegliere
un formato di pagina e di inserire al suo interno la parola eGutenberg. Se si effettuano diverse
prove, se si inserisce ad esempio
la parola nel punto centrale della pagina con un corpo molto
72
piccolo (8 pt) e se si inserisce la stessa parola nello
stesso punto, con lo stesso font ma di dimensioni
considerevolmente superiori si potrà notare come
cambiando semplicemente il corpo del carattere, si
conferisce un impatto completamente diverso al layout, sia da un punto di vista visivo, che da un punto
di vista puramente emotivo e di significato.
Tra testo e spazio infatti, vi è una forte relazione,
che assume differenti valenze espressive, indipendentemente dal significato delle
parole inserite. Aumentando o
diminuendo il corpo del testo in
relazione al suo spazio, si possono ottenere effetti emotivamente e visivamente diversi.
73
050
050. Relazioni dimensionali tra testo e spazio
051. Relazioni dimensionali tra testo e spazio
051
74
Se il testo si espande su tutta la pagina, come un
grosso titolo, dà un’impressione di prepotenza,
risalto e forza, viceversa se si presenta piccolo, a
tal punto che lo spazio vuoto della pagina acquista rilievo, l’impressione che si avrà sarà quella
di un testo più elegante e raffinato, sottovoce, intrigante e discreto. Se il testo si muove seguendo
un tracciato immaginario, il risultato sarà frivolo
o personalizzato.
Dall’invenzione della stampa ad oggi, sono stati
disegnati e prodotti migliaia
di caratteri e nonostante questo ne vengono continuamente
disegnati di nuovi. Gli esempi
riportati, fanno capire chiaramente come la stessa scritta,
possa caricarsi di significato,
valenza emotiva e estetica, a
seconda del tipo di carattere
con la quale la si interpreta.
A seconda del tipo di font utilizzato, della dimensione/corpo che gli viene attribuita in
75
relazione al format del documento e in base al
posizionamento nel layout grafico, si ottengono
diversi tipi di composizioni con un diverso impatto visivo ed emotivo.
Il risultato è ovviamente sempre soggettivo e interpretabile secondo la propria esperienza e la
propria sensibilità percettiva23.
23. Per ulteriori informazioni sulla relazione
dimensionale tra il testo
scritto e lo spazio compositivo si suggerisce di
consultare il testo in bibliografia “Le vie del senso” (Testa, 2004)
052. Valenza emotiva di
scritta Bastoni
052
76
053
053. Valenza emotiva di
scritta Decorative
054. Valenza emotiva di
scritta Script
054
77
Linee guida per la composizione tipografica
Poiché il carattere deve soddisfare esigenze diverse,
a seconda del tipo di progetto cui andrà ad inserirsi,
non è possibile definire in modo assoluto quale tipo
di carattere e che tipo di impostazioni risultano essere più adatte. È ovvio che i caratteri e le relative
impostazioni, destinati ad un uso prettamente tipografico, debbano rispettare criteri diversi da quelli
destinati ad usi più grafici e personalizzati. Il divario tra questi
due orientamenti è piuttosto
grande: l’impaginazione del testo a scopo grafico è assai lontana dalla gestione di un testo
ad uso lettura. Un testo scritto
deve possedere un aspetto corretto, deve cioè essere costruito seguendo quelle che sono le
principali linee guida, che favoriscano il processo di lettura,
78
memorizzazione e apprendimento.
Di seguito vengono proposte alcune importanti linee guida che si rivelano utili per una corretta gestione tipografica del testo:
• La leggibilità di un testo diminuisce quando viene
a mancare il contrasto tra testo e sfondo.
• Per passaggi di testo medio/lunghi è consigliabile
inserire testo nero su fondo bianco, rispetta le regole classiche del processo di lettura, aiuta la leggibilità e non affatica la vista.
• Il contrasto testo bianco su
fondo nero conferisce un aspetto elegante e raffinato, ma va
usato con molta cautela perché
affatica notevolmente la vista.
• Evitare di usare troppi caratteri diversi all’interno dello
stesso documento, per evitare
un effetto di disordine e ambiguità, in cui nulla è realmente
evidenziato e in cui non si riesce ad identificare la gerarchia
79
di lettura. L’ideale sarebbe usare uno o al massimo
due tipi di carattere, opportunamente selezionati:
un graziato per i blocchi di testo e un bastoni per
titoli e titoletti (vi sono dei set di caratteri bastoni
molto leggeri e sottili che possono prestarsi senza
particolari problemi ad essere inseriti nel corpo di
testi anche medio/lunghi).
• Si consiglia, per creare la giusta gerarchia all’interno del progetto, di giocare con diverse dimensioni e varianti di peso dello stesso carattere. Si otterrà
un effetto più ordinato, gradevole e percettivamente
ben organizzato.
• Evitare di scegliere tipi di carattere troppo spessi/scuri o
troppo sottili/chiari. I caratteri troppo spessi e neri sono di
difficile leggibilità e stancano
l’occhio, perché troppo marcati, così pure quelli troppo sottili e chiari, che si distinguono
appena dallo sfondo, producono
anch’essi sforzo visivo.
• Assegnare un corpo di dimen-
80
sioni leggibili: il corpo di un testo leggibile varia tra
8 e 12 punti. Si tenga presente che un corpo 8 è consigliato per piccoli riferimenti e note e un corpo 12
è decisamente grande. Per passaggi di testo medio/
lunghi è consigliabile un corpo tra i 9 e gli 11 punti. Ricordiamo che ogni stile di carattere ha proprie
dimensioni, in funzione dell’apertura dell’occhiello delle lettere: gli 8 punti di uno stile di carattere
non coincidono sempre agli 8 punti di un altro carattere. A parità di corpo, un carattere con un occhiello grande è più leggibile di
uno con un occhiello piccolo o
stretto. Ricordiamo inoltre che
è sempre utile fare delle prove
di stampa.
• L’alfabeto è provvisto di lettere maiuscole e minuscole, che
devono essere combinate per
formare un insieme armonico e
leggibile del testo. L’alternanza
di maiuscole e minuscole è facilmente leggibile perché alterna
lettere ascendenti e discendenti,
81
è quindi il modo più comune per comporre un testo
ed è quello cui il lettore è maggiormente abituato.
La presenza delle maiuscole, fornisce punti di riferimento (le maiuscole ad esempio, evidenziano chiaramente l’inizio di una frase). L’impiego esclusivo
di lettere maiuscole o minuscole, produce un senso
di uniformità, perché ritmicamente indistinto. L’occhio non ha più punti di riferimento e il processo di
lettura risulta rallentato con notevole affaticamento dell’occhio. L’uso del tutto maiuscolo può essere
finalizzato all’evidenziazione di una parola singola
o di un gruppo di parole, per
esempio in titoli o in corpi molto grandi.
• Le parti di testo che si desiderano evidenziare, vanno messe in risalto in modo corretto,
senza interferire con il processo
di lettura. L’obbiettivo è infatti
quello di chiarire il contenuto
e distinguere le singole parti di
testo. Per evidenziare una parola o una parte di testo in modo
efficace è consigliabile usare il
82
corsivo, mentre per evidenziare in modo più marcato si consiglia di utilizzare il grassetto. Ci sono
altri sistemi di evidenziazione: la sottolineatura, il
colore, il maiuscolo e il maiuscoletto.
• È possibile assegnare colore al testo, purché sia
netto il contrasto testo/sfondo, assegnando il colore su passaggi di testo relativamente corti, per veicolare l’attenzione e per conferire senso specifico.
• La spaziatura fra le lettere deve essere impostata
in modo corretto: è bene scegliere tipi di caratteri
con una spaziatura media (impostando se necessario un grado
di spaziatura adatto, non troppo
espanso né troppo ristretto).
L’estrema espansione o condensazione può rendere difficoltoso
e illeggibile il testo.
• La leggibilità di un testo dipende in larga misura dall’impostazione dello spazio interlineare. L’interlinea deve essere
impostata in modo da facilitare
83
il movimento dell’occhio tra le righe. Un insufficiente spazio interlineare rallenta e disturba il processo
di lettura, perché l’occhio è portato a guardare più
righe contemporaneamente, per contro anche uno
spazio interlineare eccessivo, disturba in quanto le
righe si presentano troppo distaccate e l’occhio non
trova più punti di riferimento.
• Lo spazio interlineare serve per controllare vedove e orfane. Una vedova è una singola parola che
ricade alla fine di un paragrafo, sull’ultima riga.
Un’orfana è una singola sillaba che ricade alla fine
di un paragrafo, sull’ultima riga.
È sempre consigliabile evitarne
la presenza perché generano pagine irregolari e poco uniformi.
• La riga di testo è un altro
elemento da non sottovalutare: le righe devono infatti essere di lunghezza appropriata, né
troppo lunghe, né troppo corte.
Quando la lunghezza delle righe è eccessiva, l’occhio si stanca perché fatica a collegare le
84
righe successive, viceversa, se sono troppo corte, è
costretto a continui spostamenti e sbalzi. Bisogna
impostare colonne di testo di dimensioni adeguate!
• Scegliere il tipo di giustificazione adatto al tipo di
testo che si sta manipolando e al layout grafico.
Il design editoriale
Abbiamo parlato di tipografia,
trattando la grammatica del
suo utilizzo e le principali linee guida, necessarie e utili per
una corretta gestione del testo
all’interno del progetto grafico.
Si è dato particolare risalto alle
varie scelte tipografiche, che includono la scelta dei caratteri, le
relative dimensioni, il colore di
riempimento delle singole lettere e il colore di sfondo, in relazione al format di pagina, dando
risalto al fatto che una buona gestione del testo, contribuisce ad
85
evidenziare il significato di ciò che è scritto e di tutto
il layout di pagina. Abbiamo visto come uno stesso
testo inserito in uno stesso format di pagina, possa
conferire impressioni diverse a seconda delle modifiche apportate. Lo spazio in cui si sviluppa il testo
può essere organizzato secondo un preciso schema,
così da veicolare un preciso significato grazie alla
gestione del testo stesso e delle singole lettere, nonché degli aspetti grafici complessivi. Abbiamo visto
come uno dei problemi principali legati alla progettazione sia quello di inserire nel
punto giusto i diversi elementi
del testo, abbinandoli ad immagini, elementi grafici e colore.
L’obbiettivo finale è quello di
mettere in ordine e creare precise gerarchie di lettura, conferendo al tutto leggibilità, estetica e valore espressivo dando il
giusto valore ad ogni elemento.
86
056
055
055. Contrasto tra testo e
sfondo
056. Testo nero su fondo
bianco: standard di lettura
057. Testo bianco su fondo nero: forte contrasto
057
87
Tipografia web
STYLE
NEW
C
on l’introduzione dei CSS e l’abolizione definitiva del tag <FONT> considerato deprecated dal
W3C a partire dall’HTML 4.0, per la tipografia web
si sono aperti nuovi scenari.
Pur nella limitatezza delle risorse progettuali e delle scelte tipografiche i CSS hanno introdotto una
serie di controlli sulla progettazione tipica e specifica della formattazione del testo che permettono una
gamma di scelte orientata verso la ricchezza della
24. www.alistapart.com
dal 2011 anche nella versione italiana
cultura tradizionale della grafica in questo settore. Sintomo di
queste nuove opportunità sono
per esempio l’interfaccia stessa
del blog di Zeldmann – A list
apart24 – che oltre a discutere
a livello teorico delle potenzialità del web implementa e sperimenta quanto di nuovo sta
succedendo. O la versione per il
mondo del digitale di un classico della tipografia come The elements of Typographical Style del
90
Bringhurst25 che ne estende le riflessioni teoriche al
mondo del web.
Il primo problema da affrontare nella scelta dei font,
almeno per la parte testuale realizzata in codice di
una pagina web, è quella della compatibilità tra una
piattaforma e l’altra, e/o le diverse versioni dei sistemi operativi che installano di default alcune famiglie di font prestabilite.
Al cambiare dei sistemi operativi cambiano infatti
i font installati e questo fa si che il lettering debba
essere scelto sia per il giusto valore espressivo, di
25. Si veda il progetto web: www.webtypography.net
leggibilità, di gradevolezza e di
identità rispetto alla comunicazione ma anche e soprattutto rispetto alla compatibilità tecnologia/software scelta. Possiamo
scegliere di implementare delle pagine con font non browser
safe, ma in assenza del font sulla
macchina dell’utente, quest’ultima andrà a selezionare, se non
diversamente da specificato nel
codice, il primo font di default
91
disponibile sul browser o quello impostato dall’utente stesso con effetti imprevedibili.
In questo senso i font dovrebbero essere scelti
all’interno di una rosa purtroppo molto ristretta
di caratteri che risultano essere presenti in pratica su ogni piattaforma/computer:
•bastoni: Arial e Verdana
•graziati: Times (Times New Roman) e Georgia
•monospaziati: (New) Courier
058
058. Web font
92
In particolare Verdana e Georgia 26 sono stati disegnati da Mattew Carter – autore tra l’altro del
MS Trebuchet e dei nuovi font introdotti nel nuovo
sistema operativo di Microsoft Vista, anche se al
momento non disponibili su MacOSX – a partire dal 1994 espressamente per la massima leggi-
26. Per approfondimenti
consultare il sito www.
will-harris.com
27. Per ulteriori informazioni si suggerisce di
consultare il testo in bibliografia “Organizzare
presentazioni
efficaci”
(Bollini, Greco, 2008)
28. Effetto di sfumatura
che permette la simulazione dell’arrotondamento delle lettere e cerca
di simulare rotondità o
variazione dello spessore dei tratti per esempio
delle grazie. In genere, la
renderizzazione a monitor di un font, in assenza
di questa correzione visiva risulta un disegno geometrico scalettato
bilità a monitor27. Prendendo
le mosse dalla tipografia tradizionale e dalla sua cultura
espressiva Carter ha lavorato
con estrema accuratezza sulla forma, la dimensione degli
occhielli, la proporzione delle
singole lettere ed il loro disegno in maniera tale che queste
due famiglie di font mantengono buona leggibilità anche
in condizioni estreme, come
la visualizzazione a monitor,
la mancanza di anti-aliasing 28,
corpi piccoli al limite della restituzione grafica di un media a bassa risoluzione come
93
il digitale. I modelli sono sicuramente i grandi
classici sia tra i bastoni, Helvetica tra tutti e i
graziati il Times, ma l’elaborazione originale coniuga le qualità storico espressive con le esigenze particolari di rendering su un medium in cui
l’inchiostro, il piombo e la carta sono scomparsi.
059
059. Arial - Verdana,
Times - Georgia
94
Ma la scelta del carattere implica non solo degli accorgimenti tecnici, ma anche precise scelte
espressive e di significato oltre che di caratterizzazione del messaggio. Pur nella limitatezza dei
supporti di una presentazione digitale esiste una
forte relazione tra la scelta del carattere spazio
compositivo e senso (Testa, 2004).
La scelta del carattere risponde cioè a due esigenze distinte e coesistenti:
•aspetto funzionale: a livello
strumentale come veicolo della parola e dell’informazione il
testo deve assolvere a regole
di leggibilità;
•aspetto espressivo: a livello
di percezione conferisce alla
composizione ritmo, gerarchia
e personalità.
95
Le dimensioni contano
L’implementazione dei CSS e dei nuovi browser
ha permesso un sempre maggio controllo da parte dell’utente finale anche sulla visualizzazione
del testo di un sito: è infatti possibile aumentare
o diminuire a piacimento la dimensione del corpo
del carattere a seconda del contesto di fruizione
in cui ci si trova e in base alle proprie esigenze.
Questo rende meno problematica da parte del designer la stima dell’ipotetica
dimensione settata di default
nelle preferenze del browser e
che diventa il parametro di riferimento per tutto il resto del
dimensionamento dei caratteri nella pagina. D’altro canto
perché ciò sia possibile si deve
rinunciare all’uso di unità di
misura fisse convenzionali
come i pixel e o punti tipografici in favore di un dimensionamento fluido e percentuale
96
o meglio ancora in .em del testo stesso.
Il concetto che sta alla base di una buona gerarchia tipografia è in questo senso quello di rapporto proporzionale e dimensionale piuttosto che di
dimensione fissa. Non bisogna dimenticare che la
percezione della grandezza del carattere dipende
anche dalla risoluzione dello schermo. Il concetto da tener presente è perciò quello relativo di
più piccolo o più grosso nella gerarchia complessiva della schermata.
Formattazione e
semantica
Oltre alla scelta del font abbiamo anche a disposizione,
per creare gerarchie di lettura
il trattamento stesso del testo.
Con la separazione del codice
strutturale e presentazionale questo può generare talora
confusione tra quanto indicato
a livello di semantica del codi-
97
ce con un tag specifico e le aspettative di visualizzazione, gestibili invece con i CSS. L’effetto di
grassetto o bold – <b> come <i> sono attualmente tra banditi dal W3C proprio per la componente visiva anziché semantica dell’indicazione di markup – è stato sostituito da <strong>:
un tag che pone accento dal punto di vista della
gerarchia e dell’importanza della stringa di testo
in esso racchiusa, di default, poi molti browser
lo interpretano visivamente come grassetto (tramite CSS potremmo gestire la
sua formattazione in maniera
totalmente difforme mantenendo tuttavia salvo il suo significato strutturale).
Analogamente il corsivo corrisponde a <em> cioè all’enfasi: meno leggibile a monitor,
viene utilizzato per isolare
singole parole dal contesto,
indicandone per esempio un
uso particolare, la necessità di
spiegarne il significato in quel
98
particolare contesto.
Il tutto maiuscolo – utilizzato soprattutto per titolazioni o parole da mettere in evidenza – rende
la lettura più difficoltosa: la mancanza di ascendenti e discendenti toglie infatti gli elementi di
ancoraggio ottico che il nostro occhio utilizza
per scandire la lettura, fondamentali nelle pagine
web fluide e variabili. Inoltre secondo la Netiquette equivale ad urlare!
Infine, pur esistendo il tag <u>, la sottolineatura
– ereditata dalla macchina da
scrivere, sinonimo in genere di
corsivo – va riservata tassativamente ai collegamento ipertestuale essendo l’elemento
grafico visivo che contraddistingue fin dalle origini i link
all’interno di un ipertesto.
99
Interlinea
Studi condotti sulla percezione e sulla lettura a monitor hanno dimostrato che un’interlinea superiore
rispetto a quella tipografica classica aiuta la lettura
sui supporti digitali29.
Normalmente l’interlinea è il 120% del corpo
(14/16,8 pt); a monitor l’interlinea ottimale è tra
il 130-150% del corpo in funzione della lunghezza
delle righe di testo (14/18,2 pt).
29. Si veda il lavoro in bibliografia “Grids for the
Internet and other digital
media” (Götz, 2002)
Inoltre un’interlinea troppo ridotta, utilizzata magari per risparmiare spazio di scrolling,
rende le righe troppo compatte,
magari con una sovrapposizione
tra le ascendenti e le discendenti tra righe successive, creando
confusione e difficoltà di lettura. Viceversa un’interlinea troppo grande, con cui si cerca di
sopperire al vuoto, produce un
effetto di dispersione che rende
difficile al nostro occhio scorre-
100
re la sequenza delle righe: in questo caso sarebbe
meglio piuttosto giocare sulla giustezza del testo
che non sull’interlineatura.
I paragrafi: giustezza del testo
Le righe di testo dovrebbero contenere indicativamente una cinquantina di caratteri per mantenere
un buon rapporto proporzionale con la dimensione
del carattere stesso. Al di sotto il rischio è che le
frasi risultino troppo frammentate con una difficoltà di cogliere intuitivamente il senso. Una
lunghezza eccessiva invece costringe a scomodi movimenti
del capo e rischi di far perdere il
filo della lettura nella sequenza
delle righe.
Per quello che riguarda gli allineamenti dei paragrafi stessi,
ferme restando le indicazioni
e le consuetudini adottate nel-
101
la tipografia tradizionale, su web andrebbe sempre
evitato il giustificato. L’allineamento regolare sul
bordo destro dei paragrafi, quello che il nostro occhio scorre prima di riprendere il filo sulla riga successiva, rende estremamente difficile mantenere il
segno soprattutto in caso di scroll.
La variabilità del margine allineato a bandiera, oltre
ad ovviare al problema della mancata sillabazione,
crea degli ancoraggi ottici che aiutano la fluidità di
lettura anche in condizioni dinamiche come nel caso
del web.
060
060. Ancoraggio visivo
102
I link
I link sono “testi” che svolgono la funzione di
action triggers cioè permettono di scatenare delle
azioni, come accedere ai collegamenti ipertestuali, avviare una procedura di registrazione, il recupero di una password, l’invio di una mail etc.
all’interno di una pagina web.
La loro visibilità deve perciò essere rafforzata
rispetto agli altri elementi testuali ed emergere
rispetto al contesto grafico e
cognitivo della pagina.
Diversi sono i modi convenzionali e/o progettabili di
volta in volta per rendere gerarchicamente evidenti ed apprezzabili i link:
Sottolineati:
“tradizionalmente” gli elementi linkati
e/o cliccabili nel web erano, in
assenza di altre possibilità di
formattazione grafica, sottoli-
103
neati. Questo segno visivo inequivocabile, visibile anche a basse risoluzioni, in piccole dimensioni
e su schermi monocromatici aiuta sicuramente a
reperire a colpo d’occhio gli elementi ipertestuali
della pagina, a patto che venga utilizzato in maniera univoca. Pur avendo a disposizione TAG e
elementi per la formattazione CSS in questo senso l’underline va tassativamente riservato ai link.
Come segno di enfasi editoriale (un tempo alternativo e sinonimo di corsivo, per esempio nei titoli dei libri e delle pubblicazioni) va preferito <em> per
non generare ambiguità di
comportamento e non tradire
le aspettative dell’utente.
Colorati: un altro elemento
di enfasi che permette di evidenziare e di far emergere dal
nero, ovvero dalla texture tipografica della pagina, gli elementi linkati è l’uso del colore.
Di default e tradizionalmente
104
i link testuali appaiono di colore bluette, viola
se sono già stati consultati (visited link) e rossi
nel momento in cui vengono cliccati (active link).
Sebbene questo schema cromatico non sia più
necessariamente l’unico riconosciuto dagli utenti
(come sosteneva relativamente di recente ancora
Nielsen30) è bene individuare un set riconoscibile all’interno di ciascun progetto, coerentemente con le scelte cromatiche di insieme, ma in cui
il significato connotativo del colore dei link sia
30. Per ulteriori informazioni si suggerisce di consultare il testo in bibliografia “Web Usability”
(Nielsen, 2000)
univoco e riconoscibile. Meglio ancora se per esempio il
colore usato per i link viene riservato solo a questa tipologia
di testo e conseguentemente a
veicolare questo tipo di informazione, anche se attualmente
con i CSS è possibile formattare diversamente ogni singola
tipologia di link.
105
Visivamente rafforzati: qualunque sia la strategia che si intende adottare per mettere in evidenza i link – sia la sottolineatura, magari alleggerita nella sua versione tratteggiata, il colore,
o il peso tipografico della scritta – l’importante è che l’elemento emerga chiaramente dal testo. Non basta che il cursore del mouse cambi
da freccia a manina quando casualmente l’utente
scorre la pagina perché in un sistema ancora profondamente basato sulla visione (Graphical User
Interfaces) sono gli elementi grafico-visibili a
fornire le informazioni operative.
Infine ricordiamo che è importante anche cosa si
linka al fine di rendere la pagina usabile:
•NON linkare un’intera frase
•NON linkare testo generico e uguale per più
link (clicca qui!)
•linkare una parola significativa per l’utente (es.:
scarica la brochure)
•dare indicazioni significative sul “cosa succede”
cliccando.
106
Titolo di capitolo
WORD
KEY
L’intervista
108
Andrea Braccaloni nasce a Bologna
nel 1973. È un visual designer, che vive e lavora
a Milano città in cui ha fondato, con tre soci nel
1995, lo studio di comunicazione visiva Leftloft.
In esso si occupa di consulenza e design della
comunicazione, design editoriale e di segnaletica, branding e disegno di caratteri tipografici. È
socio professionista AIAP e membro AtypI. Dal
2001 è titolare di un Laboratorio di Comunicazione Visiva al Politecnico di Milano presso la
Facoltà di Design.
061. Andrea Braccaloni,
visual designer
061
109
L’intervista al visual designer Andrea Braccaloni è stata realizzata il 24/02/2011 presso lo studio
Leftloft di Milano.
110
“Ci sarà sempre bisogno di nuove forme di carattere perchè è un modo per esprimere dei contenuti attraverso la forma delle lettere”
Andrea Braccaloni
111
Lorem ipsum
publishing packages and
web page editors now use Lorem Ipsum as their
default model text, and a search for ‘lorem ipsum’ will uncover many web sites still in their
infancy. Various versions have evolved over the
years, sometimes by accident, sometimes on purpose (injected humour and the like).Lorem ipsum
is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s
standard dummy text ever since the 1500s, when an unknown
printer took a galley of type
and scrambled it to make a type
specimen book. It has survived
not only five centy unchanged. It was popularised in the
1960s with the release of Letraset sheets containing Lorem
Ipsum passages, and more recently with desktop publishing
software like Aldus PageMaker
including versions.
112
Riferimenti
Bibliografia
1. Anon. (2005). Spazio ai caratteri. Il libro della scuola
del libro. Raccolto.
2. Bandinelli Angiolo, Giovanni Lussu, and Roberto
Iacobelli. (1990). Farsi un libro: propedeutica dell’auto produzione: orientamenti e spunti per un’impresa consapevole: o
per una serena rinuncia. Biblioteca del Vascello.
3. Bernstein Marta, Luciano Perondi, and Silvia Sfligiotti. (2008). Italic 2.0. Il disegno di caratteri contemporaneo in Italia-Contemporary type design in Italy. De Agostini.
4. Blackwell Lewis, and David Carson. (2000). The
end of print: the grafik design of David Carson. Laurence
King Publishing.
5. Bollini Letizia, and Riccardo Cova. (2009). Basic Web
Design 2: standard e strumenti per la progettazione web.
Milano.
6. Bollini Letizia, and Massimo Greco. (2008). Organizzare presentazioni efficaci. Progettare e realizzare diapositive per parlare in pubblico. Hoepli.
114
7. Bollini Letizia, and Federica Pomati. (2005). Cultura
e strumenti per il visual design. Laboratorio di grafica vettoriale. Maggioli.
8. Bringhurst Robert. (2001). Gli elementi dello stile tipografico. Sylvestre Bonnard.
9. Bryan Marvin. (1998). Tipografia digitale: evoluzione
tecnica dei caratteri. McGraw-Hill.
10.Clarke Andy. (2008). Oltre i CSS. La sottile arte del
web design. Pearson Italia S.p.a.
11.Fioravanti Giorgio. (1984). Grafica & stampa: notizie
storiche e informazioni tecniche per chi stampa e per chi fa
stampare. Zanichelli.
12.Gallavrini Alfredo. Tipocomposizione.
13.Gill Eric. (2005). Sulla tipografia. (cur. Passerini Lucio). Sylvestre Bonnard.
14.Götz Veruschka. (2002). Grids for the Internet and
other digital media. AVA.
15.Heller Steven, and Seymour Chwast. (1988). Il particolare nella progettazione grafica. (trad. Girardello 1997).
16.Knuth Donald Ervin. (1999). Digital typography.
CSLI Publications.
115
17.Di Leo Brigida. (2000). L’arte della tipografia. Lupetti.
18.Meynet Roland. (2004). Norme tipografiche per la
composizione dei testi con il computer. Pontificia Univ.
Gregoriana.
19.Morison Stanley. (2008). I principi fondamentali della
tipografia. (cur. Serra Fabrizio. trad. Cesana Roberta).
Fabrizio Serra.
20.Museo bodoniano di Parma. (2009). Il progetto tipografico del libro: Bodoni e i Tallone. (cur. De Pasquale Andrea, Tallone Enrico). Museo Bodoniano.
21.Müller-Brockmann Josef. (2007). Grid systems in
graphic design: a visual communication manual for graphic
designers. Ram Pubns U S A.
22.Nielsen Jakob. (2000). Web usability. (trad. Vanini
W.). Apogeo Editore.
23.Novarese Aldo. Il segno alfabetico: giuda allo studio ed
al disegno del carattere.
24.Postai Sofia. (2001). Siti che funzionano. Tecniche
Nuove.
116
25.Pring Roger. (2001). WWW.type. Tecniche tipografiche
efficaci per il World Wide Web. Apogeo Editore.
26.Rattin Manuela, and Matteo Ricci. (1997). Questioni
di carattere: la tipografia in Italia dall’Unità nazionale agli
anni Settanta. Stampa alternativa.
27.Samara Timothy. (2006). Guida agli stili tipografici.
Il Castello.
28.Spiekermann Erik, and E. M. Ginger. (2003). Stop
stealing sheep and find out how type works. Adobe Press.
29.Steinberg Siegfried H. (1968). Cinque secoli di stampa. Einaudi.
30.Testa Annamaria. (2004). Le vie del senso: come dire
cose opposte con le stesse parole. Carocci.
117
Sitografia
1. “Abc typography: a virtual type museum”
http://abc.planet-typography.com/
2. “Adobe fonts”
http://www.adobe.com/type/
3. “Alist apart”
http://italianalistapart.com/
4. “A Guide To Typography On the Web”
http://pelfusion.com/fonts/a-guide-to-typographyon-the-web/
5. “Archive for category: Typography”
http://blog.fawny.org/category/typography/
6. “Awesome Fontstacks Font: PT Serif Italic”
http://fontstacks.r10.railsrumble.com/
7. “Classificazione dei caratteri”
http://www.liceocaravaggio.com/e-lac/materiali/rete/
caratteri.pdf
8. “Classificazione dei caratteri – Lineare – Museo
virtuale della Stampa”
http://www.scuolaeditoria.it/pubblicazioni/museo_
virtuale/caratteri/classificazione/classi/07_lineare.
htm
118
9. “Come conoscere ed utilizzare i caratteri tipografici. Le classificazioni stilistiche”
http://digilander.libero.it/sitographics/st_file/clasificaz_silistiche.pdf
10.“Come nacquero i primi alfabeti. Tutte le scritture
del mondo”
http://www.parodos.it/scrittura/15.htm
11.“Curiosità sui caratteri”
http://www.scantype.it/storia_dei_caratteri_pag1.
html
12.“Dafont.com”
http://www.dafont.com/en/
13.“Elementi di tipografia digitale”
http://www.cs.unibo.it/~cianca/wwwpages/cdd/2.pdf
14.“Fonts”
http://developer.apple.com/fonts/
15.“Font design – Frank Hinman Pierpont”
http://www.linotype.com/434/frankhinmanpierpont.
html
16.“For a beautiful web”
http://forabeautifulweb.com/
119
17.“Free Fonts”
http://www.free-fonts.com/font/google.html
18.“Giambattista Bodoni, vita e opere in una trattazione sintetica”
http://www.webfandom.com/comunicazione-visiva/
giambattista-bodoni-vita-opere-una-trattazione-sintetica/
19.“I caratteri per i computer”
http://www.giofugatype.com/lettering/letterin.htm
20.“I love Typograph”
http://ilovetypography.com/
21.“Interview: Andy Clarke on the CSS Eleven”
http://www.css3.info/interview-andy-clarke-on-thecss-eleven/
22.“Lapidari – Romani Antichi (Classificazione
Novarese)”
http://blog.giofugatype.com/?p=317
23.“La tipografia web”
http://www.tiragraffi.it/design/2010/09/la-tipografia-web/
24.“Linotype.com”
http://www.linotype.com
120
25.“Perché pensare tipograficamente rovina il tuo
sito? (seconda parte)”
http://www.yourinspirationweb.com/tag/tipografia/
26.“Pixel Font cosa sono e dove trovarle?”
http://www.4mj.it/pixelfont/
27.“Recensione: Oltre i CSS di Andy Clarke”
http://www.lineheight.net/blog/recensione-oltre-icss-di-andy-clarke
28.“Storia dell’Arte Tipografica”
http://www.artigrafichefalcone.com/storia-della-tipografia.asp
29.“The Elements of Typographic Style Applied to
the Web”
http://www.webtypography.net/toc/
30.“The Ministry of Type”
http://www.ministryoftype.co.uk/
31.“Tipografia web: Regole per la scrittura testi di un
sito”
http://www.spailab.net/tipografia-web-regole-per-lascrittura-testi-di-un-sito.php
121
32.“Transizionali – Barocche (Classificazione
Novarese)”
http://blog.giofugatype.com/?p=520
33.“Type for you”
http://www.typeforyou.org/
34.“Typekit”
http://typekit.com/
35.“Typesites”
http://typesites.com/
36.“Typographer.org”
http://www.typographer.org/
37.“Typographica”
http://www.typographi.com/
38.“Typophile | Celebrating 11 years of Typographic
Collaboration”
http://typophile.com/
39.“Typography”
http://www.clagnut.com/archive/typography/
40.“Veneziani – Rinascimentali (Classificazione
Novarese)”
http://blog.giofugatype.com/?p=357
122
41.“Web & tipografia: gli errori da non commettere”
http://www.yourinspirationweb.com/2009/04/30/
web-tipografia-gli-errori-da-non-commettere/
42.“Wich are more legible: Serif or Sans Serif
Typefaces?”
http://alexpoole.info/which-are-more-legible-serif-orsans-serif-typefaces
43.“12 Font Scritti a Mano per Uso Commerciale”
http://www.succodesign.it/2011/02/12-font-scritti-amano-per-uso-commerciale/
44.“16 risorse web e tutorials sulla tipografia applicata
al web”
http://pecciola.com/2010/07/16-risorse-web-e-tutorials-sulla-tipografia-applicata-al-web.html
45.“50 Beautiful Hand-Drawn Web Design”
http://www.hongkiat.com/blog/60-beautiful-handdrawn-web-design/
123
Indice delle
immagini
In copertina, “Francesco Griffo”, studentpages.scad.
edu, http://studentpages.scad.edu/~kgrant24/Typography%20site/page%204.html
024. pag. 26, “Colonna Traiana”, Fuga Giangiorgio,
http://blog.giofugatype.com/?p=317
032. pag. 33, “Rosetta Stone Detail”, lonpicman, http://
it.wikipedia.org/wiki/Stele_di_Rosetta
060. pag. 109, “Andrea Braccaloni”, design.polimi.it,
http://www.design.polimi.it/guida/2008/index.php/
faculty_docenti/docente/24301
126
Biografie
degli autori
Letizia Bollini
ARTchitetto.
Dottore di ricerca presso il Politecnico di
Milano, si occupa dal 1995 di progettazione di interfacce multimodali e comunicazione visiva.
Docente incaricato del corso di laurea in
Disegno Industriale del Politecnico di Milano, Scienze di Internet a Bologna, dal
2006 è ricercatore presso il Dipartimento
di Psicologia dell’Università di MilanoBicocca.
Coniuga l’attività libero professionale
(Extrasmall.it, fondato nel 1998) con l’impegno nella ricerca teorico-metodologica,
nella didattica e nella divulgazione.
129
Angela Nuzzi
Nasce a Bari nel 1984. Si diploma nel 2003
a Cinisello Balsamo presso il liceo scientifico I.I.S.S “G. Peano”. Prosegue la sua
formazione a Milano presso l’Università
degli studi Milano-Bicocca, inizialmente frequentando per un anno il corso in
Scienze giuridiche. Nel 2004 però, decide di cambiare strada e consegue a Luglio 2008 il diploma di laurea triennale in
Scienze della Comunicazione Interculturale. Attualmente laureanda in Teoria e
Tecnologia della Comunicazione (laurea
magistrale).
Lavora da circa 5 anni nel mondo delle telecomunicazioni presso una nota azienda
di Milano.
130
Matteo Ostuni
Nasce nel 1982 ad Altamura in provincia di Bari dove si diploma presso l’I.T.C.
“F.M. Genco” come Perito Commerciale
e Programmatore nel 2001. Prosegue la
sua formazione a Milano presso l’Università Statale degli Studi di Milano dove nel
2009 si laurea in Comunicazione Digitale.
Attualmente laurendo in Teoria e Tecnologia della Comunicazione (laurea magistrale) presso l’Università Milano-Bicocca di Milano.
131
Domenica Pontieri
Nasce nel 1986 a Monza (MB) dove si diploma presso l’I.T.I.S. “Pino Hensemberger” come Perito Industriale Capotecnico specializzazione Informatica nel 2006.
Prosegue la sua formazione a Milano
presso l’Università Milano-Bicocca dove
nel 2009 consegue la laurea triennale in
Informatica. Attualmente laureanda in
Teoria e Tecnologia della Comunicazione
(laurea magistrale) presso la medesima
università.
132
Il progetto eGutenberg nasce nell’a.a. 2010-11
come attività didattica sperimentale all’interno
del CdL in Teoria e Tecnologia della Comunicazione e del Corso di Grafica di Comunicazione e
Psicologia di Milano Bicocca.
Partendo da un approccio pedagogico costruttivista il corso organizza intorno al concetto di User
Generated Content. 7 moduli didattici monografici dedicati alle Comunicazioni Visive applicate
al design delle interfacce web per non-designer.
Questo volume traccia un percorso che porta il
lettore a scoprire una nuova definizione di tipografia legata al web, partendo da una breve introduzione storica verranno analizzati i caratteri e la
loro evoluzione attraverso le nuove regole introdotte dal mondo digitale.
Completa il percorso un’intervista inedita ad un
autore d’eccezione: il visual designer italiano
Andrea Braccaloni.
«Most people think typography is about fonts.
Most designers think typography is about fonts.
Typography is more than that: it’s expressing language through type.»
Mark Boulton