Vol. 2 - Altervista

Transcript

Vol. 2 - Altervista

Visivamente
Parlando
eGutenberg Project
Volume II
A cura di Letizia Bollini
Visivamente Parlando
eGutenberg Project
Università degli studi di Milano - Bicocca
Corso di Laurea Magistrale in Teoria e Tecnologia
della Comunicazione
Corso di Grafica - 2010/2011
Milano 2011
Copertina e concept grafico
Rinaldo de Palma - [email protected]
Testi ed impaginazione
Letizia Bollini - [email protected]
Davide Cremonesi - [email protected]
Valerio Radice - [email protected]
Sara Gandini - [email protected]
Chiara Marescalco - [email protected]
Rossella Nota - [email protected]
Irene Trainotti - [email protected]
Alex Rogora
Elena Salemi
IV
Angela Nuzzi - [email protected]
Matteo Ostuni - [email protected]
Domenica Pontieri - [email protected]
Roberto Falcone - [email protected]
Erika Montoli - [email protected]
Licenza Creative Commons
Attribuzione - Non commerciale ad uso didattico Condividi allo stesso modo 3.0 Italia License
V
In questa collana
Volume 1
I. Grammatica visiva e teoria della
II. Visivamente parlando
III. Il linguaggio delle immagini
Volume 2
IV. RGB del colore
V. Tipografia digitale
VI. Like a rolling font
VIII
Presentazione
L’esperienza didattica maturata durante il corso
di Graphic
Designsoftware
del Corsolike
di Laurea
Teoria
sktop
publishing
Aldus in
PageMaker
e Tecnologia della Comunicazione presso l’Univerincluding versions of Lorem Ipsum.
sità degli Studi di Milano-Bicocca è confluita nella
with
the release
of Letraset
sheets
containing
Lorealizzazione
di questa
collana
distribuita
in diversi
rem
Ipsum
passages,
and more
recently
with
formati
elettronici,
articolata
in sette
lezioni
che deintendono
affrontare
le diverse
connesse
sktop
publishing
software
like tematiche
Aldus PageMaker
alla progettazione
nell’ambito
including
versions grafica
of Lorem
Ipsum. della comunicazione visiva, snodandosi attraverso un costante
Lorem
Ipsum is simply dummy text of the printing
percorso di analisi dello stato dell’arte, di osservaand
typesetting
industry.
Lorem Ipsum
been
zione
degli interpreti
più significativi
e dihas
esplorathe
industry’s
standard
dummy text
ever since
the
zione
degli scenari
più innovativi,
fornendo
di volta
in voltawhen
strumenti,
spunti ed
occasioni
1500s,
an unknown
printer
tookdiariflessione,
galley of
confronto, partecipazione e divertimento, in uno
scenario in continua evoluzione e rapido mutamentype and scrambled it to make a
to.
type visivo,
specimen
book. Itsentimenhas surLe Immagini sono testo
veicolano
vived notracchiudono
only five centuries,
but
ti, pensieri ed informazioni,
significati,
che svelano a chi possiede
le chiavi
per decifrarli.
also the leap
into electronic
typeLa nostra è una cultura
visuale,
legata strettamente
setting,
remaining
essentially
al linguaggio delle immagini, attraverso le immagiunchanged. It was popularised
ni noi risaliamo con la memoria e riviviamo gli avin the 1960s
with the storico
releaseche
of
venimenti più significativi
del momento
esse ritraggono. Letraset sheets containing LoGrazie a innovazioni
tecnologiche,
come iland
mobile
rem
Ipsum passages,
moree
i dispositivi touch, si
è evoluto
il nostro
modo
di fruirecently
with
desktop
puLorem
re le immagini, esse sono diventate fluide e dinamiIpsum is simply dummy text
che visibili e manipolabili su siti web, smartphone e
of the
printing
and alla
typesettablet, sempre con noi,
sempre
condivise
portating
industry.
Lorem
Ipsum
ta di tutti in qualunque momento.
12
II
eGutenberg
Project
RGB del Colore
Le basi, la storia, il web
Michela Cairo, Alex Rogora e
Elena Salemi
III
RGB del Colore
eGutenberg Project
Università degli Studi di Milano - Bicocca
Corso di Grafica - TTC 2010/2011
Milano, 2011
Copertina e concept grafico:
Impaginazione:
Alex Rogora & Elena Salemi
Attribuzione - Non commerciale - Condividi allo
stesso modo 3.0 Italia License
ISBN 123-45-67-8901-2
IV
Indice
Introduzione
Un po’ di storia
I sistemi colore
Un po’ di anatomia
La scelta dei colori
Il linguaggio
Rapporti colore e accessibilità
1
3
11
21
27
43
49
V
Indice
Bibliografia e linkgrafia
Indice delle immagini
Intervista
Biografie degli autori
57
63
69
73
VI
VIII
Introduzione
Il colore è sicuramente uno dei più potenti strumenti
che il linguaggio visivo ha a disposizione per esprime idee, gerarchie, indicazioni, emozioni.
La nostra capacità di attribuire significato ai colori ha sicuramente una dimensione innata e connaturata al nostro modo di percepire l’ambiente che
ci circonda, come dimostrano la nostra anatomia e
la capacità, anche nel regno animale, di attribuire
un significato ai segnali trasmessi tramite il canale
cromatico, ma è anche e soprattutto un fatto acquisito, in quanto linguaggio codificato, condiviso ed
appreso all’interno di una cultura che ne genera il
significato stesso1.
L’uso del colore è connaturato fin dall’antichità alle
forme espressive della cultura umana, ma è soprattutto in epoca moderna che si sviluppa anche una
sensibilità teorica rispetto a questo fenomeno e che
nascono i primi tentativi di sistematizzare una disciplina del colore, sia a partire da approcci psico-filosofici, che di natura fisica, chimica o matematica.
1 Per un approfondimento sulle teorie che affrontano la questione della
percezione come fenomeno innato od acquisito si
rimanda agli studi di e su
Johannes Müller e Von
Helmoltz.
1
Un po’ di storia
L’uso del colore
è connaturato fin
dall’antichità alle forme espressive della cultura
umana. Ma in questo senso è spesso anche stato
frutto delle risorse naturali disponibili in uno specifico territorio o ambiente, in base alle cui risorse
sono emerse simbologie e significati. Da un lato la
scarsezza o la difficoltà di reperimento di un materiale lo rendeva particolarmente prestigioso e
prezioso (la porpora di Tiro ricordata da Plinio o
l’indaco citato per la prima volta da Vitruvio per
esempio), dall’altro al colore venivano anche attribuiti significati magici ed esoterici, a partire dal fenomeno dell’arcobaleno – gamma dei colori visibili – che simboleggiava la connessione tra il mondo
4
001
002
001 La rifrazione della
luce bianca attraversando
un prisma di vetro viene
scomposta nei vari colori
002 Esperimenti condotti sul prisma ottico
003 Cerchio di Goethe
relativo all’equilibrio
003
5
alto e spirituale e quello basso o terreno2.
Ma è soprattutto a partire dagli studi di Newton3
che il fenomeno colore diventa oggetto di studi
scientifici ricadendo sotto l’interesse di molteplici discipline. La scoperta della rifrazione della luce
bianca che, attraversando un prisma di vetro viene
scomposta nei vari colori, ed i successivi esperimenti condotti a partire dal 1660 permettono allo scienziato di formulare la teoria corpuscolare superata,
anche dal punto di vista delle successive evidenze
2 Lia Luzzatto e Renata
Pompas, Il significato dei
colori nelle civiltà antiche,
Bompiani e ulteriori
approfondimenti in Philip
Ball - Colore: una biografia
- ed. Rizzoli
3 Isaac Newton, Lezioni
di ottica, vol. II, nella collana Classici della scienza, Torino Utet, prima
edizione 1978
4 Christiaan Huygens,
Teoria Ondulatoria, Traite
de Lumiere, 1690
5 A Dynamical Theory of
the Electromagnetic Field,
1864
6 M. Planck, L. Silberstein e H. T. Clarke The
origin and development of
the quantum theory Clarendon Press, Oxford, 1922
matematiche di interpretazione di vari fenomeni ottici dalla
teoria ondulatoria di Huygens4,
ripresa ed ampliata, in tempi
successivi, da Young, Fresnel e
Fraunhofer. Questi studi saranno poi superati dalla teoria elettromagnetica di Maxwell5 e da
quella quantistica di Planck6.
Dal punto di vista del linguaggio però, accanto agli studi fisico-matematici si affiancano
ulteriori teorie e riflessioni più
6
orientate ad una interpretazione di tipo espressivo,
artistico, psicologico e simbolico come i Farben Lehre di Goethe (1810) in aperto contrasto con il pensiero newtoniano. In questo testo lo scrittore, poeta
nonché pittore tedesco riporta prepotentemente il
fattore umano ed espressivo al centro dell’interpretazione del linguaggio cromatico, che va al di là del
fenomeno fisico percettivo. Anche il testo Über das
Sehen und die Farben di Schopenauer (1816) ribadisce, da un’angolazione filosofica, un’opposizione
alla teoria fisica di Newton.
Dal punto di vista invece della
percezione è stato fondamentale il lavoro di Helmholtz. Il fisico e fisiologo tedesco ipotizza con Maxwell che nell’occhio
(Handbuch der Physiologischen
Optik, 1856) siano presenti, oltre ai bastoncelli, tre distinti ricettori, i coni, in grado di identificare ciascuno una specifica
tinta, rosso, verde e blu, corrispondenti ad altrettante lun-
7
ghezze d’onda (dalle più alte alle più basse). Il riconoscimento dei colori si basa sulla riflessione
della luce sugli oggetti Un oggetto è colpito da
un fascio luminoso in parte assorbe, in parte riflette
le onde di cui il raggio è composto, determinando
così il colore che noi percepiamo. Una volta percepita dall’occhio la luce viene convertita in segnali nervosi nella retina e attraverso il nervo
ottico arriva al lobo occipitale. L’occhio reagisce
ai tre colori primari additivi (rosso, verde e blu)
e il cervello li percepisce come
una combinazione di questi
tre segnali.
L’uomo percepisce lunghezze
d’onda comprese tra 600-700
nanometeri come rosso, 500600 nanometeri come verde e
400-500 nanometeri come blu.
Queste misure sono visibili a
monitor come tre colori primari, RGB.
8
004
004 Illustrazione dello
spettro elettromagnetico
9
I sistemi colore
La quadricromia
utilizza tre colori
primari più il nero: Cyan, Magenta, Yellow e Black
(CMYK) per dare origine, tramite mescolanza, ai
vari colori.
Utilizzata nei sistemi di stampa, la quadricromia
è detta anche “sintesi sottrattiva”, poiché, secondo
la teoria newtoniana precedentemente illustrata, la
sovrapposizione dei pigmenti, sottrae luce, ovvero
onde riflesse. Per avere il bianco, quindi, dovremo
avere assenza di materia, cioè di pigmento, per ottenere il nero invece la sua massima mescolanza/
sovrapposizione, cioè il 100% di ogni singolo colore.
La somma a coppie di due colori sottrattivi dà, inoltre, origine un colore primario additivo.
12
Nei processi di produzione più diffusi per le grandi tirature come l’off-set, il colore viene scomposto
nelle pellicole corrispondenti ai corrispettivi valori
(in percentuale da 0 a 100) egli inchiostri CMYK
dando origine alle lastre. L’effetto di sovrapposizione della retinatura dei singoli colori, dà origine alla
tonalità finale.
Guardando con il lentino tipografico e, talvolta, ad
occhio nudo, è possibile distinguere la texture dei
punti corrispondenti alle singole pellicole.
Specialmente se si lavora con
immagini (è il caso delle fotografie) provenienti da dispositivi digitali, prodotte originariamente in tricromia, bisogna
ricordarsi di trasformare in
quadricromia, qualora debbano
essere impiegate in un progetto
a stampa.
13
005
006
007
005 Sintesi sottrattiva
006 Sintesi addittiva
007 Cromario
008 Sintesi del colore
sottrattiva, CMYK
008
14
Nel caso della tricromia
parliamo, invece di “sintesi additiva”, poiché il processo è quello di aggiungere luce alla luce. I colori
primari sono tre: Red (rosso), Green (verde) e
Blue (RGB). Trattandosi di colori ottenuti a partire da una sorgente luminosa, otterremo il nero
in assenza dei colori, cioè di luce, e otterremo il
bianco quando i tre colori saranno tutti al 100%
(valore massimo 255). Specularmente a quanto avviene per
la quadricromia, l’assenza di
uno dei 3 primari (quindi la
somma solo di due colori) genera il primario sottrattivo.
Questa modalità è quella in
genere utilizzata per i progetti a video. La maggior parte
dei monitor, sebbene in questo
momento siano già disponibili
sul mercato monitor basati su
tecnologia OLED, che intro-
15
ducono un sistema di quadricromia (il giallo) anche nel mondo video e digitale, la maggior parte dei dispositivi, portatili, monitor LCD7, iPad,
smart-phone ecc utilizzano attualmente la tricromia, cioè una restituzione del colore tramite
luce RGB.
Un ragionamento a parte meritano gli e-Ink, introdotti (attualmente disponibili solo in bianco
e nero) in eReader come Kindle di Amazon. In
questo caso il sistema di retro-illuminazione co-
7 LCD: Liquid Crystal
Display, costituiti da due
strati di materiale polarizzato con, nel mezzo,
una soluzione liquida.
Una corrente elettrica
fatta fluire attraverso il
liquido puo’ fare in modo
che i cristalli del materiale polarizzato si allineino
bloccando il passaggio
della luce.
mune a tutti i monitor è stato
abbandonato in favore di un
sistema che prevede l’uso di
sfere di dimensione molto ridotta all’interno dello schermo. Queste sfere sono caricate
elettricamente; una semisfera
è positiva e colorata di nero
mentre l’altra semisfera è caricata negativamente e colorata di bianco. Tramite campi
elettrici si possono orientare
le sfere per ottenere il cambio
16
di colore nei vari punti dello schermo. Questa
tecnologia restituisce una pagina molto simile,
in termini di percezione, a quella stampata. Nel
novembre del 2010 è stata annunciata la prima
versione di un dispositivo e-Ink a colori basato
su tecnologia Triton, il quale dovrebbe essere distribuito sul mercato da Luglio 2011.
A meno di non affrontare, perciò, progetti particolari di epublishing, in cui la fruizione principale dell’artefatto comunicativo avvenga tramite
un eReader e quindi tramite
un supporto basato sulla tecnologia degli inchiostri digitali, i progetti che devono
essere fruiti a monitor vanno
gestiti e sviluppati in RGB, si
tratti di presentazioni digitali,
siti internet, applicazioni per
iPhone o video-gaming.
17
Quando si parla di colori spe
ciali si fa riferimento al Sistema Pantone©
(Pantone Matching System8) introdotto nel
1963 negli Stati Uniti e divenuto ben presto lo
standard internazionale per codificare i colori a
stampa. La mazzetta Pantone permette infatti di
dare una indicazione univoca (il codice) del colo-
8 Pantone Matching
System:
anni
‘50,
classificare i colori e
“tradurli” nel sistema di
stampa a quadricromia
CMYK (Pantone Inc.),
www.pantone.com
re speciale che andrà utilizzato al tipografo e traduce – ove
possibile – il colore in quadricromia e tricromia. L’uso di
inchiostri speciali permette di
ottenere un colore coerente
(cioè molto più uniforme nelle
diverse tirature e all’interno
della stessa tiratura) più pieno
poiché risulta stampato a tinta
piatta anziché retinato come
nel caso della quadricromia. Il
PMS prevede inoltre la possi-
18
bilità di utilizzare colori non ottenibili tramite i
normali pigmenti come l’oro, l’argento, i colori
metallici, fluorescenti ecc. Recentemente Pantone© ha introdotto il sistema di stampa Exhachrome, che aggiunge a CMYB anche arancione
e verde per ottenere un effetto cromatico il più
simile possibile a quello che si otterrebbe stampando con l’inchiostro speciale.
19
Un po’ di anatomia
Tonalità o colore (Hue)
È la caratteristica specifica di un colore (senza bianco e senza nero) e corrisponde a una diversa lunghezza d’onda della luce. (Anche: Tinta, Croma,
Cromaticità)
S
aturazione o purezza (Satu
ration/Intensity)
Corrisponde alla sua intensità o purezza: minore
è l’intensità, più il colore tende al grigio. (Anche:
Purezza, Pienezza, Intensità)
22
009
010
009 Scala cromatica con
unguale tonalità.
010 Variazione di saturzione saturazione di uno
stesso colore.
011 Munsell System
011
23
Luminosità o brillanza (Tint)
Corrisponde alla quantità di luce che il colore sembra emettere apparendo più chiaro o più scuro. Questo valore può essere fatto variare mixando il colore
col bianco o col nero.
Nel caso in cui il colore venga mescolato col bianco.
(Anche: Valore, Chiarezza, Brillanza, Tint)
Ombra (Shade)
Nel caso in cui il colore venga
mescolato col nero.
Tone
Nel caso in cui il colore venga
mescolato col grigio o con un
colore complementare.
24
012
013
014
012 Luminosità o brilantezza: esempio di colore mescolato con il bainco
013 Ombra : esempio di
colore mescolato con il
nero
014 Tono: esempio di
colore mescolato con il
grigio
25
La scelta dei colori
SCHEMA COLO
All’interno dei sistemi di scel
ta dei colori, a di là dei significati culturali
e simbolici attribuiti ai colori stessi, esistono criteri
che sfruttano i rapporti tra i colori e le loro caratteristiche fisiche.
Partendo dalla ruota dei colori su cui si basano diversi strumenti sia tradizionali, che software on e
off line, possiamo individuare i seguenti criteri compositivi o strategie di scelta di una tavolozza colori
per un determinato progetto grafico.
28
015
015 Schermata principale del programma ColorSchemer
016 Color wheel: fronte
016
017 Color wheel: retro
017
29
Schema colore monocromati
co
Il colore scelto è uno e si utilizzano progettualmente le sue varianti ottenute lavorando sulla
tinta e sull’ombra, cioè mixando bianco o nero.
Questo significa individuare un unico spicchio
della ruota dei colori e giocare tutti gli elementi
secondo uno schema monocromatico, a cui si può
aggiungere un altro colore in nuance.
Il rischio di questa impostazione, è che l’effetto finale sia
piuttosto piatto e monotono,
se no si riesce a modulare la dimensione cromatica in maniera che crei ritmo e gerarchia.
Al contrario, magari associato
con il solo nero e/o bianco il
singolo colore può staccare,
creando con l’intorno neutro
un forte contrasto.
30
018
019
018 Schema colore monocromatico (ColorSchemer)
019 Esempio sito monocromatico
31
Schema colore analogico
In base a questo schema, i colori scelti sono contigui sulla ruota dei colori, per esempio uno (o
più) alla destra e/o alla sinistra del colore scelto.
L’effetto in gradazione risulta in genere piuttosto armonioso ed equilibrato.
Schema
colore
complementare
I colori scelti, sono opposti
nella ruota dei colori e l’effetto che ne risulta è in genere
vibrante, vivace, brillante dinamico e a contrasto. Pur trattandosi ancora di scelte che si
basano solo sulla dimensione
fisica dei colori e dei loro mutui rapporti, già il tipo di cri-
32
020
021
020 Schema colore analogo (ColorSchemer)
021 Esempio uso di colori analoghi
022 Esempio uso di colori analoghi
022
33
terio di scelta comporta un linguaggio cromatico
che investirà di sé – mediato ulteriormente dalla
componente culturale, simbolica e di contesto –
l’intero progetto.
In questo caso, dato il rapporto di contrasto, bisognerà essere particolarmente attenti a mantenere un buon livello di leggibilità e che la contrapposizione cromatica non diventi un elemento
di disturbo anziché di facilitazione nella codifica
del messaggio.
Schema
colore
triadico
I colori scelti sono posizionati ai vertici di un triangolo, in
genere equilatero, ma non necessariamente, tracciato idealmente sulla ruota dei colori.
I colori che risultano equidistanti (img. 023) risultano in
armonia. La scelta cromatica
34
023
024
023 Schema colore complementare.
024 Esempio uso di colori
complementari: porporaverde
025 Uso di colori complementari: giallo-blu.
025
35
027
026
026 Schema colore triadico
027 Schema triadico basato su un triangolo equilatero
028
028 Esempio applicazione schema triadico: violagiallo-arancione.
36
in questo caso inizia ad essere abbastanza sofisticata concettualmente e comporta una buona
gestione di capacità e controllo dell’effetto finale.
Schema colore quadratico o
doppio complementare
I colori scelti sono disposti sui vertici di un quadrato, o un rettangolo, sovrapposto alla ruota dei
colori. Nel caso che si scelga il quadrato come
criterio, i colori, a coppie, saranno anche tra loro complementari.
Questo criterio è decisamente
complesso dal punto di vista
degli equilibri comunicativi e
comporta una una grande capacità di controllo progettuale
affinché il risultato finale sia
un effetto dosato di gerarchie,
contrasti ed evidenze, anziché
una chiassosa tavolozza.
37
029
030
029 Schema colore quadriatico o doppio complementare
030 Il Logo di Google
è un perfetto esempio
dell’udo di uno schema
colore a doppio ocmplementare.
38
Altri criteri
o altri modi di selezionare
una tavolozza o un mood cromatico per un progetto possono venire operando a partire da strategie diverse. Selezionando, per esempio, il materiale iconografico disponibile e desumendo da
esso delle dominanti di colore o utilizzando sistemi che offrono delle mappe cromatiche o delle gamme selezionate per suggerire determinati
effetti percettivi, emotivi e comunicativi.
In questo senso la scelta si
sposta sempre più da un piano
tecnico ad uno linguistico, in
cui la selezione delle tonalità
viene orientata non tanto da
criteri compositivi, ma di significato.
39
031
031 Esempi di palette colori combinate in base al
significato
032 Esempio di combinazione cromatica tratta
dalle tonalità del ghiaccio, con riferimenti iconografici
032
40
033
033 Palette dei colori più
frequentemente usati nel
web 2.0
034 Colori accesi e totalmente in contrasto
sembrano animare il sito
coldplay.com
034
41
Il linguaggio
CONTESTO
Dal rosso
che indica pericolo, usato per i segnali come lo stop o di divieto, al colore usato come
codice in contesti come la segnaletica delle metropolitane (la gialla per indicare la terza linea del sistema milanese), la lettura dei dati di un bilancio
finanziario, il colore simbolico dei paramenti sacri
calati nel tempo dell’anno e nella nostra quotidianità, al significato della terna semaforica introiettata
e traslata anche in molti altri contesti, il colore è
sempre carico di significati. Il suo uso deve perciò
essere, all’interno di un progetto, un atto consapevole che tenga presente i significati attribuiti nei
vari contesti e, nello specifico, in quello in cui l’atto
comunicativo avrà (prevalentemente) luogo.
44
035
035 Il nero da è diventato nella realtà quotidiana
colore di eleganza.
036-037 La relazione cromatica dei semafori è di
uso comune (verde=via
libera)
038 Segnale di stop, il
rosso richiama l’attenzione ad un pericolo
037
036
039 Metropolitana milanese chiamata abitualmente “la gialla”.
039
038
45
Come nel caso della scelta dei font, anche per quanto riguarda l’uso del colore all’interno di un progetto, vale la massima di Mies Van Der Rohe9: “less is
more”. Molti apprendisti designer ;) attribuiscono
erroneamente all’uso massiccio del colore un valore
creativo in sé indipendentemente dal significato finale o dall’effetto – allertivo, emotivo o connotativo
– che si vuole sortire. Dove invece anche la scelta del
bianco e nero può essere una scelta di colore come di
mostra l’opera di un raffinato maestro italiano quale
9 Per approfondimenti
Werner Blaser, Ludwig
Mies van der Rohe, gli
arredi e gli spazi, 2008
A. G. Fronzoni
è stato A. G. Fronzoni10.
Tanto è maggiore il significato
che si vuole veicolare a livello
comunicativo tramite il canale
cromatico, tanto minore dovrà
essere l’effetto di indebolimento, se non addirittura di disturbo dovuto alla presenza di troppi colori all’interno della stessa
pagina.
46
Colore
Rosso
Sensazioni
positive
Passione, energia,
amore, forza, azione
Verde
Natura, primavera,
fertilità, denaro, tenacia, prontezza
Giallo
Sole, estate, oro, ottimismo, disponibilità, altruismo
Stabilità, calma, unità, soddisfazione, armonia, fedeltà, cielo,
mare
Blu
Bianco
Neve, purezza, innocenza, pace, positività, spiritualità
Intelligenza, dignità, maturità
Potenza, formalità,
profondità, stile
Sensazioni
note
negative
Sangue, guerra, pe- È uno dei colori detti “saricolo, aggressività lienti”, ovvero che sembrano avvicinarsi all’osservatore.
Inesperienza, invi- Usato come simbolo di
dia
via libera (es. semaforo);
è inteso come colore “giovane”.
Malattia,
vigliac- Particolarmente visibile
cheria, azzardo
anche in situazioni limite
(es. antinebbia).
Depressione, con- Usatissimo come colore
servatorismo
aziendale date le sue caratteristiche positive.
Freddo, ospedaliero,
sterile, sconosciuto,
immateriale
Ombra, noia, depressione
Cattiveria, timore,
morte, anonimato,
negatività
Associato con concetti di
poco peso, cibo con poco
grasso e latticini.
Grigio
Colore solitamente percepito come neutro
Nero
Colore serio e classico,
spesso associato a prodotti costosi. Rappresenta il
no radicale
Viola
Metamorfosi, tran- Nostalgia, immatu- Passione del rosso più
sizione,
mistero, rità, suggestione
tranquillità del blu
magia
A r a n c i o - Esuberanza, diver- Inganno, diffidenza, Alta visibilità, viene usato
ne
timento, vitalità, in- aggressione
per attirare l’attenzione e
fanzia
sottolineare gli elementi
più importanti di un design.
Rosa
Delicatezza, como- Aggressività iniben- Visto come eccessivamendità
te, intimità eccessi- te femminile
va, sdolcinatezza
Marrone Stabilità, durata
Sporco, vecchio
Associato al colore della
terra.
47
Rapporti colore e
accessibilità
CONTRAST
Come dimostrato
dagli studi di Albers11 e in linea con i principi della Gestalt il colore
è influenzato dal contesto cromatico in cui viene inserito. A parità di colore, cioè, la percezione che noi
abbiamo di un dato colore è differente a secondo del
colore di sfondo su cui viene visualizzato.
Inoltre l’accostamento colore/sfondo rende più o
meno enfatico, più o meno leggibile un sistema grafico costituito, per esempio, da una scritta su di una
campitura piatta.
Sovrapponendo un colore al suo complementare
(rosso/verde, viola/giallo, arancio/blu) avremo un
effetto di forte contrasto, ma non necessariamente
un sistema leggibile. Da evidenze sperimentali infi-
50
040
11 Josef Albers, http://
en.wikipedia.org/wiki/
Josef_Albers
040 Effetto di contrasto
simultaneo
041 Effetto contrasto di
colore
041
51
ne è emerso che il massimo contrasto in termini invece di leggibilità è riscontrabile negli accostamenti
nero/bianco, blu scuro/bianco e nero/giallo.
Specialmente
per quello che riguarda
l’uso del colore sul web, la sensibilità diffusa rispetto alle problematiche di accessibilità, ha fatto sì che
una sezione delle norme WAI12 fosse interamente
dedicata al colore e alla questione della leggibilità
per ipovedenti e daltonici.
12 Web Accessibility
Initiative
http://www.
w3.org/WAI/
In linea generale, e questo può
essere riportato anche in un
progetto cartaceo, ma a maggior
ragione sul web dove le scritte
possono funzionare come link e
permettere l’acceso a ulteriori
servizi alla navigazione, le informazioni principali dovrebbero essere affidate ad un rapporto
cromatico che ne permetta una
eccellente leggibilità. In caso di
daltonismo parziale o totale è
importante che il contrasto e i
52
042
043
042 Visione daltonica
tramite protanopia e tritanopia
043 A sinistra rapporti
colore-sfondo non idonei
ai criteri di accessibilità,
sulla destra alcuni esempi
idonei.
53
colori scelti mantengano leggibile il testo.
In genere i colori più problematici sono il rosso ed
il verde a causa della protanopia (la cecità più accentuata per il colore rosso) che colpisce una non
soprattutto gli uomini e la deuteranopia (la cecità
più accentuata per il colore verde) fino all’incapacità
totale di percepire i colori.
I questo caso è importante, affinché il sito sia accessibile, che sussistano altri elementi, anche visivi
come icone, simboli o texture, che aiutino l’utente a
13 World Wide Web
Consortium http://www.
w3.org/
Mauro Boscarol http://
boscarol.com/
discriminare le informazioni al
di là del codice colore utilizzato.
Per un approfondimento sull’argomento si rimanda alla sezione
del sito del W3C13 e all’algoritmo proposto per il calcolo del
contrasto che garantisca una
leggibilità ottimale ed al lavoro
di M. Boscarol Ecologia dei siti
web14.
54
044
044 Ruota dei colori accessibili http://gmazzocato.altervista.org/colorwheel/wheel.php
045 A sinistra rapporti colore-sfondo ritenuti
scorretti in base ai criteri dell’accessibilità, sulla
destra alcuni esempi corretti.
045
55
Bibliografia
Linkografia
Bibliografia
1. Albers J., Interazione del colore. Esercizi per imparare a vedere. Il Saggiatore Tascabili; 2009
2. Ambrose G& H Paul. Fondamenti di grafica. modena; 2004.
3. Ball P. Colore: una biografia. BUR; 2007
4. Batchelor D. Cromofobia. Storia della paura del colore. Mondadori Bruno; 2001
5. Brusatin M. Storia dei colori. Einaudi; 1999
6. Dell’Aquila D. Un sito su misura. Capire Internet
come cliente. Manuale di sopravvivenza. Mammeonline; 2006
7. Garau A. Le armonie del colore: analisi strutturale
dei colori. Hopeli Editore; 1999
8. Lidwell WHK& B Jill. Principi universali del design. Modena; 2005
9. Mark F. Bear. Neuroscienze, esplorando il cervello.
Masson; 2004
10. Pring R. www.colour. Uso efficace del colore per la pro-
58
gettazione di pagine web. Apogeo Editore; 2001:192.
11. Romanello I. Il colore: espressione e funzione : guida ai
significati Hopeli Editore; 2002
12. Walker M. The power of color. Avery Publishing,
eds; 1991
59
Linkografia
1. Anon. Istituto del colore. Available at: http://www.
istitutocolore.it/.
2. Anon. How do colors affect purchases? 2011. Available
at: http://blog.kissmetrics.com/color-psychology/.
3. Anon. Best And Free Online Color Tools To Make Your
Job Easy. Available at: http://www.webdesignish.com/
best-free-online-color-tools.html.
4. Anon. Color theory. Available at: http://www.paperleaf.com/blog/wp-content/uploads/2010/01/ct_1280.
jpg.
5. Anon. How to Get a Professional Look With Color.
2011. Available at: http://www.webdesignerdepot.
com/2009/12/how-to-get-a-professional-look-withcolor/.
6. Anon. La Teoria del Colore di Küppers Available at:
http://www.uni-bielefeld.de/lili/kumu/farbenlehrekueppers/it/theorie23.html.
7. Anon. The Most Powerful Colors in the World. 2011.
Available at: http://www.colourlovers.com/business/
blog/2010/09/15/the-most-powerful-colors-in-theworld.
60
8. Anon. The User Experience And Psychology Of Colour.
2011. Available at: http://spyrestudios.com/the-userexperience-and-psychology-of-colour/.
9. Anon. Festa dei colori in India, un inno alla
primavera. 2011. Available at: http://blog.panorama.
it/foto/2010/03/09/festa-dei-colori-in-india-un-innoalla-primavera/.
10. Anon. Colorare - Comunicare e psicologia. Available at:
http://www.colorare.net/comunicare.htm.
11. Anon. color of the year 2010. 2011. Available at:
http://static.colourlovers.com/uploads/images/colorof-the-year-2010.html.
12. Anon. La teoria dei colori e il Social Media: scienza
o semplice tendenza? 2011. Available at: http://www.
webinfer mento.it/la-teoria-dei-colori-e-il-socialmedia-scienza-o-semplice-tendenza/.
61
Indice delle
immagini
001. Pag 5, “Studi sul Prisma”, Rafaminu
002. Pag.5, “Prisma”, Cam-Ann
003. Pag.5, “Cerchio di Goethe”, Dicklyon
004. Pag.9 “Illustrazione dello spettro elettromagnetico”,
Tatoute and Phrood
005. Pag.14, “Sintesi sottrattiva”, Elena salemi
006. Pag.14, “Sintesi addittiva”, Elena Salemi
007. Pag.14, “Cromario” fonte UNIONPRINT srl
008. Pag.14, “Subtractive color synthesis - CMYK”,
Magica”
009. Pag.23, “Tonalità”, Michela Cairo
010. Pag.23, “Saturazione”, Michela Cairo
011. Pag.23, “Munsell System”, Jacobolus
012. Pag.25, “Luminosità o brilantezza”, Elena salemi
013. Pag.25, “Ombra”, Elena Salemi
014. pag.25, “Tono”, Elena Salemi
64
015. Pag.29, “Schermata principale” fonte ColorSchemer
016. pag.29, “Color Wheel Fronte”
017. pag.29, “Color Wheel Retro”
018. Pag.31,
ColorSchemer
“Schema
colore
monocromatico”,
019. Pag.31, “Esempio sito monocromatico”,
020. Pag.33, “Schema colore analogo”, ColorSchemer
021. Pag.33, “Esempio uso di colori analoghi”
022. Pag.33, “Esempio uso di colori analoghi”
023. Pag.35,
ColorSchemer
“Schema
Colore
Complementare”,
024. Pag.35, “Esempio Uso di Colori Complementari”
025. Pag.35, “Esempio Uso di Colori Complementari”
026. Pag.36, “Schema Colore Triadico”, ColorSchemer
027. Pag.36, “Schema Traidico Basato su un Triangolo
Equilatero”, ColorSchemer
028. Pag.36, “Esempio Sito Applicazione Schema
65
Triadico”
029. Pag.38, “Schema Colore Quadriatico o Doppio
Complementare”, ColorSchemer
030. Pag.38, “Logo Google”, google.it
031. Pag.40, “Esempi di Palette Colori Combinate”,
Elena Salemi
032. Pag.40, “Esempio Sito Combinazione Cromatica
Tratta delle Tonalità del Giacchio”
033. Pag.41, “Colori Web 2.0”, Elena Salemi
034. Pag.41, “Colori Accesi Totalmente in Contrasto”,
035. Pag.45, “Nero, Colore di Eleganza”, Ras67
036. Pag.45, “Semaforo Verde”
037. Pag.45, “Green Check”, David Levy
038. Pag.45, “Stop”, Overpush
039. Pag.45, “Metro Gialla”
040. Pag.51, “Contrasto Simultaneo”, Elena Salemi
041. Pag.51, “Contrasto di Colore”, Michela Cairo
66
042. Pag.53, “Visione Daltonismo”, Anonimo
043. pag.53, “Esempi Accessibilità”, Elena Salemi
044. Pag.55, “Ruota dei Colori Accessibili”
045. Pag.55, “Raporto Colore Sfondo, Elena Salemi
67
L’intervista
Fulvio Mario Beretta
segue una formazione di tipo scientifico prima in campo chimico
e in seguito presso la Scuola di Direzione Aziendale
in Marketing dei Beni Industriali. Lavora per più di
vent’anni come chimico del colore in ambito commerciale in multinazionali per la produzione di pigmenti speciali. Diviene direttore marketing e vendite della divisione industriale e collabora con altre
aziende per finiture decorative per interni ad alto
pregio - stucchi veneziani ed effetti multicolore- seguendo in particolare il canale della progettazione.
Aumenta le relazioni col design e la progettazione
fino a quando non avvia una attività di consulenza
autonoma, la quale ingloba la direzione prima come
direttore responsabile e poi come direttore editoriale della rivista colore e la presidenza dell’Istituto del
Colore. Il suo ruolo professionale si configura come
“ponte di collegamento” tra il momento ideativo del
progetto e la realizzazione pratica, fornendo in particolare soluzioni e giustificazioni coerenti sull’uso
del colore.
70
http://vimeo.com/egutenbergprj/colore
71
Biografie
degli autori
Letizia Bollini
ARTchitetto.
Dottorato presso il Politecnico di Milano, si occupo 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
Dipartiemnto di Psicologia dell’Università di Milano-Bicocca. Coniuga l’attività
libero professionale (Extrasmall.it, fondato nel 1998) con l’impegno nella ricerca teorico-metodologica, nella didattica e
nella divulgazione.
74
Michela cairo
Nata a Treviglio (Bg) nel 1985. Laureata in Comunicazione e Gestione nei Mercati dell’Arte e della Cultura allo IULM
di Milano. Oggi studentessa di Teoria e
Tecnologia della Comunicazione presso
l’università Milano-Bicocca. Ha lavorato
per due anni nel settore iniziative della
Triennale di Milano dove ha avuto modo
di organizzare diverse mostre ed eventi
nell’ambito dell’arte e dell’architettura.
Dal 2009 lavora presso Ethnohouse Italia, network di servizi per il mondo etnico, nel settore della comunicazione. Da
Maggio 2011 collabora con l’Associazione Culturale PHLEGMATICS.
75
Alex Rogora
Nato a Legnano (MI) nel 1987. Laureato nel 2009 in informatica presso l’Università degli Studi di Milano-Bicocca,
dove prosegue il percorso universitario
iscrivendosi al Corso di Laurea in Teoria
e Tecnologia della Comunicazione. Dal
2010 collabora con il settore area Formativa dell’Università di Milano-Bicocca
per l’organizzazione di eventi e la realizzazione del relativo materiale graficopubblicitario.
76
Elena Salemi
Nata a Milano nel 1986 laureata in Scienze
e Tecniche Psicologiche, scrive la tesi dal
titolo “La comunicazione politica nell’era
del web 2.0, un esempio: Barack Obama”.
Nel 2009 si iscrive al Corso di Laurea in
Teoria e Tecnologia della Comunicazione. Nella vita ha avuto diverse esperienze
lavorative, tra cui consulente marketing
presso Coesis Research, carriera iniziata
nel 2008 e Web Project Manager dal 2011
in Babotel.
77
II
II
eGutenberg
Project
Tipografia Digitale
L’anatomia dei Font
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]
Impaginazione:
Attribuzione - Non commerciale - Condividi allo stesso modo
3.0 Italia License
In copertina: Francesco Griffo
IV
VI
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
verticale 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”
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.
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.
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
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
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-
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.
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
si suggerisce di consultare il testo in bibliografia
su Eric Gill consultare il
suo sito personale www.
ericgill.com
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).
si suggerisce di consultare l’articolo in sitografia
“Classificazionedeicaratteri–Lineare–Museo virtuale della Stampa”
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
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.
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
scritta Decorative
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-
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)”
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)”
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,
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
II
eGutenberg
Project
Like a Rolling Font
La composizione tipografica
dalla poesia visiva ai fogli di stile
Roberto Falcone e Erika Montoli
III
Like a Rolling Font
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 2010/2011
Milano, luglio 2011
Testi ed impaginazione:
Roberto Falcone - [email protected]
Erika Montoli - [email protected]
Attribuzione - Non commerciale - Condividi allo
stesso modo 3.0 Italia License
In copertina: S. Morison
IV
VI
1. La composizione
tipografica
LIBRIO
EQUI
C
ome la retorica, la musica, la danza, la calligrafia, come ogni cosa che si sforzi di dare grazia al linguaggio, così la tipografia è un’arte che può essere
deliberatamente usata in modo scorretto.
Essa richiede una capacità grazie alla quale il significato di un testo può essere reso evidente, onorato
e condiviso, o consapevolmente travisato.
In un mondo assediato da messaggi non richiesti,
la tipografia deve spesso attirare a sè l’attenzione,
condizione preliminare necessaria per la lettura.
I designer nell’ambito della comunicazione visiva
non possono assolutamente ignorare l’uso corretto
dei caratteri tipografici e tutti gli aspetti tecnici e
culturali che li regolano.
5
Il progettista che vuole disegnare i caratteri deve
risolvere e fondere coerentemente il rapporto armonico tra i segni che compongono le singole lettere
e le lettere tra loro quando si mettono assieme per
comporre i testi.
La conosceza del lettering e della tipometria, l’insieme delle misure degli elementi che formano la composizione e l’impaginazione di un testo tra cui interlinea, spaziatura, crenatura, stanno alla base della
grafica e del design, e sono importanti per l’educazione alla visione.
Il progetto moderno è impensabile senza un’educazione costruttiva che costringe il significato a
parlare all’interno di forme, di pieni e di vuoti, geometricamente costruiti, ma attenti a tutte quelle
correzioni ottiche necessarie affinchè la lettura sia
chiara e razionalmente comprensibile.
Possiamo quindi parlare di capacità estetico-contenutistica di una pagina web quando il designer riesce tramite la scelta opportuna dei caratteri tipografici a trasmettere una comunicazione verbale e
6
visiva che diventa parte del lettore a mano a mano
che si addentra nell’analisi della pagina stessa.
Infine possiamo convenire che la tipografia dovrebbe assicurare al lettore questi servizi:
pagina
ideale per la lettura.
7
1.1 La griglia tipografica
La gabbia tipografica (o griglia), che costituisce
senza dubbio uno dei principi universali della progettazione visiva, consiste in una suddivisione
virtuale degli spazi all’interno di una pagina attraverso una struttura bi-dimensionale composta
da una serie di intersezioni tra righe verticali ed
orizzontali; questo modello genera quindi una
suddivisione dello spazio in un numero definito
di sotto-spazi che compongono uno scheletrato,
grazie al quale il progettista di comunicazione
visiva è in grado di organizzare e strutturare testo ed altri elementi visivi in modo razionale, per
facilitare la comprensione del contenuto della pagina al lettore.
Lo scopo di una gabbia tipografica consiste nel
conferire unità al contenuto tramite il ricorso ad
elementi costanti che ne definiscono l’architettura generale, creando un ordine ed una gerarchia
tra gli elementi e valorizzando complessivamente il contenuto; il lettore si avvantaggerà così
della costanza delle forme e delle dimensioni e
8
la sua fruizione del contenuto sarà liberata dagli
impacci di un continuo riadattamento a moduli
visivi diversi, diminuendo lo sforzo cognitivo.
001
001. Esempio di una elementare griglia verticale
sulla superficie di un toast.
9
1.2 La composizione
tipografica e il ritmo
«Lo spazio in tipografia è come il tempo nella
musica. È infinitamente divisibile, ma pochi intervalli proporzionale possono essere molto più
utili di una scelta senza limiti di quantità arbitrarie.» Così scrive il tipografo Robert Bringhurst
e proprio come l’uso regolare del tempo fornisce
il ritmo nella musica, l’uso regolare dello spazio
Robert Bringhurst (1946)
è uno dei massimi esperti
di tipografia a livello mondialie. In particolare è l’autore del celebre The Elements of Typographic Style,
manuale di tipografia, in cui
tratta dei tipi di carattere,
glifi, e della disposizione
visuale e geometrica dei
caratteri tipografici.
fornisce il ritmo in tipografia.
Senza ritmo l’ascoltatore o il
lettore, si trova disorientato e
perso.
È il bianco delle lettere e non
il nero dei tratti ciò che rende
possibile la lettura, in quanto
determina il ritmo tra le lettere e l’esistenza stessa delle parole (la divisione spaziale delle
parole nei testi scritti appare,
secondo gli studi di Noordzij,
10
nei manoscritti irlandesi all’inizio
del VII secolo).
Il bianco non è progettabile di per sé, ma è reso
solo attraverso il disegno delle forme nere che lo
delimitano, pertanto le lettere dovrebbero essere
disegnate in funzione degli spazi bianchi e quindi del ritmo che creano. Inoltre, poiché le lettere
non esistono di per sé ma solo per creare parole,
è sull’unità base della parola che si dovrebbe pensare in tipografia.
11
1.2.1 La composizione
verticale
1.2.1.1 L’interlinea
Come non si deve cambiare il tempo in modo arbitrario nella musica, così nella tipografia non
si deve modificare a caso l’interlinea. L’interlinea
viene definita come il bianco tipografico che serve a distanziare le righe di testo, più precisamente calcolato prendendo come riferimento le linee
base delle due righe.
Significativa è l’origine del termine inglese per
indicare l’interlinea: “leading”, che fa riferimento
alla tradizione della stampa manuale, quando due
barre di piombo venivano inserite manualmente
nelle presse meccaniche per separare le righe e
per aggiungere e ridistribuire lo spazio verticale
tra di esse.
In tipometria l’interlinea si identifica con il secondo valore numerico dopo l’indicazione del
corpo (C. n°/n°, esempio C. 9/9 indica che il testo è in corpo 9 e le righe hanno la stessa inter-
12
linea del corpo).
Una corretta interlinea è utile per favorire il movimento dell’occhio da una riga all’altra.
Le righe troppo ravvicinate affaticano la lettura
e una certa interlinea è necessaria anche per assicurarsi che le ascendenti e le discendenti non si
scontrino tra loro.
Tuttavia un eccesso provocherebbe un “annacquamento” estetico del testo rendendolo sparpagliato sulla pagina e provocherebbe, nuovamente,
una lettura difficoltosa in quanto costringerebbe
l’occhio ad aumentare il numero di sbalzi e di fissazioni da una riga a quella successiva.
Per questo motivo è stato necessario ricercare
una regola per ottenere un’interlinea ottimale,
equilibrata ed estetica.
13
Nella tipografia tradizionale l’interlinea ottimale
è considerata come il 120% del corpo del testo.
Per caratteri standard con corpo 10, 11, 12 punti,
sono preferibili 2 punti di leading.
Se l’interlinea al 120% è la regola d’arte per la
stampa, recentemente si sta affermando
come pratica empirica per il web l’opzione tra il
140% e il 160% del corpo del testo.
14
1.2.2 La composizione
orizzontale
Una metafora antica: il pensiero è un filo e chi
racconta un filatore, ma il vero narratore, il poeta, è un tessitore.
La scrittura trasforma questa antica astrazione
legata all’udito in un fatto nuovo, legato alla vista.
Il dispositivo utilizzato per la composizione tipografica, si tratta di un computer o di un compositoio manuale, funziona come un telaio. Il tipografo, come il tessitore, cerca di tessere il testo
nel modo più uniforme possibile.
Le lettere ben disegnate danno alla pagina una
struttura vivace e uniforme, invece una spaziatura grossolana fra lettere, parole e linee di testo
può rovinare questo tessuto.
Un’altra antica metafora: la densità della tessitura in una pagina scritta o a stampa viene chiamata colore in riferimento al valore chiaroscurale
della massa di lettere e parole sulla pagina.
15
Una volta che le esigenze di leggibilità e ordine
logico sono soddisfatte, la normale cura del tipografo si indirizza sull’uniformità del colore che
dipende dalla spaziatura tra le lettere (kerning),
spaziatura tra le parole (tracking) e la spaziatura
tra le linee di testo (interlinea).
Nessuno di questi aspetti sono indipendenti tra
loro e sono fondamentali per ottenere una composizione tipografica ottimale.vrebbero essere
disegnate in funzione degli spazi bianchi e quindi
del ritmo che creano.
Inoltre, poiché le lettere non esistono di per sé
ma solo per creare parole, è sull’unità base della
parola.
16
1.2.2.1 Kerning
In ambito tipografico, con il termine crenatura,
noto anche conl’equivalente inglese kerning, si
indica la riduzione dello spazio in eccesso fra
coppie di caratteri, attuata al fine di eliminare
spazi bianchi antiestetici e dare un aspetto più
omogeneo al testo.
I caratteri digitali attualmente diffusi possiedono
quasi tutti intrinsecamente le cosiddette tavole di
crenatura (kerning table) che stabiliscono possibili riduzioni o ampliamenti della spaziatura per
ogni possibile accostamento di lettere, numeri e
simboli. Le tavole di crenatura sono una componente di routine di tutte le font realizzate con
cura, tuttavia, nel digitale, è necessario apportare degli aggiustamenti manuali per equilibrare
gli spazi negativi tra alcune combinazioni di lettere per adattarsi a stili ed esigenze individuali.
L’obiettivo del kerning è quello di creare una
texture e un bilanciamento adeguato tra tutti i
caratteri, seguendo alcuni principi basilari: è im-
17
portante comprendere la relazione spaziale tra
caratteri con lati dritti e arrotondati (la distanza
tra un elemento diritto e uno tondo potrebbe essere leggermente inferiore rispetto a quella tra
due elementi dritti); forme di lettere simili hanno simile spaziatura; è fondamentale comunque
la coerenza. In generale progettando una font si
tende a restringere lo spazio compreso tra le lettere ‘A, T, V, W’ e ‘Y’ seguite da minuscole senza
ascendenti, oppure tra le lettere ‘r, v, w’ e ‘y’ seguite da segni di punteggiatura.
18
1.2.2.2 Tracking
Fra lettera e lettera solo una buona spaziatura
può fare sì che una parola risulti otticamente
perfetta, cioè piacevole all’occhio, e ne aumenti la
leggibilità.La spaziatura tra i caratteri deve essere inferiore a quella che vi è tra una parola e
l’altra. Se i due valori fossero vicini, la lettura
sarebbe difficoltosa e affaticante, perché il lettore
dovrebbe prestare molta attenzione quando finisce una parola e finizia quella successiva.
Espressione attribuita al
tipografo americano F.
Goudy (1865-1947).
«Chiunque spazi il minuscolo sarebbe come un ladro
di pecore.» [TdA].
Il tracking spazia complessivamente il bianco di una o più
parole ed è utile quando siamo
in presenza di una sequenza
di maiuscole o maiuscoletto
nei titoli o nelle intestazioni.
Il tracking è spesso usato per
contenere una riga di testo
troppo larga (tracking negativo) e gli operatori del settore non vedono di buon occhio il corrispettivo positivo:
«Anyone who would letterspace
19
lowercase would steal sheep». Questa espressione,
attribuita erroneamente al tipografo americano
Goudy dà l’idea di cosa significhi per l’esperto
aggiungere spazio tra le lettere di un testo minuscolo oltre quello che il disegnatore della font
ha già impostato: un atto sacrilego e un crimine
tipografico. L’argomento rimane comunque oggetto di numerosi dibattiti.
Ellen Lupton afferma: «Design is as much an act of
spacing as an act of marking. The typographer’s art
concerns not only the positive grain of letterforms,
but the negative gaps between and around them».
Ellen Lupton. “ Thinking With Type” (http://
elupton.com/).
2010.
«Il design è tanto un atto di
spazio come un atto di marcatura. L’arte del tipografo
riguarda non solo il grano
positivo letterforms, ma il
divario negativo tra e intorno a loro.» [TdA].
20
1.2.2.3 Giustezza
La giustezza è la lunghezza della linea di testo
e si misura in righe tipografiche o in centimetri.
La giustezza stabilisce la lunghezza massima
delle righe tipografiche. Ciò non vuol dire che la
riga di testo debba essere lunga quanto la giustezza (questo si verifica solo nella composizione
a blocchetto). Infatti essa deve avere una misura variabile in base all’allineamento del testo, in
caso contrario si avrebbe una difficoltà di lettura
da parte del lettore poiché l’occhio si posa su un
gruppo di parole. Questo fenomeno è stato definito “fissamento”.Tra un fissamento e un altro
l’occhio riposerebbe per un quinto di secondo.
La “fatica ottica” è il seguire una linea di stampa
dall’inizio alla fine, passando poi alla linea sottostante. Il numero di fissamenti è dunque dato
dalla lunghezza della linea stampata (giustezza),
quindi da questo concetto si potrebbe dedurre
che più corta è la giustezza della linea di testo,
più facile ne risulta la lettura; ma non è così infatti la giustezza va sempre rapportata al corpo del
carattere, per evitare fastidiosi “a capo” di parola.
21
Un buon metodo per stabilire la lunghezza della
linea è calcolare, da una volta e mezzo a due
volte, la lunghezza che si ottiene componendo
l’alfabeto minuscolo del carattere desiderato.
Per una corretta giustezza, quindi, bisogna ricordare che:
I caratteri con grazie danno i migliori risultati
con 9-12 parole per riga
I caratteri bastoni hanno bisogno di righe da 7
a 10 parole
I caratteri con occhio grande accettano righe
più lunghe, mentre quelli con l’occhio piccolo
impongono meno parole per riga
Il numero di parole contenute in una riga può
essere modificato aumentando o diminuendo il
corpo, cambiando carattere o diminuendo la giustezza
Quando si è costretti a lavorare su giustezze
più lunghe bisognerà aumentare lo spazio
22
interlineare per evitare confusioni ed inciampi
nel passaggio della lettura da una linea a quella sottostantecorpo, cambiando carattere o diminuendo la giustezza.
23
1.2.3 La gerarchia
1.2.3.1 Il corpo
La definizione esatta dell’altezza totale del carattere, compresa fra la spalla superiore e la
spalla inferiore, è il corpo che viene misurato in
punti tipografici (Didot per il sistema europeo;
Pica per quello anglosassone). I due sistemi di
misura sono basati sull’unità di misura di
un punto tipografico, che corrisponde per il Didot a mm. 0,376, e per il Pica a mm. 0,351;
pertanto il secondo è leggermente più piccolo del
primo.
ll punto Didot, introdotto nel XVIII secolo dal
parigino François-Ambroise Didot , corrisponde
a 1/72 del pollice reale francese. Con la definizione del metro, nel 1799 il punto Didot venne
ridefinito come 125/332472 di metro, pari a
24
0,3759715104 mm.
Questo valore uquivale, sempre tipograficamente, alla dimensione costante di tutto l’alfabeto.
Dodici punti tipografici, di ambedue i sistemi, costituiscono la riga tipografica chiamata Cicero nel
sistema Didot e riga Pica nel sistema Pica.
È buona regola scegliere la dimensione del corpo
del testo in base al tipo di lavoro:
note a piè di pagina: da 6 a 8 punti
didascalia: da 8 a 9 punti
testi: da 10 a 14 punti in base al tipo di stampato
sottotitoli: da 14 punti e oltre in rapporto con il
corpo del testo
titoli: da 24 punti e oltre in rapporto con il corpo dei sottotitoli
occhielli: da 10 a 14 punti in rapporto con il
corpo dei titoli
La struttura di un testo per il web può essere sintetizzata con una gradinata mostrata in figura (numero) dove ogni gradino rappresenta un aiuto per lettore a comprendere il contenuto della pagina web,
con livelli di dettaglio via via crescenti.
25
Il titolo di un testo ha la funzione fondamentale di
sintetizzare all’ennesima potenza il contenuto e di
attrarre l’attenzione; il sottotitolo di solito serve per
fornire ulteriori sintetici elementi di comprensione
al lettore; l’abstract fornisce, di solito in non più di
200-250 caratteri, la sintesi vera e propria del contenuto testuale. Link ad altre pagine web o documenti
da scaricare rappresentano infine gli approfondimenti al contenuto.
Titolo, sottotitolo è abstract sono promesse allettanti per il lettore; promesse che devono essere
mantenute con il testo vero e proprio.
002
002. Scala discendente
degli elementi che compongono la gerarchia del
testo.
26
1.2.3.2 Paragrafi e allineamenti
Quando si parla di creare un sito per il web, si
pensa soprattutto alla progettazione e alla realizzazione dell’aspetto grafico. Si dimentica spesso
che anche la tipografia, ovvero la tecnica della
disposizione dei caratteri, ha un valore visivo, e
non solo verbale: infatti il lettore prima scansiona
le forme nella pagina e poi eventualmente decide
di leggere il contenuto. In questo senso l’utente
stabilisce quasi inconsciamente se approcciare la
lettura del testo o meno in base alla convenienza
e l’attrazione del testo.
Le stesse tecniche e convinzioni della tipografia
che sono applicate per la stampa vengono adottate anche per Internet, però il risultato finale,
come viene reso il testo, è diverso poiché diverso
è il mezzo usato.
Un modo facile per attirare l’attenzione dell’utente durante la scansione iniziale di una pagina
Web è aggiungendo dell’enfasi tipografica, attraverso degli stili, creando anche un testo interessante da vedere.
Il grassetto è un ottimo modo per dare enfasi
27
perché il colore del testo in grassetto contrasta
con il testo semplice. Bisogna fare attenzione,
però, a non creare blocchi troppo grandi in grassetto in quanto ciò non crea un buon grigio tipografico. Il grassetto è efficace soprattutto nei
titoli e sottotitoli.
Il corsivo, invece, attira per il suo contrasto di
forma. Convenzionalmente il corsivo viene usato
per i nomi, per parole in lingua straniera, o per
mettere enfasi. Bisogna avere cura a non usare il
corsivo con un font di dimensione troppo piccola
in quanto spesso, per motivi di risoluzione, non
risulta molto leggibile.
Lo spazio bianco attorno al testo è importante
per dare più contrasto al grigio tipografico. Se
questi spazi, chiamati margini, vengono usati con
consistenza, possono dare struttura alla pagina
ma danno anche un interesse particolare mettendo in risalto lo spazio positivo della pagina (testo, grafica) distinguendolo dallo spazio negativo
(sfondo).
28
L’allineamento è il criterio di impaginazione in
cui si dispone un testo pur mantenendo la stessa
giustezza. Il testo puo’ essere impaginato secondo diversi tipi di allineamenti orizzontali:
Bandiera a sinistra
Nelle composizioni a bandiera, particolarmente
utilizzate per testi poetici, didascalie,
note e soprattutto sul web, gli spazi tra le parole
sono sempre uguali e le righe di testo non sono
mai della stessa lunghezza. Il testo è allineato
sul lato sinistro, mentre la parte destra risulta
frastagliata (viceversa nella bandiera rovesciata).
Questa tipologia di allineamento del testo non
accetta la sillabazione: la parola che non può essere contenuta nella riga viene mandata a capo
Epigrafe o Centrato
Generalmente questo tipo di allineamento si presenta con righe di diversa lunghezza, disposte
su un asse centrale e non accetta la sillabazione.
Viene solitamente utilizzato per titoli, targhe e
brevi citazioni.
29
Giustificato o Pacchetto
Nell’allineamento a pacchetto (o a blocchetto) le
righe sono tutte della stessa lunghezza, ma proprio per questo, lo spazio tra le parole non è mai
lo stesso. Questo accade perchè l’ingombro residuo di fine riga, quando non esiste lo spazio fisico
per inserire una parola o la sillabazione impostata non prevede un modo corretto per spezzarla,
viene automaticamente distribuito tra tutti gli
spazi presenti nella riga.
Un altro accorgimento che permette di ottenere
un gradevole aspetto grafico del testo è quello di
evitare la presenza di “orfane” e “vedove”.
Una riga orfana si ha quando l’ultima riga di testo di un paragrafo, solitamente composta da una
parola o da una o più sillabe, slitta all’inizio della pagina o della colonna successiva, rimanendo
così isolata.
30
Una riga vedova si ha, invece, quando la prima
riga di testo di un paragrafo risulta l’ultima della
pagina o della colonna precedente.
31
1.2.3.3 Paratesti e peritesti
Titoli, sottotitoli, didascalie, parole chiave evidenziate all’interno del testo, testi dei link: tutti microtesti in parte già presenti nei prodotti editoriali tradizionali, che però in internet assumono un ruolo
chiave, un’evidenza tutta nuova.
Il paratesto, dal punto di vista linguistico-semiotico è l’insieme di una serie di elementi distinti, testuali e grafici, che sono di contorno a un testo e lo
prolungano nel tempo e nello spazio. Questa frangia, dai limiti non sempre definiti, conferisce al testo
una sua materialità ed una dimensione pragmatica.
Il paratesto viene aggiunto al testo per presentarlo,
nel senso corrente del termine, ma anche nel suo
senso più profondo, renderlo presente, strettamente
collegato alla distribuzione, ricezione e al consumo
del testo.
Le informazioni nel web vivono in uno spazio di
relazioni, per così dire, tridimensionale. Il distacco
dalla dimensione lineare nella scrittura del web è
continuamente affermato da tutta la letteratura, ma,
32
a guardare la fisionomia di molti siti, non sembra
essere stato compreso davvero. Spesso, infatti, si avverte l’assenza di una coerenza tra le informazioni,
che provoca nel lettore un fastidioso senso di spaesamento.
Insomma, il lettore non percepisce la presenza di un
mittente, di un autore, perché chi organizza i dati
viene meno al suo compito, che è quello di distribuire i dati in modo diverso rispetto alla scrittura
lineare.
I segnali paratestuali sono un ottimo aiuto per svolgere correttamente questo compito; sono proprio
gli elementi che permettono al lettore di essere indirizzato e consigliato attraverso l’insieme delle informazioni e danno coerenza logica all’intero sito.
I segnali paratestuali, così come i segnali che incontriamo per le strade, all’interno di un ospedale, del comune o di un museo, sono costituiti da una parte grafica e una linguistica.
Dal punto di vista grafico nei segnali paratestuali è fondamentale la leggibilità, che si può ottenere, ad esempio, usando caratteri di dimensioni non troppo ridotte, garantendo un contrasto deciso tra testo e sfondo,
differenziando un set di caratteri per il testo ed uno,
complementare e leggibile, per i segnali paratestuali.
33
Dal punto di vista linguistico dobbiamo ricordare
che lo scopo principale è quello di aiutare il lettore
ad orientarsi nel minor tempo possibile. Bisognerà
allora che i segnali indichino tanto il contenuto del
testo (di che cosa si parla) che il lettore potrà leggere se segue il collegamento, quanto le caratteristiche
del testo (come è fatto, quanto è lungo, che tipo di
documenti potrà trovare).
I segnali devono però essere semplici e chiari, altrimenti il lettore preferisce non utilizzarli.
Nel caso dei testi scritti è abbastanza facile suddividere il paratesto in due zone editoriali distinte: il
peritesto e l’epitesto.
Il peritesto è la categoria spaziale, la zona, in cui
si raccolgono gli elementi paratestuali vicini al testo: intorno al testo, nello spazio dell’opera, con una
funzione paratestuale quasi esclusivamente di presentazione, di indirizzo e di commento del testo.
È il “nocciolo duro” del paratesto, possiede una forma e generalmente posizioni fisse, quasi canoniche:
all’inizio del testo (frontespizi, titoli, dediche, epigrafi, prefazioni ecc.),
34
in margine (note, chiose ecc.) e alla fine del testo
(postfazioni, tavole, appendici) ma fanno parte del
peritesto anche il formato dell’opera e la sua composizione grafica.
Si definisce epitesto, invece, qualsiasi elemento
paratestuale che non si trovi annesso al testo ma
in relazione con esso, che circoli in qualche modo
in libertà, in uno spazio fisico e sociale virtualmente illimitato. Il luogo dell’epitesto è quindi
ovunque fuori dall’opera, senza che questo pregiudichi un suo eventuale inserimento successivo nel peritesto, come nel caso delle interviste
all’autore che vengono inserite nelle edizioni
successive di un’opera.
Ha una funzione estremamente importante per il testo rispetto al quale può anche essere temporalmente anteriore. Una funzione che non è sempre essenzialmente paratestuale: molte conversazioni spesso
riguardano non tanto l’opera dell’autore, ma la sua
vita, le sue abitudini, la situazione politica.
La sua funzione paratestuale non ha limiti precisi:
in essa il commento dell’opera si diffonde indefinitamente in un discorso biografico, critico o altro, in
35
cui il rapporto con l’opera è spesso indiretto e al limite indistinguibile.
Tutto quello che un autore dice o scrive nella sua
vita, il mondo che lo circonda ecc., può avere una
pertinenza paratestuale.
Si tratta, quindi, di una categoria, estremamente vasta e mutevole e dai contorni spesso non ben definiti.
36
2. Readability e
Legibility
GIBILITÀ
LEG
L
a maggiore difficoltà della lettura a monitor
(circa il 25% più lenta che su carta) ha posto a
designer e progettisti la necessità di trovare dei
modi che potessero bilanciare queste difficoltà.
Secondo la ricerca psicologica, la comprensione
della lettura si compone di due ordini di processi:
1. il primo è percettivo e riguarda la corretta
identificazione e decodifica delle lettere che compongono le parole e le frasi (Legibility)
2. il secondo è di livello più elevato e riguarda
la costruzione di una rappresentazione mentale
del significato del testo, a partire dalla decodifica
svolta dal primo processo (Readability).
Questa rappresentazione mentale viene costruita a partire da rappresentazioni di informazioni
microstrutturali, che vanno ad attivare schemi
e conoscenze. Vengono quindi costruite rappresentazioni macrostrutturali e infine un modello
mentale coerente del significato del testo.
39
È infatti evidente che il monitor va ad incidere
proprio su questo processo, a causa:
cante della carta)
ad affrontare l’atto della lettura su monitor.
Queste difficoltà hanno spinto diverse aziende a
commissionare a designer di talento l’ideazione di
speciali set di caratteri (font-family) che potessero
in qualche modo ovviare alla maggior difficoltà di
lettura che si verifica su monitor. In particolare, la
Microsoft ha commissionato al font-designer Matthew Carter l’ideazione di caratteri che potessero
essere utilizzati per il proprio sistema operativo.
L’operazione aveva un duplice obiettivo:
40
quente che un’azienda commissioni per il suo
logo o per la sua comunicazione aziendale una
famiglia di caratteri personalizzata, che rifletta
la filosofia dell’azienda e la renda unica dal punto
di vista visivo e tipografico.
re che si leggano con facilità su monitor è particolarmente importante per il miglioramento delle proprie interfacce.
Già il sistema operativo Macintosh utilizzava da
tempo per i messaggi di sistema un font particolare, il Chicago, dall’aspetto tozzo e lineare, con
poche linee oblique, facile da leggere anche a risoluzioni piuttosto basse.
Matthew Carter, grazie anche al prezioso contributo di Thomas Rickner, basandosi su lunghi
studi ed esperimenti, ha identificato alcuni parametri che gli hanno consentito di progettare i cosiddetti screen-font per Microsoft: il Verdana (nel
1994) e il Georgia (in seguito).
Se il Verdana nasce per essere usato con il siste-
41
ma operativo Window, il Georgia è stato pensato
come alternativa al Times per il nascente progetto del Microsoft Network.
Entrambi i tipi di caratteri vengono oggi distribuiti e installati gratuitamente assieme al browser
di casa Microsoft, Internet Explorer.
Nel 2010, inoltre, una studio del gruppo di lavoro di Jacob Nielsen ha rilevato che, rispetto ad
un libro stampato, la velocità di lettura di un
testo diminuisce del 6,2% su iPad e del 10,7% su
Kindle.
Ulteriori
informazioni
sulla ricerca effettuata da
Nielsen sono disponibili
al seguente indirizzo:
http://www.useit.com/
alertbox/ipad-kindle-reading.html
42
2.1 Ancoraggi ottici
Su web un testo, prima di essere letto, viene rapidamente “scansionato”, un po’ come avviene
per la prima pagina del quotidiano, che non viene
certo letta dalla prima parola all’ultima, ma viene
scorsa, per trovare argomenti di interesse.
L’evidenza di certi testi (titoli, titoli, grassetti e
link) diventa quindi cruciale per aiutare l’utente
nell’esplorazione della pagina e per trasmettergli
il senso delle gerarchie
Far questo senza creare un disordine insopportabile richiede una buona
padronanza nel campo della tipografia, e soprattutto richiede di resistere alla tentazione di rendere tutto particolarmente importante causando
rumore cognitivo.
In una pagina Web, tutto quello che varia senza
significato, produce rumore.
Un rientro o un disallineamento, un colore o una
dimensione diversi, un movimento inutile, l’assenza di una gerarchia.
43
Tutto questo non solo rende più difficile la lettura e l’individuazione di quanto ci interessa, ma
spesso produce una sensazione di sciatteria.
Proprio perché l’utente non legge sequenzialmente le pagine, ma prima le «scorre» velocemente, è
importante segnalare frasi e parole significative,
in modo da rendere la sua ricerca più soddisfacente e facile. Il segno più semplice di evidenza è
il grassetto, da applicare con parsimonia a singole parole o gruppi di poche parole. La parsimonia
è d’obbligo, perché se si costella una pagina con
troppi bold, questi perdono di efficacia ottenendo
rumore visivo.
Se la frase da valorizzare è piuttosto lunga (una
riga o più) invece del grassetto è preferibile usare
il colore che è un buon elemento di attenzionalità.
In nessun caso si userà la sottolineatura che va
riservata ai link e solo ai link. Da evitare anche
l’uso delle lettere tutte maiuscole, abitudine nata
44
ai tempi delle macchine da scrivere, che non consentivano il grassetto. Le frasi scritte con caratteri tutti maiuscoli sono pesanti e rendono più
difficile la lettura.
Per quanto riguarda gli allineamenti dei testi, sul
web quello ottimale è quello a sinistra o a bandiera. In questo modo la lettura viene facilitata:
tutte le altre forme di giustificazione presentano
inconvenienti.
Il testo centrato e il testo allineato a destra sono
difficili da leggere, perché è difficile trovare automaticamente l’inizio della riga, in quanto non
è in un punto fisso, ma varia dopo ogni a-capo. Il
testo allineato sia a sinistra sia a destra (giustificato) è sconsigliabile perché si formano spazi
bianchi irregolari tra le parole e la lettura risulta
più difficile in quanto sul web non esiste la sillabazione come sui libri e i giornali che attenua
questo problema.
45
2.2 La tipografia utilitaristica
di Stanley Morison
Nel 1929, nel celebre testo First Principles of
Typography, il designer Stanley Morison
enuncia una definizione di tipografia in forte
controtendenza con gli esperimenti virtuosistici
delle avanguardie tipografiche dell’epoca, anteponendo all’estro creativo e ai tentativi di fornire una dimensione visivo/spaziale alla composizione della pagina, la dimensione informativa
e cognitiva; la necessità di facilitare al massimo,
attraverso la composizione tipografica, il lettore
nella comprensione del testo.
Scrive infatti Morison: «L’arte della tipografia
consiste nel disporre correttamente tutti gli elementi
di stampa in vista di un obiettivo ben definito; nel
comporre i caratteri, nel ripartire gli spazi e nel disporre la composizione in modo da facilitare lo sforzo
46
del lettore e la sua comprensione del testo al massimo. L’arte della tipografia è lo strumento appropriato
in vista d’un obiettivo essenzialmente utilitario e che
non è estetico se non accidentalmente, poiché il piacere
degli occhi è raramente la preoccupazione principale
del lettore.
È per questo che, qualunque sia l’intenzione, ogni disposizione tipografica che si frapponga tra l’autore ed
il lettore è sbagliata […]. Poiché la stampa è essenzialmente un mezzo per la moltiplicazione, essa non
deve essere semplicemente buona in sé, ma buona per
uno scopo comune. È nell’essenza stessa della tipografia svolgere un servizio pubblico. […]
La tipografia, ad eccezione della categoria delle edizioni strettamente limitate, esige, a ragione, un rispetto quasi assoluto delle convenzioni».
Spesso contestata per l’eccessiva durezza, questa
definizione non è mai stata ritirata da Morison,
il quale era ben consapevole delle contraddizioni
implicite, ma altrettanto ben convinto del bisogno di riportare al centro del lavoro tipografico
l’immediatezza della comprensione del testo.
47
La tipografia in questo contesto viene quindi
considerata in un’accezione puramente
utilitaristica; le ragioni di questo cambio di prospettiva, rispetto alle sperimentazioni tipografiche contemporanee, vanno in parte anche ricercate nella necessità di porre un solido punto
di ancoraggio nella comunicazione informativa
tramite carta stampata, principale e forse unico
mezzo di diffusione in un’epoca caratterizzata da
profondi cambiamenti storico-politici e culturali.
Significativo in quest’ottica è il lavoro svolto da
Morison nel comporre un nuovo carattere per il
quotidiano Times, che tenesse conto delle specificità del giornale (corpi piccolo e giustezze strette); nasce così il “Times New Roman”, definito
il “carattere del secolo” per la sua straordinaria
leggibilità anche nei corpi piccoli.
48
Così lo descrive Robert Bringhurst:
«Morison possiede un asse umanista ma proporzione
manierista, colore barocco e affilate finiture neoclassiche.»
49
2.3 I principi tipografici di
Bringhurst
«Il compito essenziale del tipografo è interpretare e
comunicare il testo. Il suo tono, il suo tempo, la sua
struttura logica, la sua dimensione fisica: tutto concorre a determinare le possibilità della sua forma tipografica. Il tipografo sta al testo come il regista teatrale sta al copione, o il musicista allo spartito».
Così Bringhurst, in The Elements of Typographic
Style, illustra il rapporto tra il tipografo e il testo.
Nel suo manuale di tipografia, in cui tratta di tipi
di carattere, glifi e della disposizione visuale e
geometrica dei caratteri tipografici, introduce alcuni principi fondamentali che andrebbero seguiti per ottenere un buon uso della tipografia.
50
Secondo l’autore stesso bisogna scoprire la logica
esteriore della tipografia nella logica interna del
testo, in quanto il testo spesso è farcito di titoli
di capitolo, di sezioni, sottotitoli, citazioni, note
al piede di pagina, note finali, tabelle e materiale
illustrativo. Nell’interesse del lettore, ciascuno
di questi elementi richiede una propria forma e
identità tipografica, creando una stratificazione
del testo coerente, distinta e in armonia con il
tutto sul piano formale.
Inoltre, risulta essere importante, la scelta del
carattere tipografico in quanto la forma delle lettere conferisce alle parole e alle frasi un tono, un
timbro, un carattere.
Dalla forma del testo si passa alla forma della pagina così che ogni elemento, ogni relazione fra i
diversi elementi e ogni sfumatura vengono messi
in rilievo e valorizzati. Scegliere la forma da dare
alla pagina e definire la collocazione del testo tipografico al suo interno è paragonato da Bringhurst stesso come “incorniciare e appendere al
muro un dipinto”.
51
Se il testo è lungo e lo spazio è ridotto, o se gli
elementi sono molti, si suggerisce l’utilizzo su
più colonne in quanto la colonna alta di testo è
simbolo di scorrevolezza e spensieratezza. Per
quanto riguarda la forma del testo viene sottolineato il fatto che bisogna dare una forma che
bilancia e contrasta la forma globale della pagina. Nonostante la bellezza della geometria pura,
un blocco di testo perfettamente quadrato su una
pagina quadrata con margini omogenei intorno è
una soluzione che difficilmente incoraggia la lettura, in quanto leggere implica l’orientarsi e il
blocco quadrato di testo su una pagina quadrata
è povero di punti di riferimento e appigli visivi.
Quindi per dare al lettore un senso di direzione
e alla pagina vivacità ed equilibrio, è necessario
rompere questa monotonia e trovare un altro tipo
di bilanciamento.
Infine l’ultimo principio raccomanda di prestare
la massima attenzione anche ai minimi dettagli.
52
3. Le avanguardie
tipografiche
NTAZIONE
SPERIME
G
ià prima dell’invenzione della stampa a caratteri mobili i testi manoscritti erano organizzati all’interno di gabbie tipografiche che, anche
se molto elementari, erano già in grado di prevedere più colonne e una diversificazione del corpo
del testo per i titoli.
A partire dalla stesura della celebre “42 zeilige
Bibel” (Bibbia a quarantadue linee o B42) di Gutenberg in poi, la composizione tipografica ha via
via perfezionato i propri schemi, giungendo alla
definizione di modelli strutturati di organizzazione dei testi, paratesti e peritesti e alla designazione di complesse griglie lineari, basate su
rigidi principi geometrici, mantenendo una complessiva simmetria e razionalità superate solo a
cavallo tra il diciannovesimo e ventesimo secolo,
grazie alla spinta delle avanguardie linguistiche
e poetiche.
La poesia del ventesimo secolo, infatti, ha partecipato in prima linea alla rivoluzione copernicana dei linguaggi, fiancheggiando i vari movimen-
55
ti che si sono succeduti in una sequenza storica
sempre più accelerata. Lo scardinamento della
comunicazione logico-discorsiva diventa il primo
obiettivo del lavoro compiuto all’inizio del secolo
in questa direzione: adeguare la comunicazione
poetica a tecniche capaci di registrare l’accelerazione della vita moderna, la vertigine del soggetto nella storia e le pulsioni di un inconscio
più forte del controllo della pura ragionevolezza.
Tutto concorre perché il poeta senta la letteratura come insufficiente nella sua linearità di scrittura a restituire la complessità del suo rapporto
con la realtà.
La poesia si pone il problema di un superamento
della sua tradizione puramente letteraria e fonda
la possibilità di dare rappresentazione figurativa
alla parola. La poesia visiva nasce dunque dall’affermazione di un bisogno espressivo dello spazio
e del tempo che non vivono separati tra loro.
56
Precedentemente la poesia era il luogo dell’evocazione fantasmatica, della fondazione di un segno che rimandava ad immagini che comunque
esplodevano in un altro spazio, non in quello della pagina, quello mentale del lettore. La poesia in
qualche modo era il frutto di una tradizione tutta
puntata sull’astrazione e non sulla rappresentazione direttamente figurativa dell’immagine. Lo
spazio della poesia era dunque uno spazio metaforico ed invisibile.
Le avanguardie poetiche a cavallo tra il diciannovesimo e il ventesimo secolo tentano, al contrario, di rendere sempre più fisiche le dimensioni
del proprio operare, sotto la spinta di una competizione con l’universo tecnologico teso sempre
più verso l’astrazione e la riproduzione. L’arte
tenta di dare fisicità a se stessa ed anche la poesia si pone il problema di rendere visibili i propri
procedimenti e acquisire una fisicità ed un erotismo che soltanto la fondazione di una dimensione corporale può dare. La poesia visiva, dunque, introduce il corpo dell’arte sul palcoscenico
57
della pagina, dentro la cornice della pagina che
diventa il luogo di un evento fisico, quello della rappresentazione poetica, della messa in scena della dimensione dello spazio e del tempo. Da
qui la deflagrazione della linearità, della pagina e
dell’orizzontalità della scrittura tipografica.
58
3.1 L’estetica tipografica di
Mallarmé
I primi originali esperimenti di rottura dei modelli consolidati di gabbia tipografica si devono
al poeta francese Stéphane Mallarmé, per il quale
la poesia, instaurando degli stati interiori, non
rappresenta qualcosa ma si autorappresenta, per
cui l’atto della produzione del testo diventa un
atto di autoriflessione.
Stéphane Mallarmè (1842
- 1898) è stato un poeta francese, autore di un
corpus alquanto ristretto
di opere in versi e in prosa, attraverso le quali ha
nondimeno rivoluzionato
il linguaggio poetico moderno, grazie a uno stile
innovativo, in cui l’importanza delle relazioni
sonore tra le parole in poesia eguaglia, se non sorpassa, l’importanza dei significati tradizionali delle
parole stesse.
In quest’ottica, la poesia visuale, di cui Mallarmé diventa
di fatto pioniere e caposcuola,
diventa uno strumento privilegiato per questo nuovo tipo
di esperienza, a partire da Un
coup de dés jamais n’ abolira le
hasard (Un colpo di dadi non
abolirà mai il caso) con cui nel
1897 Mallarmé fonda un’estetica tipografica della pagina. Si
tratta della rappresentazione,
59
003
003. Brano tratto da Un
coup de dés jamais n’ abolira le hasard (Un colpo
di dadi non abolirà mai il
caso) [TdA] di S. Mallarmè - 1897.
60
anche grafica, del naufragio di chi ha voluto sfidare il caso. In questo testo lo spazio prende il
posto del tempo, mentre la lettura appropriata
non può più essere quella alfabetica. La composizione viene accostata, secondo il poeta francese,
alla stesura di una partitura musicale.
Per Mallarmé poesia e comunicazione si separano. La frase deve essere rotta nella sua linearità
discorsiva e ridotta alle sue strutture portanti,
meglio ancora al frammento. Bisogna elidere le
connessioni più ovvie e scontate. I periodi devono diventare frasi atomizzate, in modo che ogni
parola, resa il più possibile indipendente sintatticamente, riluca a sé della propria luce. È una
lotta tormentosa verso l’essenziale, fino ai limiti
della pagina bianca e del silenzio, che diviene l’unica forma espressiva adeguata all’assoluto.
61
004
004. Particolare del frontespizio del volume Un
coup de dés jamais n’ abolira le hasard di S. Mallarmè
-1897.
62
3.2 Il futurismo italiano
Filippo Tommaso Marinetti inaugura l’avanguardia futurista, agli inizi del ventesimo secolo.
Il futurismo italiano aveva l’ambizione di andare al di là della letteratura, rivendicando il sostanziale lirismo della materia stessa, senza più
mediazioni, riducendo la poesia ai suoi elementi
fisici costitutivi, cioè alla voce e al segno.
Le invenzioni capitali del movimento futurista
- destinate a lasciare il segno anche al di là del
movimento stesso - quali l’astrattismo, la simultaneità e l’immaginazione senza fili, trovano diretta realizzazione nei componimenti in “Parole in
libertà”, tecnica poetica espressiva del tutto nuova, in cui è distrutta la sintassi, abolita la punteggiatura e in cui si ricorre anche ad artifici verbovisivi. In questo ambiente il testo da una parte
diventa una sorta di spartito, traccia, guida per
la declamazione, dall’altra viene violentemente
ridotto a composizione grafica, tramite un uso
senza residui di una scrittura “oggettipografica”,
dando luogo ad una vera e propria rivoluzione
63
tipografica. Come afferma lo stesso Marinetti nel
manifesto del 1913: “La mia rivoluzione è diretta
contro la così detta armonia tipografica della pagina,
che è contraria al flusso e al riflusso, ai sobbalzi e agli
scoppi dello stile che scorre nella pagina stessa”.
Sotto la spinta del futurismo la pagina diventa
il luogo della deflagrazione della parola, il punto di esplosione dell’unità sintattica e semantica
del linguaggio. La pagina diventa palcoscenico di
una spazialità puramente bidimensionale su cui
rimbalza il senso della parola, il luogo di scorri-
Filippo Tommaso Marinetti (1876 - 1944) è stata una poeta, scrittore e
drammaturgo italiano.
È conosciuto soprattutto
come il fondatore del movimento futurista, la prima avanguardia storica
italiana del Novecento.
mento orizzontale e verticale
del linguaggio che si sgretola
fino alle proprie particelle infinitesimali, ai propri elementi costitutivi ed atomici, alla
onomatopea.
Ecco allora la poesia entrare in
contatto reale con il problema
della rappresentazione figurati-
64
va, di tradizionale competenza dell’immagine figurativa, sfiorando i generi della pittura e della scultura, della musica e dell’architettura, della scenografia
e del teatro.
La parola acquista in tal modo una forza declamatoria direttamente proporzionale all’incidenza della composizione tipografica ed oggettuale della
pagina.
Lo scardinamento della comunicazione logico-discorsiva ha portato la poesia verso lo sconfinamento
e la rottura della cornice della pagina, verso l’approdo ad una dimensione figurativa che ha significato
proprio la rappresentazione visiva della dimensione spazio-temporale, presa come luogo e momento
dell’evento poetico.
Finalmente la poesia riscopre l’erotismo della composizione, la forza energica di una nuova grammatica elementare, in cui ogni elemento è fisicizzato ed
evidente. Nel corso della sua evoluzione, la poesia
visiva ha sviluppato una strategia progressiva fino
ad arrivare a fondare una propria dimensione plastica, una sorta di tridimensionalità inusitata. In questo senso la parola poetica conquista tutto lo spazio
espressivo, occupando tutti gli interstizi che vanno
65
dalla sperimentazione tipografica all’indicibilità di
pulsioni che riguardano il soggetto.
005
66
006
67
007
005. Copertina del volume “Zang Tumb Tumb”.
F.T. Marinetti, 1914.
006. F.T. Marinetti,
“Montagne + Vallate +
Strade x Joffre”, 1915.
007. F.T. Marinetti, Parole in libertà, 1919.
68
3.3 Il futurismo russo e Iliazd
Il futurista russo Ilja Zdanevich (anche noto con
lo pseuodnimo di “Iliazd”) collabora alla creazione dello Zaum, un linguaggio in cui parole
ed espressioni artistiche rivestono un ruolo che
trascende l’utilitarismo. I precetti alla base dello
Zaum affermavano che la Parola in quanto tale
non si esaurisce nei significati della comunicazione esplicita, e che se l’arte si limita a trucchi
Ilia Mikhailovich Zdanevich (1894 -1975), meglio
conosciuto con lo pseudonimo di “Iliazd”, è stato uno scrittore e artista
visivo georgiano e francese. Ha fatto parte del
movimento Dada e della
corrente Futurista. Viene
riconosciuto come un innovatore assoluto nell’utilizzo della tipografia.
verbali semplicemente esteriori, adottati per piegare il
linguaggio ai fini dell’artista,
non ne rivela la potenza trasformatrice della realtà. “Inseguire la parola è un’avventura
imprevedibile, un viaggio tra
coscienza e inconscio: non si
può ridurre la poesia a un’officina di montaggio e smontaggio di enunciati, sia pure
trasgressivi, secondo un prontuario di accorgimenti tecnici.
69
La lingua esprime al di là di quanto noi vogliamo
farle esprimere. Bisogna saper ascoltare le parole,
i suoni, contemplare i segni, perché possano creare linguaggio, dandoci una nuova comprensione
della realtà: le parole sprigionano echi, chiamano
nuove parole”. La pagina diventa quindi luogo di
una sperimentazione volta a far scaturire un significato anche solo dall’accostamento dei segni
tipografici. L’uso dei fregi tipografici per costruire le lettere e creare varie opportunità di scelta dei significati visivi e verbali, a dispetto delle convenzioni dell’impaginazione, contribusce a
valorizzare il potenziale espressivo della pagina.
Inoltre non solo non sono composti in un carattere definito (e tantomeno nel carattere del corpo
del testo), ma la cifra delle decine viene ad essere
in un carattere diverso da quella delle unità.
70
Per l’occhio può risultare spiazzante, costretti
come si è a vagare per cercare il numero invece che localizzarlo sempre nella stessa posizione,
ma è questo un effetto che rientra perfettamente
negli intenti di Iliazd. Si tratta di una sperimentazione in cui evidentemente la coerenza progettuale supera in importanza la leggibilità.
71
008
008. Iliazd. Asel naprakat.
1919.
72
3.4 Il Dadaismo e K. Schwitters
Celebre per le sue audacie tipografiche è il movimento culturale Dadaista, che attraverso il totale rifiuto degli standard artistici tradizionali,
estende il vocabolario visivo del Futurismo, allontanando la tipografia da un uso consueto per
spingerlo verso una dimensione visiva che inserisce elementi di completa irrazionalità e libertà
creativa senza freni. Nei lavori del designer te-
Kurt Schwitters (1887 –
1948) è stato un pittore
e artista tedesco attivo in
diverse correnti del suo
tempo, tra cui il dadaismo, il costruttivismo e il
surrealismo. Precursore
del ready-made e della tecnica del collage.
desco Kurt Schwitters vengono combinati solidi principi di
progettazione visiva con elementi di casualità e di nonsense, definendo il linguaggio poetico attraverso l’interazione
degli elementi che lo compongono: lettere, sillabe, parole e
frasi.
Negli anni ’20 Schwitters subisce l’influenza del lavoro dei
costruttivisti russi e dei ne-
73
oplasticisti olandesi, specialmente di Theo van
Doesburg, con cui collabora alla realizzazione
della singolare opera “Die Scheuche Marchen”.
009
Theo van Doesburg,
pseudonimo di Christian
Emil Marie Küpper (1883
- 1931), fu un autodidatta,
teorico dell’architettura e
delle arti figurative, pittore, architetto olandese.
009. El Lissitzky, K.
Schwitters. Merz Magazine cover. 1924.
74
010
010. K. Schwitters, T. van
Doesburg. Die Scheuche.
Märchen. 1925.
75
3.5 I calligrammi di Apollinaire
Il poeta francese Guillaume Apollinaire pubblica
nel 1918 i Calligrammes, dei veri e propri componimenti scritti appositamente per formare un
disegno che rappresenta il soggetto della poesia
stessa, tendendo così ad una rappresentazione simultanea e sintetica del reale e verso l’esplorazione delle possibilità espressive del segno grafico.
“Calligramma” è una parola creata dal poeta stesso per definire le sue composizioni poetiche fi-
Guillaume Apollinaire,
pseoduonimo di Wilhelm
Apollinaris de Waz-Kostrowicky (1880 - 1918),
è stato un poeta, scrittore,
critico d’arte e drammaturgo francese; partecipò
a quasi tutti i movimenti
d’avanguardia dei primi
anni del Novecento, divenendo il teorico del movimento pittorico cubista e
avendo contatti con molti
futuristi. Fu sepolto nel
cimitero di Père Lachaise.
gurate e non c’è dubbio che
Apollinaire si riconnetta alla
tradizione antica dei technopaegnia e dei carmina figurata, ma il poeta mette in opera
una pratica della mescolanza,
dell’associazione di eterogenei, della dissonanza, realizzando una sorta di umorismo
76
lirico in cui i segni del familiare e dell’estraneo,
dell’attualità e della preistoria, sono messi in
cortocircuito. “Per me - scrisse Apollinaire - un
calligramma è un insieme di segno, disegno e
pensiero. Esso rappresenta la via più corta per
esprimere un concetto in termini materiali e per
costringere l’occhio ad accettare una visione globale della parola scritta”.
77
011
011, 012. G. Apollinaire.
Calligrammes. 1918.
012
78
3.6 Il costruttivismo russo e
El Lisitskij
Fondamentale è la figura di El Lisitskij, pittore,
fotografo e grafico russo, legato al movimento
costruttivista, che si distingue per diversi esempi di progetti grafici editoriali, soprattutto legati
alla propaganda comunista, che utilizzavano la
decostruzione della gabbia tipografica tradizionale come mezzo per restituire al testo una di-
El Lissitzky, pseudonimo di Lazar’ (o Eliezer)
Markovic Lisickij (1890
-1941), è stato un pittore, fotografo, tipografo
architetto e grafico russo. Esponente dell’avanguardia russa, aderì dapprima alla corrente del
suprematismo e successicamente si unì al movimento costruttivista.
Adoperò le tecniche del
fotomontaggio e del collage, molto spesso a scopo propagandistico per
l’Unione Sovietica.
mensione visiva.
Nel 1923 El Lisitskij collabora
con il poeta russo Majakovskij
per produrre il libro chiamato
“Ad alta voce”. Il libro è realizzato con una struttura a rubrica telefonica, interamente in
bianco, nero e rosso; le parole
sono quasi nulle al contrario
dei simboli che popolano le
pagine: la parola dunque subisce una metamorfosi e diventa simbolo astratto. Il libro,
79
che contiene alcune poesie dello stesso Majakovskij, è stato progettato in modo da restituire
la programmazione visuale dell’oggetto totale,
in quanto il suo lavoro si basava sull’unificazione
delle regole matematiche e quelle architettoniche
unite all’arte della pittura e della grafica. Ogni
simbolo sulla pagina, quindi, è caratterizzato da
una fortissima simbologia e allegoria visiva.
Nel 1925, nel suo volume Gli ismi dell’arte, El
Lisitskij propone un testo che spicca per l’uso
originale di una gabbia tipografica a struttura
modulare, per realizzare la quale Lisitzky ha utilizzato carta millimetrata e ha fatto in modo che
alcune delle linee della gabbia, di solito immaginarie, fossero evidenti all’interno delle pagine,
come esperimento volto a sovvertire il tradizionale ruolo delle linee della griglia tipografica,
non più elementi virtuali ma parti presenti di un
continuum visivo.
80
El Lisitskij afferma: «Le mie pagine stanno alle
poesie in un rapporto forse analogo a quello del
pianoforte che accompagna il violino. Come per
il poeta dal pensiero e dal suono si forma l’immagine unitaria, la poesia, così io ho voluto creare
un’unità equivalente con la poesia e gli elementi
tipografici.»
81
013
013. El Lisitskij. Ad alta
voce. 1923.
82
3.7 Il neoplasticismo olandese
A differenza degli altri Paesi dove la grafica - e
quindi la tipografia - ha avuto innovatori che per
formazione artistica provenivano dalla pittura o
da arti limitrofe, in Olanda la nuova disciplina
trae le sue origini direttamente dall’esperienza
architettonica del Neoplasticismo.
Neoplasticismo è un termine che comparve per la
prima volta nell’ottobre del 1917 con la pubbli-
Le ricerche degli artisti
che aderirono al De Stijl
si applicarono alla definizione di un linguaggio che, libero da ogni
vincolo contenutistico e
comune a tutte le arti, si
risolvesse in un equilibrio
puramente visivo, capace
di esercitare un’influenza
positiva sulla vita sociale;
la loro sperimentazione
rappresentava un superamento dai codici formali
del classicismo e teorizzava l’asimmetria e la disarmonia emancipandosi
dalla prospettiva.
cazione del primo numero della rivista olandese De Stijl; il
termine fu utilizzato successivamente da Theo van Doesburg e da Piet Mondrian,
nella pubblicazione del Manifesto De Stijl, per descrivere la
concezione artistica astratta,
essenziale e geometrica della
corrente neoplasticista.
Le ricerche di artisti visivi
come Theo van Doesburg e
Piet Zwart in Olanda e Kurt
83
Schwitters e Kate Steinitz in Germania, si applicarono alla definizione di un linguaggio che,
libero da ogni vincolo contenutistico e comune
a tutte le arti, si risolvesse in un equilibrio puramente visivo, capace di esercitare un’influenza
positiva sulla vita sociale.
Il movimento esprime il linguaggio della scomposizione quadrimensionale, che nasce già in
pittura con la nuova grammatica del cubismo;
rappresenta un superamento dai codici formali
del classicismo e teorizza l’asimmetria e la disarmonia emancipandosi dalla prospettiva, diviene
nello stesso tempo un metodo progettuale e di
lettura critica delle opere architettoniche anche
del passato. La tematica neoplastica, nella sua
analisi, scava nel profondo di una progettazione
destrutturalizzandola ed andando a ricercarne le
condizioni e le basi creatrici, i caratteri e le essenze di valore.
84
La composizione tipografica avviene manualmente, i progettisti utilizzano tutti gli elementi a loro
disposizione, compresi i punzoni degli spazi vuoti,
con i quali realizzano le prime forme modulari, i filetti tipografici e tutti gli elementi della pagina.
014
85
015
014. K. Schwitters, K.
Steinitz, T. van Doesburg,
P. Vogt. Die Scheuche (The
Scarecrow). 1925.
015. P. Zwart. Copertina.
1931.
86
3.8 Il Bauhaus e L. Moholy-Nagy
A partire dalla metà degli anni ’20, all’interno della celeberrima scuola di arte e design del
Bauhaus, materie fino ad allora considerate di secondo piano, come la grafica e la fotografia, acquistano grande importanza. Fondamentale il
pensiero del pittore e fotografo ungherese László
Moholy-Nagy, in cui si afferma che «La tipografia deve comunicare in modo chiaro e nella forma
Il Bauhaus è stata una
scuola di architettura,
arte e design che operò in
Germania tra il 1919 e il
1933. Rappresentò il punto di riferimento per tutti
i movimenti d’innovazione nel campo del design
e dell’architettura moderna. I suoi insegnanti,
appartenenti a diverse
nazionalità, furono figure
di primissimo piano della cultura europea e l’esperienza didattica della
scuola influirà profondamente sull’insegnamento
artistico e tecnico fino ad
oggi.
più vivace possibile. La chiarezza va particolarmente accentuata, in quanto è l’essenza della stampa moderna, in
contrasto con l’antica scrittura decorativa. […] I caratteri
non devono essere deformati
e costretti all’interno di una
forma predeterminata». Nagy
non fu l’unico artista che tentò di elevare la comunicazione
tipografica al livello delle arti
figurative e dell’architettura,
87
ma in quanto insegnante al Bauhaus ebbe un’importanza particolare. Tra le sue principali opere
grafiche va ricordata la collana di libri pubblicata dal Bauhaus a partire dal 1923 («Bauhausbucher»). Gli elementi della pagina (i filetti, i grandi punti e i blocchi di testo, il colore e lo spazio
bianco) sono organizzati asimmetricamente intorno a gabbie modulari - in opposizione all’organizzazione tradizionale in gabbie lineari - ed
evocano i dipinti di Van Doesburg e Mondrian.
Questa composizione modulare è evidente in particolare nell’ottavo libro della collana, Malerei, Photographie, Film (tradotto in italiano come Pittura,
fotografia, film ), dello stesso Moholy-Nagy, uscito
nel 1925, in cui l’autore rivendicava per la fotografia un ruolo centrale nella nuova rappresentazione
voluta dall’artista/insegnante.
88
Il numero di pagina, pur nella sobrietà di una
posizione classica (in basso, all’esterno della pagina), viene a sua volta ritagliato in un piccolo
modulo a sé stante, separato da una netta riga
orizzontale nera dal resto degli elementi della
pagina.
Rimanendo elemento di orientamento all’interno
della pubblicazione, il numero riesce comunque a
incorporare gli ideali del Bauhaus. È significativo che il numero di pagina mantenga la propria
funzione guida, poiché il Bauhaus crea una tipografia che, di fronte alle esigenze commerciali,
abbandona le affermazioni artistiche più stridenti del futurismo prima e di Dada poi, della tipografia di De Stijl e del costruttivismo.
Invece di presentarsi come manifesti ideologici, i
libri del Bauhaus e i successivi lavori di MoholyNagy misero in relazione le idee del tempo con il
concetto di comunicazione di massa. Sperimentazioni sì artistiche, ma che miravano ad ogni modo
a una commercializzazione.
89
016
016. L. Moholy-Nagy.
Hi6ak. 1921.
017. L. Moholy-Nagy.
M a l e re i , P h o t og ra p h i e ,
Film. 1925.
017
90
3.9 H. Werkman
L’opera dell’artista tedesco Hendrik Werman
riflette sul rapporto tra progetto ed esecuzione
manuale, ponendo la sperimentazione tipografica
al servizio dell’autore e della sua ricerca: «Liberare i caratteri dalla tirannia della scrittura.»
I progetti di Werkman non precedevano l’arrangiamento degli elementi tipografici e della stampa, erano parte dello stesso atto estetico.
Hendrik Nicolaas Werkman (1882 - 1945) è stato un artista tedesco ed
uno dei più influenti tipografi e stampatori dell’epoca. Fervido sperimentatore e attivista politico
della stampa clandestina
olandese al tempo dell’occupazione tedesca.
Trattando il carattere come
un elemento artistico di per sé
compiuto, indipendente dalla
sua funzione logica comunicativa, Werkman cominciò a mescolare la stampa tradizionale
di lettere da pressa con una
tecnica in cui la carta era posizionata faccia sopra sul letto
della pressa.
Questo sistema permetteva
alle lettere precedentemente
91
inchiostrate e agli elementi del progetto di essere manipolati dalla mano.
018
018. H. N. Werkman. Copertina dell’ottavo volume della rivista di avanguardia The Next Call.
1923.
92
3.10 J. Tschichold
Come Werkman anche il tedesco Jan Tschichold,
tra i principali teorici della tipografia e della
progettazione del libro del Novecento, rigetta le
convenzioni tipografiche precedentemente accettate, proclamando al contempo nuovi e spesso inflessibili criteri estetici ed anche sociali.
Sviluppa le sue prime ricerche nel campo della
Jan Tschichold (19021974) è stato un tipografo, disegnatore di libri,
insegnante e scrittore tedesco. Viene considerato
uno dei principali esponenti della tipografia modernista.
calligrafia nei primi anni ’20;
subisce però una totale influenza della nuova tipografia
fondata sulla asimmetria e sui
caratteri sans serif, vista per la
prima volta all’esposizione del
Bauhaus di Weimar nel 1923.
Da allora avvia un’attività di
teorico, culminata nella pubblicazione del saggio Die Neue
Typographie (1928), in cui auspica il rifiuto di tutti i carat-
93
teri tedeschi allora in voga e la sostituzione con
i sans- serif.
Per diversi anni Tschichold realizza manifesti,
copertine di libri, pubblicità varie, che rappresentano puri esempi di design asimmetrico, contribuendo a creare un nuovo genere tipografico.
019
019. J. Tschichold. Fim
poster. 1927.
94
3.11 Esoeditoria
Il neologismo esoeditoria indica tutto ciò che è
estranea all’industria editoriale e si riferisce a
tutte quelle esperienze editoriali autonome che
hanno prodotto libri, riviste e manifesti legati ai
movimenti di controcultura o di alternativa culturale che si sono sviluppati tra l’inizio degli anni
sessanta e la fine degli anni settanta in Italia.
Le riviste d’avanguardia rispondono essenzial-
Tra la fine degli anni Sessanta e l’inizio dei Settanta si afferma il concetto di
interdisciplinarità artistica;
un’idea che sviluppa un
modello di arte ibrida,
strumento e veicolo di
diffusione di messaggi e
informazioni al di là del
suo specifico significato,
di arte come medium per
capire la vita. È in questo
clima di democratizzazione delle idee, diffuso grazie anche all’utilizzo del
ciclostile, che nascono e si
sviluppano le riviste della
neo-avanguardia italiana.
mente all’esigenza urgente
di espressione degli ideali di
modificazione dello status quo
che ha caratterizzato gran
parte del Novecento. Le neoavanguardie, nel loro tentativo di stabilire una continuità, se non di ricerca almeno
di intenti, con le avanguardie
storiche di inizio secolo, individuano la rivista come strumento di informazione attiva
e di democratizzazione delle
95
idee, anche grazie all’economicità del processo
di stampa del ciclostile. Nasce così il fenomeno
della guerriglia semiologica, cioè la possibilità di
rispedire al mittente il messaggio dei media ma
rielaborandone i contenuti e le forme estetiche in
modo “sovversivo”.
Caso e necessità sono elementi che condizionano la grafica delle produzioni di esoeditoria; se
la stampa ufficiale può infatti contare su grandi
mezzi, la povertà delle pubblicazioni controculturali diventa invece stimolo a scovare soluzioni
sempre più libere e fantasiose.
L’impossibilità, ad esempio, di utilizzare tipografie attrezzate fa sì che le colonne dei margini non
allineati, l’abbandono delle colonne fisse, delle
gabbie e della fusione dei titoli con il testo e in
generale l’allontanamento dalla simmetria, costi-
96
tuiscano una piacevole alternativa al rigido stile
giornalistico.
Queste libertà si riallacciano più o meno inconsapevolmente all’eversione della rivoluzione tipografica
dei futuristi; ma a fianco delle sperimentazioni che
possono risentire dell’eco delle vecchie avanguardie,
le produzioni underground tendono ad essere vivacemente cromatiche, con un apparato grafico spesso
ricchissimo con una comune grande attenzione agli
aspetti linguistici della composizione tipografica,
considerando la composizione tipografica e il linguaggio come indissolubilmente legati.
La rivista torinese “Geiger”, pubblicata in dieci numeri 1967 e il 1978, è strutturata sotto forma di
antologia, assemblata artigianalmente: nelle sue
pagine, realizzate da vari autori con i supporti e le
tecniche più disparate, trova spazio “la poesia totale” che comprende un’ampia fascia di ricerche dalla
poesia concreta, alla visiva, dall’automatica, alla parasurrealista, a quella impegnata e ideologica.
97
020
020. Copertina di Geiger
n.2, antologia sperimentale. 1968.
021. Copertina del primo
numero di Modulo, antologia di poesia. 1966.
021
98
Modulo è un’antologia di poesia visiva, pubblicata in
una singola uscita, che contiene alcune tra le sperimentazioni tipografiche più importanti del ventennio ‘60 - ‘70.
Pianeta Fresco è la rivista di riferimento per le culture beat e psichedeliche degli anni ‘60 - ‘70, che si
distinse tra le altre per l’innovazione e la cura per la
grafica e la tipografia. Diretta diretta da Fernanda
Pivano con la collaborazione di Allen Ginsberg poteva contare sulla partecipazione di artisti del calibro di Paul McCartney e William Burroughs.
Nel 1969 viene fondata a Firenze la rivista Tèchne,
che nasce in opposizione al potere e alla supremazia
dell’industria editoriale, come strumento di diffusione del pensiero letterario radicale, diventando di
fatto l’organo ufficiale della poesia visiva.
La rivista è strutturata in forma di antologia di contributi scritti, inviati alla redazione da poeti speimentali e artisti di tutto il mondo.
99
022
022. Pagina 20 del primo numero di Pianeta
Fresco. 1967. I primi due
numeri della rivista sono
consultabili integralmente all’indirizzo: http://
pianetafresco.blogspot.
com/.
023. Copertina di Téchne,
vol. 5-6. 1970.
023
100
3.12 Fluxus
Fluxus è un movimento neo-dadaista che nasce
nel 1961 e svolge la maggior parte della sua attività in Germania anche se ad esso aderiscono
numerosi artisti americani. Fluxus rivendica
l’intrinseca artisticità dei gesti più comuni ed
elementari e promuove lo sconfinamento dell’atto creativo nel flusso della vita quotidiana, in
nome di un’arte totale che predilige come am-
Fluxus è un gruppo dichiaratamente neo dadaista che nasce nel 1961 e
svolge la maggior parte
della sua attività in Germania anche se ad esso
aderiscono numerosi artisti americani. I suoi componenti si identificavano
sia con la musica e la poesia sperimentale sia con le
arti visive.
biti elettivi d’espressione soprattutto la musica, la danza,
la poesia, il teatro e la performance. Fluxus conduce, inoltre, innovative sperimentazioni nel campo delle notazioni
grafiche e della tipografia,
utilizzando questi strumenti nel tentativo di fornire una
dimensione visiva alla musica.
Nella sperimentazione tipografica di Fluxus l’attenzione
si sposta sull’impaginazione,
101
che muta continuamente, in modo irriverente,
apparentemente casuale. In realtà si tratta di un
approccio metodico, che focalizza nel processo
piuttosto che nella struttura finale, l’attenzione
del progettista.
024
024. G. Maciunas /
Fluxus. An anthology of
chance operations. 1962.
102
3.13 G. Sandri
Densi di significato, nel campo della poesia visiva e delle sperimentazioni delle neoavanguardie
sugli effetti di senso e nel rapporto tra dinamiche
linguistiche e composizione tipografica, risultano i lavori di singolare compiutezza poetica e visiva di Giovanna Sandri, artista e poeta italiana
della beat generation. Le produzioni della Sandri
rappresentano una vera e propria avventura den-
Giovanna Sandri (19232002) è stata un’artista
ed insegnante italiana.
Poeta della generazione
d’avanguardia degli anni
‘60-’70, ha portato avanti un lavoro di singolare
compiutezza poetica e
visiva. Le sue ricerche si
sono indirizzate sul segno, sulle lettere dell’alfabeto, intese come nuclei
combinatori di energie.
Ha partecipato alle più
importanti mostre nazionali ed internazionali di
poesia visuale.
tro il segno tipografico che diventa elementi narrativo, che
genera una tensione; la poesia
diventa ritmo, il significato
viene percepito, sentito, ma
non c’è tuttavia una codifica
univoca.
Le sue composizioni tipografiche non sono costruite come
delle illustrazioni come in
Apollinaire e neanche secondo una codifica precisa, come
nei Futuristi. Giovanna San-
103
dri mira a recuperare, piuttosto, il lavoro iniziato
da Mallarmè nella eliminazione del “superfluo”
fino a raggiungere la perfetta corrispondenza tra
poesia e ritmo, costruendo immagini della lingua scritta in forma di poesia visuale; in questa,
le parole si riuniscono in strutture d’arte, quale
contrappunto del senso della poesia rapportato
al suo andamento sulla superficie bianca della pagina.
025. G. Sandri. Capitolo
Zero. 1969.
025
104
3.14 D. Carson
David Carson è riconosciuto come uno dei maggiori innovatori nell’uso della tipografia moderna per scopi pubblicitari e commerciali.
Avendo esperienza sia nel mondo del surf che
della grafica, Carson si specializza come grafico
per riviste di surf, skateboard, musica e moda durante tutti gli anni ottanta, ma raggiunge la fama
David Carson (1954) è un
designer statunitense. È
conosciuto per il suo utilizzo innovativo e sperimentale della tipografia.
Ha lavorato con clienti come Pepsi, Ray Ban,
Nike, Microsoft, Armani,
American Airlines, Levi’s,
Sony, Mercedes e gruppi
musicali come i Nine Inch
Nails.
internazionale come direttore
artistico della allora nota rivista di moda giovanile Ray Gun
(1992-1995), dove propone un
uso innovativo e sperimentale della grafica e un massiccio
impiego di caratteri tipografici come elementi puramente
grafici. Il suo stile è precursore di quella che viene definita
“grunge typography”.
105
Nel 1995 pubblica il suo primo libro, End of
Print, che raccoglie diverse sue creazioni, e che
rimane a tutt’oggi il libro di grafica della comunicazione più venduto di tutti i tempi.
026. Copertina di David
Carson per il suo libro
The End of Print. 1995.
026
106
3.15 Web e multimedia
Il mondo del web è diventato naturale teatro di
sperimentazione in ambito tipografico, grazie al
moltiplicarsi, nel corso del tempo, delle possibilità di controllare parametricamente i font.
I primi esempi di sperimentazione e di utilizzo
virtuoso della tipografia in ambito web si devono
ai graphic designer Michael “Mike” Cina e Todd
Purgason, agli inizi degli anni ‘00, attraverso
Mike Cina @ michaelcinaassociates.com/
Todd Purgason @ juxtinteractive.com/
l’utilizzo della tecnologia Macromedia (oggi Adobe) Flash,
all’epoca l’unico tool che consentiva un discreto controllo
nell’utilizzo dei font, soprattutto permettendo di utilizzare liberamente ogni tipo di
carettere.
107
Grazie all’evoluzione del controllo dei font tramite i CSS3 (descritta con dovizia di dettaglio
nel capitolo 4), numerosi sono oggi gli esempi
di siti web che presentano un design tipografico
articolato ed estremamente curato.
Di indubbio interesse risultano infine i Typo Movie, brevi filmati che utilizzano la tipografia come
strumento di rappresentazione visiva e spaziale.
Segnaliamo a questo proposito il pluripremiato
video “The Child”, creato dal graphic designer
Antoine Bardou-Jacquet per il dj francese Alex
Gopher: un interessante lavoro di utilizzo tipografico dove tutta la città di New York, compreso
elementi come persone e finestre, viene riprodotta unicamente con l’utilizzo di caratteri tipografici differenti.
The Child. 2007. http://
youtu.be/w2gQkN9xo8g
108
4. La tipografia e il
web
VAZIONE
INNO
4.1 Una breve timeline
1991: Il World Wide Web viene reso pubblico;
non c’è nessuno standard per l’utilizzo dei font
1995: Netscape crea il tag <font>, standardizzato successivamente in HTML 2
1996: Microsoft inserisce nel core del sistema
operativo dei font adatti al web
1996: CSS1 viene completato, sostituendo di fatto l’utilizzo dei tag HTML di stile; i font possono
essere letti direttamente tra quelli installati nella
macchina dell’utente
1998: CSS2 viene completato, introducendo fondamentali proprietà per il controllo dei font su
web
1999: Internet Explorer 5 viene rilasciato, supportando la proprietà @font-face con i font. eot
111
2005: Viene introdotto sIFR, la prima tecnica di
font-replacement
2009: Safari 3.1, Firefox 3.5 and Opera 10 iniziano il supporto alla proprietà @font-face con i
font .ttf e. otf
2011: continua lo sviluppo dei CSS3, con numerosi interventi riguardo alla tipografia su web
2014: data di attesa per il completamento e il totale supporto di HTML5, che introdurrà diversi
standard per la strutturazione semantica del testo.
112
4.2 Elementi testuali nel web e
gerarchia
I tag HTML detti heading sono utili per suddividere in paragrafi ordinati per importanza i contenuti di una pagina. Ci sono in tutto sei <Hn>,
dove N è un qualsiasi numero tra 1 e 6. Applicare
i tag Heading ad un testo causa l’applicazione di
una misura predeterminata al carattere, che aiuta
l’utente a capire visivamente le diverse importanze, così che H1 è il più grande, H6 il più piccolo. Questi tag sono utili anche per segnalare
agli spider dei motori di ricerca quali parole sono
più importanti di altre all’interno di un testo.
Cfr. http://www.webpagemistakes.ca/headinghierarchy/ (2010)
<H1></H1>: il tag H1 è preposto a segnalare l’argomento
generale della pagina.
Uso degli Heading Tag (Hn):
H2 per titoli delle pagine; H3
per i sottotitoli (abstract) delle pagine H4 o H5 per i testi
delle pagine H5 o H6 per note,
approfondimenti, copyright,
113
nome autore, data pubblicazione.
<P></P> Il paragrafo è l’unità semantica di base
entro cui suddividere un testo.
<SPAN></SPAN> Il tag <span> è utilizzato per
selezionare una parte “in linea” di un documento
HTML per applicarci attributi e stili. Il comportamento di questo tag è in linea perché gli effetti si
verificano nel normale flusso del testo e delle immagini. I tag <span>, che possono essere nidificati,
consentono un notevole grado di controllo e manipolazione di una parte localizzata della pagina web.
<STRONG></STRONG> Quando scriviamo
per il web evidenziamo i termini più importanti
e/o che meritano l’attenzione del lettore tramite
l’utilizzo del grassetto. Il grassetto si può ottenere con due tag, il tag b e il tag strong. Il tag b
114
è deprecato dal W3C che al suo posto ha introdotto il tag
il quale ha un valore semantico
che comunica un’enfasi maggiore sulle keywords
a cui è attribuito.
Questo implica che strong trasmette al lettore,
ma anche ai motori di ricerca, un’importanza significativa rispetto al resto del contenuto testuale per questo và utilizzato in modo oculato per
agevolare la lettura del contenuto e aiutando il
lettore ad “indirizzarsi” su quello che conta particolarmente.
<SMALL></SMALL> Questo Tag viene utilizzato per ridurre la dimensione del carattere compreso tra i suoi Tag di apertura e chiusura.
<ABBR></ABBR> Il tag HTML <abbr> consente agli autori di indicare chiaramente le occorrenze
di abbreviazioni permettendo di fornire informazioni aggiuntive sul significato dell’abbreviazione.
<BLOCKQUOTE></BLOCKQUOTE> Il tag
<blockquote> è utilizzato per indicare le citazioni
115
“lunghe”, cioè citazioni che possono occupare anche
diverse righe.
Il testo racchiuso da blockquote viene generalmente
mostrato con un rientro.
116
4.3 HTML5 e il web semantico
Lo sforzo intrapreso dal W3C è quello di spingere sempre di più ad una maggior “semanticizzazione” del testo in modo che ogni elemento, così
come avviene nella carta stampata, abbia, all’interno di un contesto, la sua caratterizzazione. Va
sottolineato, inoltre, che tutto ciò è finalizzato
anche a migliorare l’accessibilità di un sito: infatti, utilizzando caratterizzazioni tipiche del lin-
Nell’ottobre del 1994
Tim Berners Lee, padre
del Web, fondò al MIT
(Massachusetts Institute
of Technology), in collaborazione con il CERN
(il laboratorio dal quale
proveniva), un’associazione di nome World Wide
Web Consortium (abbreviato W3C), con lo scopo
di migliorare gli esistenti
protocolli e linguaggi per
il World Wide Web, promuovendo degli standard
di utilizzo.
guaggio parlato, per esempio
si permette ai lettori vocali
di rendere più comprensibile
ai non vedenti il testo che vogliono leggere.
I tag di strutturazione dei contenuti: <section>, <article>,
<nav>, <aside>
Il tag <section>, secondo la
definizione presente nella specifica HTML5, rappresenta
una sezione generica di un documento o applicazione. L’ele-
117
mento <section>, in questo contesto, individua un
raggruppamento tematico di contenuti, ed in genere contiene un titolo introduttivo.
Il tag <section> rappresenta un elemento che viene
considerato una sezione a sé stante dall’outliner e
quindi un blocco con dei contenuti univoci che necessitano di un titolo (<hN>) che li riassuma.
Il tag <article> rappresenta una sezione autonoma
in un documento, pagina, applicazione o sito; infatti è potenzialmente ridistribuibile o riutilizzabile, e
quindi ripubblicabile in parte o interamente in diverse pagine. Esso può identificare il post di un forum,
un articolo di una rivista o di un giornale, l’articolo
di un blog, un commento, un widget interattivo, o
qualsiasi cosa che abbia un contenuto indipendente.
Il tag <nav> è uno degli elementi introdotti nelle
specifiche HTML5 di più facile comprensione.
118
Infatti, rappresenta una sezione di una pagina che
contiene link (collegamenti) ad altre pagine o a parti interne dello stesso documento; quindi, in breve,
una sezione contenente link di navigazione.
L’elemento <aside> rappresenta una sezione di
una pagina costituita da informazioni che sono marginalmente correlate al contenuto dell’elemento
padre che la contiene, e che potrebbero essere considerate distinte da quest’ultimo. Questo è ciò che
viene indicato nelle specifiche HTML5, ma è facile
immaginare l’utilità del tag <aside> semplicemente
pensandolo come un contenitore di approfondimento in cui possiamo inserire gruppi di link, pubblicità,
bookmark e così via.
<strong>, <b>, <em>, <i>
L’elemento <strong>, in accordo con le specifiche
HTML5, fornisce al testo “maggiore importanza
per i suoi contenuti”. Quindi il tag <strong> mette il contenuto all’interno di una gerarchia. Con le
nuove specifiche il tag <b> deve essere utilizzato
per fornire al testo uno stile diverso senza dare importanza al contesto; il tag <strong> deve essere
119
utilzzato per assegnare importanza semantica maggiore ad un elemento.
Il tag <i> (italic) crea del testo in corsivo. Dà pertanto importanza tipografica a parole di tipo tecnico, straniere o dialoghi. Il tag <em> invece, si utilizza per attribuire maggiore enfasi ad una porzione
di testo. Serve dunque per infondere all’utente toni
emotivi durante la lettura. Ecco quindi che l’arco
semantico si allarga, dando a questo tag un valore intrinseco che va ben oltre l’aspetto tipografico
prodotto dal corsivo. Mentre <strong> è usato per
creare un gerarchia contestuale, <em> è un semplice modo per enfatizzare qualcosa, allo stesso modo
con cui si pone l’enfasi su una frase mentre si parla.
Secondo le ultime specifiche W3C il tag <i> deve
essere utilizzato per evidenziare un contrasto tra
parole nel testo, mentre il tag <em> per imporre
maggiore enfasi a livello semantico.
http://html5doctor.com/ (2011)
Cfr.
120
4.4 I tipi di carattere nel web
4.4.1 I font web safe
Per lungo tempo i web designer sono stati costretti a fare i conti con il fatto che, se un carattere scelto per il proprio progetto non era installato
sul computer dell’utente che la visualizzava, esso
veniva sostituito con uno di default; così la prospettiva migliore, ma drasticamente limitante, è
quella di utilizzare soltanto i cosiddetti caratte-
Cfr.
http://www.
mightymeta.co.uk/websafe-fonts-cheat-sheet-v3-with-font-face-fontsand-os-breakdown/
(2010)
ri “web-safe”, cioè quei tipi di
carattere, presenti sulla quasi
totalità dei sistemi informatici, che possono garantire una
certa sicurezza sul fatto che
sono stati visualizzati correttamente su tutti i dispositivi.
Il set di caratteri web-safe comprendeva originariamente:
Arial (sans-serif)
Verdana (sans-serif)
Courier New (monospace)
121
Georgia (serif)
Times New Roman (serif)
A partire dal 1998 vennero installati su tutti i sistemi
Microsoft come font di sistema, e quindi considerati
web safe, anche il Trebuchet MS (sans-serif) e il Lucida Console (monospace), quest’ultimo sostituito
su sistema Apple MacOs dall’equivalente Monaco.
4.4.2 La sequenza “font-family”
La proprietà css “font-family” consente di selezionare il tipo di carattere da utilizzare; naturalmente questo font deve essere presente all’interno della macchina dell’utente; in caso contrario
attraverso questa proprietà è possibile selezionare l’ordine di preferenza dei font sostitutivi, in
genere:
< font primario>, <font secondario>, <font alternativo>, <font generico della stessa tipologia>
Ad esempio: font - family: Helvetica, Arial, Tahoma, sans- serif.
122
4.4.3 Font-replacement
Per diverso tempo la soluzione più comune per
utilizzare anche i caratteri non web-safe è stata l’utilizzo di immagini in sostituzione dei testi;
tuttavia questa soluzione presenta diversi svantaggi, in termini implementativi, poiché eventuali modifiche al testo comportano modifiche al file
grafico, in termini di accessibilità agli screen-reader e di ottimizzazione per i motori di ricerca.
Cfr.
http://www.mightymeta.
co.uk/introducing-theweb-safe-font-cheat-sheet/ (2010)
Nel corso degli anni si sono
diffuse diverse tecniche di sostituzione dei font che consentono di incorporare i font
in una pagina web senza utilizzare le immagini.
La prima è sIFR (Scalable
Inman Flash Replacement),
una tecnica che per raggiungere l’obiettivo combina l’uso
di Flash e di JavaScript che,
oltre a presentare alcuni problemi di prestazione, compor-
123
ta i classici problemi legati all’uso della tecnologia Flash e alla disponibilità o meno del Flash
Player.
Cùfon, invece, richiede solo un piccolo script da
inserire nell’head del documento HTML e due
file JavaScript: uno è il motore di rendering e
l’altro è il font convertito in formato Javascript.
È una soluzione molto più rapida rispetto a sIFR
che non comporta problemi di accessibilità; tuttavia il testo, pur essendo completamente accessibile, non è selezionabile.
Molto simile a Cùfon è Typeface, che ha lo svantaggio rispetto al primo di supportare meno tipi
di carattere ma il vantaggio di essere compatibile
con più proprietà CSS.
La tecnica Facelift Image Replacement (FLIR) è
diversa dalle due precedentemente menzionate
poiché utilizza uno script automatico lato server
grazie a PHP e alla libreria GD Image.
124
Anche in questo caso il testo non è selezionabile;
inoltre il risultato è notevolmente inferiore rispetto alle alternative.
Negli ultimi tempi si sono diffusi servizi di fontreplacement cross-browsing basati sulla proprietà css “@font-face” (discussa successivamente)
come Typekit, un prodotto commerciale che fornisce una serie di famiglie di caratteri da usare
sul proprio sito; per utilizzarlo è sufficiente configurare le caratteristiche del carattere tramite
un pannello di amministrazione sul sito del servizio ed inserire dei richiami a degli script javascript esterni nel codice del proprio sito. Il sistema provvederà a sostituire i caratteri tramite
uno script automatico da remoto. Ha l’enorme
vantaggio di lasciare il testo selezionabile; tuttavia la resa talvolta non risulta immediata al
caricamento della pagina, problema noto come
“FOUT”.
Altri servizi simili a Typekit sono quelli offerti da FontDeck, FontSpring, FontSquirrel, Kernest,
Typotheque e Webtype. Questi servizi si distinguo-
125
no tra loro, a seconda dei casi, per non richiedere
l’utilizzo di Javascript, per mettere a disposizione
gratuitamente un set limitato di caratteri o per
offrire un approccio non impostato su un server
esterno, ma basato su dei file da caricare sul proprio server.
Infine è molto interessante il servizio di fontreplacement offerto da Google, denominato per
l’appunto “Google Fonts”.
Questo sistema consente di selezionare un carattere all’interno di una piccola gamma e implementarlo all’interno del proprio sito semplicemente inserendo una riga di codice css all’interno
del nostro sito che richiama la libreria esterna di
Google. I grandi vantaggi sono quelli di richiedere pochissima configurazione e di mantenere
selezionabile il testo; lo svantaggio è quello di
essere costretti a scegliere tra una ristretta gamma di caratteri.
126
4.5 Dimensionamento dei font
La dimensione dei font può essere espressa attraverso diverse unità di misura.
Dimensioni relative:
Cfr.
h t t p : / / w w w. w 3 . o r g /
TR/CSS2/fonts.
html#font-size-props
L’unità di misura em è un’unità di misura scalabile, relativa
all’elemento contenitore, che
permette di incrementare e ridurre progressivamente i font
su schermo, mantenendo però
omogenee le dimensioni e le
proporzioni dei font. Viene
spesso utilizzata spesso nelle
pagine web ottimizzate per la
lettura su dispositivi mobile.
127
L’unità di misura ex calcola la dimensione a partire non dalla grandezza di default impostata dal
browser ma dalla grandezza di base con cui il carattere è stato disegnato dal progettista; in particolare
viene calcolata l’altezza del quadrato che contiene il
carattere “x”.
L’unità di misura in px, forse la più utilizzata, dipende dalla risoluzione dello schermo che visualizza la
pagina e rappresenta una rigida rappresentazione
del progetto del designer.
Dimensioni assolute:
Inoltre la proprietà font-size dei CSS supporta nativamente anche un set di 8 valori predefiniti: (xxsmall | x-small | small | medium | large | x-large
128
| xx-large | inherit ) che, come chiaramente indicato dal nome, impostano la dimensione dei caratteri
specificando se il carattere debba essere estremamente piccolo, molto piccolo, piccolo, medio, grande, molto grande, estremamente grande o se debba
essere ereditato dall’elemento contenitore.
Infine la dimensione dei caratteri può anche essere
espressa in valori percentuali; in questo caso la dimensione sarà calcolata a partire dalla grandezza
relativa o assoluta impostata nell’elemento genitore; nel caso non ne sia impostata nessuna, il valore
viene calcolato a partire dalla dimensione di default
del browser, tipicamente fissata a 16px.
129
4.6 Attributi dei font nel web
4.6.1 La consistenza del carattere
La proprietà css font-weight serve a definire la
consistenza o “peso” visivo del testo e accetta
come argomenti:
font-weight: normal | bold | bolder | lighter |
100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 |
900 | inherit
normal è il valore di defult ed equivale a 400, mentre bold (grassetto) corrisponde a 700; naturalmente i pesi dipendono dall’anatomia del carattere stesso; bolder e lighter servono a specificare che
una determinata porzione di testo dovrà apparire
più pesante o più leggera rispetto al testo dell’elemento contenitore.
130
4.6.2 Lo stile del carattere
La proprietà font-style imposta le caratteristiche
del testo in base ad uno di questi tre valori:
4.6.3 Variazioni del carattere
La proprietà css font-variant con il suo valore ‘smallcaps’ converte i caratteri minuscoli in caratteri maiuscoli ma conservando la loro altezza originale; il
cosiddetto “maiuscoletto”.
131
4.7 Composizione orizzontale
nel web
4.7.1 Tracking
La proprietà css “word-spacing” permette di
specificare lo spazio (negativo o positivo) tra le
parole in unità di misura. Il valore di default è
normal.
4.7.2 Kerning
Attualmente non vi è alcun meccanismo proprio
in HTML o CSS che specificamente consenta la
crenatura del carattere.
Cfr. http://adamdscott.
com/typog raphy/kerning-for-the-web/ (2011)
Tuttavia generalmente su web
non c’è bisogno di intervenire manualmente sul kerning,
poiché tutti i font digitali possiedono al loro interno le relative tabelle di crenatura, che
definiscono quali coppie di
lettere devono essere regolate
e in che misura; questi valori
132
vengono solitamente interpretati correttamente
dai browser e dai da sistemi operativi. Può comunque rivelarsi necessario intervenire manualmente sul tracking con i blocchi di testo come i
titoli o quando sono coinvolti numeri, corsivi o
segni di punteggiatura.
Quando si vuole intervenire sul kerning di una
coppia di lettere è necessario introdurre un elemento neutro inline, tipicamente un tag <span> .
La proprietà “letter-spacing” permette di specificare lo spazio (negativo o positivo) tra le lettere
in unità di misura. Il valore di default è normal.
4.7.3 Allineamento
La proprietà css “text-align” permette di allineare il testo a sinistra (valore ‘left’), a destra (valore ‘right’), centrato (valore ‘center’) o allineare
tutte le righe tra di loro sia a sinistra che destra
(valore ‘justify’).
133
4.7.4 Trasformazione del testo
La proprietà “text-transform” permette di convertire ogni prima lettera delle parole in maiuscolo (valore ‘capitalize’), tutte le parole da minuscolo a maiuscolo (valore ‘uppercase’) o da
maiuscolo a minuscolo (valore ‘lowercase’).
4.7.5 Decorazione del testo
La proprietà “text-decoration” permette di specificare se il testo è sottolineato (valore ‘underline’), sopralineato (valore ‘overline’), sbarrato (valore ‘line-through’), lampeggiante (valore ‘blink)
o anulare uno dei 4 primi valori impostati con il
valore ‘none’ (il valore di default, anche spesso
usato per rimuovere la sottolineatura dei link).
4.7.6 Indentazione
La proprietà “text-indent” permette di specificare in unità di misura o in percentuale l’indentazione della prima riga di testo.
134
4.7.7 Direzione
La proprietà “direction” specifica la direzione del
testo, da sinistra a destra (valore ltr – Left To
Right) o da destra a sinistra (valore rtl – Right
To Left); è utile soprattutto nel supporto per le
lingue arabe o orientali.
4.7.8 Spazi bianchi
La proprietà CSS “white-space” indica al browser
come trattare gli spazi bianchi del testo.
Di default (valore ‘normal’), il testo si adatterà alle
misure del suo elemento ritornando a capo se necessario ed extra spazi bianchi vengono ignorati.
Con il valore “pre”, questi spazi bianchi vengono
presi in ignorando la misura del suo elemento,
mentre con il valore “nowrap”, se anche gli spazi bianchi extra e misura dell’elemento vengono
135
ignorati, tutto il testo sarà inserito su una unica
linea senza ritorno a capo.
4.7.9 Margini orizzontali
Per impostare opportunamente i margini orizzontali di una porzione di testo si possono utilizzare le proprietà CSS “margin-left” e “marginright”.
136
4.8 Composizione verticale nel
web
4.8.1 Interlinea
La proprietà CSS “line-height” permette di specificare lo spazio tra le linee in unità di misura
(cioò lo spazio tra le parte inferiore dei caratteri),
in percentuale o cifra(in rapporto alla misura del
carattere). Il valore di default è normal.
La proprietà line-height è spesso usata anche per
centrare verticalmente una unica riga di testo nel
suo elemento contenitore.
4.8.2 Allineamento verticale di un
elemento in rapporto ad un testo
La proprietà CSS “vertical-align” è utilizzata
per allineare verticalmente un elemento (come
un’immagine) in rapporto ad altri elementi inline, come un blocco di testo.
137
I valori possibili, oltre alle misure specifiche,
sono:
baseline: allinea l’elemento alla linea base dell’elemento contiguo
bottom: l’elemento viene allineato con il più basso degli elementi della linea
middle: l’elemento viene posizionato al centro
dell’elemento contenitore
sub: l’elemento viene posizionato pedice
: l’elemento viene allineato con la
parte bassa della linea di testo
Per impostare opportunamente i margini verticali di una porzione di testo si possono utilizzare le
proprietà CSS “margin-top” e “margin-bottom”.
4.8.3 Margini verticali
Per impostare opportunamente i margini verticali di una porzione di testo si possono utilizzare le
proprietà CSS “margin-top” e “margin-bottom”.
138
4.9 Le novità dei CSS3 per la
tipografia web
4.9.1 @font-face
Come giè accennato in precedenza, uno dei maggiori limiti del webdesign è sempre stato lo scarso numero di caratteri tipografici o fonts a propria disposizione. Ciò dipendeva dal fatto che nei
diversi sistemi operativi erano installati fonts di
base diversi, pertanto l’unica soluzione per garantire al sito web una resa omogenea, era quella
di affidarsi ai web safe fonts, cioé poche famiglie
di caratteri ben identificate che erano comuni e
presenti su tutti i computer.
Grazie all’introduzione dei CSS3 questo limite
della tipografia web si è praticamente estinto: la
direttiva @font-face specifica il percorso del font
selezionato che sarà scaricato automaticamente
dal browser.
139
4.9.2 Dimensionamento ottico del
carattere
Un’altra proprietà CSS interessante è “font-sizeadjust”, che permette di mantenere le proporzioni del font quando sul dispositivo dell’utente il
font scelto non è disponibile e viene sostituito da
un altro; in questo caso, se il font sostituto è più
piccolo di quello scelto, l’altezza calcolata a partire dal carattere “x” viene comunque mantenuta.
Il suo valore è espresso come numero e non ha
bisogno della specifica dell’unità di misura (px,
pt, em, cm, %).
Tale valore indica la proporzione tra le lettere
maiuscole e l’altezza della lettara “x” minuscola
di un dato carattere (tale valore è detto x-height).
Questa proprietà può essere utile, inotre, per migliorare la leggibilità di un testo quando all’interno di un documento si utilizzano diversi font
aventi la stessa grandezza (ad es. font-size: 8pt).
140
Pur avendo la stessa grandezza si noterà che alcuni font sono meglio leggibili di altri (ad esempio il carattere Verdana a schermo risulta notoriamente più leggibile del Times New Roman).
Mediante font-size-adjust è possibile correggere
questo problema. Ad esempio è possibile definire
per tutti i tipi di carattere la stessa “leggibilità”
del Verdana (impostando ad es. x-height ad un valore 0.58).
141
4.9.3 Compressione o espansione del
testo
La proprietà CSS “font-stretch” condensa o
espande il font-family corrente, esclusivamente
in orizzontale.
L’elenco dei suoi possibili valori è:
normal | wider | narrower | ultra-condensed |
extra-condensed | condensed | semi-condensed
| semi-expanded | expanded | extra-expanded |
ultra-expanded
4.9.4 Antialiasing
La proprietà CSS “font-smooth” permette di controllare l’anti-aliasing di un font.
I valori possibili sono:
auto | never | always | <absolute size> | length
142
4.9.5 Ottimizzazione automatica
della leggibilità
La proprietà ”text-rendering” impostata al valore “optimizeLegibility” consente di migliorare
automaticamente la leggibilità di una porzione di
testo, correggendo otticamente le legature e intervenendo sul kerning.
4.9.6 Interruzioni di parola
La proprietà “word-wrap” gestisce il modo in cui
le righe di testo devono andare a capo.
Tale proprietà supporta due valori: normal e break-word; nel secondo caso se una parola è così
lunga da superare il contenitore, essa verrà spezzata in un qualsiasi punto evitando di deformare
la larghezza del contenitore.
143
4.9.7 Text-shadow
La proprietà text-shadow permette di aggiungere
un’ombreggiatura al testo esclusivamente tramite CSS, senza ricorrere all’utilizzo di immagini.
L’ombra viene applicata sia al testo che alla eventuale decorazione del testo.
Con questa proprietà è possibile impostare la posizione orizzontale e verticale dell’ombreggiatura, il suo spessore ed il suo colore.
4.9.8 Text-overflow
La proprietà text-overflow permette di controllare con maggior precisione cosa succede se il testo
supera le dimensioni del suo contenitore.
4.9.9 Nuove proprietà text-decoration
La nuova proprietà “text-decoration” consentirà
di ottenere maggior controllo sulle decorazioni
del testo.
144
text-decoration: none, underline, overline e linethrough.
linea della proprietà precedente.
lori: solid, double, dotted, dashed e wave;
ne del testo deve essere omessa su determinati
elementi. I valori possibili sono: none, images,
spaces, ink e all.
potete controllare, ad esempio, in che punto la
sottolineatura deve attraversare il testo: auto, before-edge, alphabetic e after-edge.
4.9.9 Nuove proprietà text-decoration
L’unità di misura em, descritta precedentemente,
è un’unità di misura relativa all’elemento contenitore.
145
Nel caso in cui si voglia procedere a ridimensionare i testi, ad esempio nel caso di una pagina ottimizzata per il mobile, attualmente è necessario
procedere dichiarando per ogni livello innestato
il font-size originale, ma è un metodo scomodo e
poco mantenibile.
Questo problema viene risolto dall’unità di misura rem, che si comporta come em, ma fa riferimento all’elemento alla radice del documento.
Rem infatti è la sigla per “root em”.
4.9.11 Altre proprietà in corso di
sviluppo
Allineamento e sillabazione
Controllare la sillabazione di un testo web non è
semplicissimo. Vanno infatti considerati diversi
fattori quando si imposta la sillabazione automatica, considerando che ogni lingua ha le sue regole di sillabazione.
Quello della sillabazione è un ambito in corso di
sviluppo, ma le proprietà oggetto di studio sono
le seguenti:
146
hyphenate-dictionary;
hyphenate-before e hyphenate-after;
hyphenate-lines;
hyphenate-character.
Kerning
Il modulo per la tipografia all’interno delle specifiche CSS3 contiene un’interessante proposta per
gestire le proprietà del kerning ed avere maggiore controllo su di esso.
Cfr.
http://coding.
smashingmagazine.
com/2010/03/01/cssand-the-future-of-text/
(2010)
147
027
028
148
029
Esempi di utilizzo avanzato della tipografia su
web attraverso le possibilità offerte dai CSS3.
027. http://www.danhigbie.com/ . 2011.
028. http://www.tapp3.
com/ . 2011.
029. http://www.manufacturedessai.it/ . 2011.
149
5. Intervista a
Luciano Perondi
SIONE
PAS
Luciano Perondi, progettista di caratteri
tipografici e grafico professionista dal 1998, opera
nel campo della progettazione grafica di aspetti legati alla scrittura (tipografica e non) e all’information design.
Oltre all’attività di progettista si occupa anche degli aspetti teorici della grafica, ha fondato EXP, un
gruppo di ricerca dedicato prevalentemente alle tematiche inerenti la scrittura e la lettura, in cui confluiscono le competenze di psicologi, teorici della
comunicazione, progettisti, semiotici, grafici e linguisti.
Nel 2003 ha dato vita allo studio Molotro, che si occupa sia di progettazione tipografica e di information design, sia di ricerca nell’ambito della scrittura.
Dal 2004 si è occupato di didattica della tipografia
e dell’information design presso vari istituti, tra cui
IED di Milano, Scuola Politecnica di Design, Accademia di Belle Arti di Urbino, Politecnico di Bari,
Cfp Bauer di Milano.
Dal 2007 è docente presso l’Isia di Urbino.
Ha progettato, assieme a LeftLoft, il carattere
“Solferino”, correntemente in uso dal quotidiano
Corriere della Sera.
152
030
030. Luciano Perondi.
2010. © Andy Massaccesi, http://www.andymassaccesi.com/. Tutti i diritti riservati.
© Andy Massaccesi
153
L’intervista a Luciano Perondi è stata realizzata il
29/03/2011, presso la Scuola Politecnica di Design
di Milano.
Il filmato è disponibile integralmente on-line al
seguente indirizzo:
http://vimeo.com/egutenbergprj/composizionetipografica
154
“Il design della comunicazione, e quindi
la tipografia, riveste un ruolo fondamentale per il libero accesso alla conoscenza
e la sua condivisione.”
Luciano Perondi
155
I. Riferimenti
Bibliografia
1. Bove Giovanni, Scrivere futurista. La rivoluzione tipografica tra scrittura e immagine (Nuova Cultura, 2009),
99–100.
2. Blackwell Lewis and Carson David, The End of
Print: The Grafik Design (Chronicle Books 2000), 134
3. Bringhurst Robert, Gli elementi dello stile tipografico
(Sylvestre Bonnard 2009), 368
4. Clarke Andy, Oltre i CSS. La sottile arte del web design (Pearson Education 2008), 384
5. Grill Eric, Sulla tipografia (Sylvestre Bonnard
2005), 144
6. Lupton Ellen, Thinking with Type: A Critical Guide
for Designers, Writers, Editors, & Students (Princeton
Architectural Press 2004), 176
7. Mallarmè Stephane, Un coup de dés jamais n’abolira
le hasard (Ampersand 1987), 20
8. Morison Stanley, First Principles of Typography
(Macmillan 1936), 32
158
9. Spiekermann Erik, Stop Stealing Sheep & Find Out
How Type Works (Adobe Pr 2002), 176
10. Tschichold Jan, The New Typography (University of
California Press 1998), 286
159
Sitografia
1. “A List Apart”
http://www.alistapart.com/
2. “Ellen Lupton site”
http://elupton.com/
3. “Giò Fuga Thype Blog”
http://blog.giofugatype.com
4. “12 Examples of Paragraph Typography “
http://jontangerine.com/silo/typography/p/
5. “Fonts, typefaces and all things typographical”
http://ilovetypography.com/
6. “Importance of Great Web Typography & Excellent
Examples “
http://www.onextrapixel.com/2010/01/11/
importance-of-great-web-typography-excellentexamples/
7. Typography - Scale and Rhytm
http://lamb.cc/typograph/
160
8. “Readability ”
http://www.readability.com/
9. “RetinArt”
http://retinart.net/
10. “Articles by Jason Santamaria”
http://jasonsantamaria.com/articles/
11. “Smashing Magazine”
www.smashingmagazine.com/
12. “Tupetester - Compare screen type”
http://www.typetester.org/
13. “55 Examples of Huge Typography in Web Design”
http://webdesignledger.com/inspiration/55examples-of-huge-typography-in-web-design
14. “The Elements of Typographic Style Applied to the
Web ”
http://webtypography.net/
15. “Jeffrey Zeldman”
http://www.zeldman.com/
161
Tweetgrafia
1. @Fontblog
2. @ilovetypography
3. @smashingmag
4. @typebot
5. @typegirl
6. @TypeTweets
7.@typographerorg
8. @typography247
9. @Typotheque
162
II. Indice delle
immagini
1. Copertina. “S. Morison”, http://tipografos.net/
2. pag. 09. “Toast”, http://webdesign.html.it/
3. pag. 26. “Scala discendente degli elementi che compongono la gerarchia del testo”, http://webdesign.html.
it/
4. pag.60. “Un coup de dés jamais n’ abolira le hasard,
http: //37signals.com/
5. pag. 62. Un coup de dés jamais n’ abolira le hasard”,
http://ho-lala.blogspot.com/
6. pag. 66. “Zang Tumb Tumb”, http://www.
zangtumbtumb.it/
7. pag. 67. “Parolibero”, “Montagne + Vallate + Strade
x Joffre”, http://www.flickr.com/
8. pag. 68. “Parole in libertà”, http://spazioinwind.
libero.it/terzotriennio/letterat/
9. pag. 72. “Asel naprakat”, http://ca.wikipedia.
org/wiki/
10. pag. 74. “Merz magazine cover”, http://typographyhistory.tumblr.com/
165
11. pag. 75. “Die Scheuche. Märchen”, http://www.
kettererkunst.de/kunst/kd/
12. pag. 78. “Calligrames”, http://community.donnamoderna.com/gruppi/la-poesia-possiede-alidargento/
13. pag. 78. “Calligrames”, http://jacquesmottier.
online.fr/
14. pag. 82. “Ad alta voce”, http://www.pustovit.ru/
15. pag. 85. “Die Scheuche”, http://www.i2r.ru/static/469/out_23140.shtml
16. pag. 86. “Piet Zwart”, http://stregattodesign.
wordpress.com/
17. pag. 90. “Hidak”, http://it-is-snowing-in-nakonxipan.blogspot.com/
18. pag. 90. “Malerei, Photographie, Film”, http://
www.sssub.unibo.it/
19. pag. 92. “The Next Call”, http://terayama.esporre.net/
166
20. pag. 94. “Jan Tschichold”, http://elhamtawfik.
blogspot.com/
21. pag. 98. “Geiger”, http://www.fondazioneberardelli.org/
22. pag. 98. “Modulo”, http://ff3300.com/
23. pag. 100. “Pianeta Fresco”, http://pianetafresco.
blogspot.com/
24. pag. 100. “Technè”, http://www.fondazioneberardelli.org/
25. pag. 102. “An anthology of chance operations”,
http://flaminiogualdoni.com/
26. pag. 104. “Capitolo Zero”, www.flickr.com/photos/migueloks/
27. pag. 106. “The End of Print”, http: //2143. tumblr.com/
28. pag. 148. http://www.danhigbie.com/
29. pag. 148. http://www.tapp3.com/
30. pag. 149. http://www.manufacturedessai.it/
31. pag. 153. “Luciano Perondi”, © Andy Massaccesi,
http://www.andymassaccesi.com/
167
III. 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à degli
Studi di Milano-Bicocca.
Coniuga l’attività libero professionale
(Extrasmall.it, fondato nel 1998) con l’impegno nella ricerca teorico-metodologica,
nella didattica e nella divulgazione.
170
Roberto Falcone
Studente e web designer.
Si laurea con il massimo dei voti in Comunicazione Digitale presso l’Università
degli Studi di Milano, intraprendendo un
percorso di studi che lo porta ad approfondire tematiche tecnico/progettuali in
diversi ambiti di ricerca. Laureando in
Teoria e Tecnologia della Comunicazione
presso l’Università degli Studi di Milano
- Bicocca, svolge un lavoro di tesi sperimentale riguardo la Realtà Aumentata
in ambito storico-artistico. Web Designer
ibrido e appassionato, collabora con diverse agenzie di comunicazione meneghine.
171
Erika Montoli
Studentessa e visual designer.
Si laurea in Comunicazione Digitale presso l’Università degli Studi di Milano, intraprendendo un percorso di studi legato
all’Editoria Multimediale, culminato con
l’esperienza di collaborazione presso la
divisione “B.O.L.” di Mondadori.
Laureanda in Teoria e Tecnologia della
Comunicazione presso l’Università degli
Studi di Milano - Bicocca, svolge un lavoro di tesi sperimentale a proposito della
tipografia nei nuovi device.
Lavora come Visual Designer presso
un’innovativa agenzia milanese di consulenza di marketing digitale e User Experience Design.
172
Un sincero e doveroso ringraziamento è rivolto alla prof.ssa Letizia Bollini, che con impareggiabile passione, impegno ed
entusiasmo ci ha guidati lungo un percorso di esplorazione dell’affascinante mondo del Graphic Design
che ci ha consentito di vagliare inedite prospettive d’indagine e ci ha stimolato a misurarci con le
più attuali sfide tecnologiche e che, nel suo complesso, ha costituito una fondamentale esperienza
umana, prima ancora che educativa e professionale.
Erika e Roberto
174
Desideriamo ringraziare, inoltre, il prof. Luciano
Perondi per la sua disponibilità nell’averci concesso
l’intervista e per la gentilezza e la pazienza dimostrate durante la realizzazione delle riprese video.
Si ringrazia, infine, il fotografo Andy Massaccesi
(www.andymassaccesi.com) per averci concesso l’utilizzo della foto di Luciano Perondi (pag. 153).
175
Il progetto eGutenberg nasce nell’a.a. 2010-11
come attività didattica sperimentale all’interno
del CdLM 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.
In questa collana:
Grammatica visiva e teoria della Gestalt
Visivamente parlando
Il linguaggio delle immagini
RGB del colore
Tipografia digitale
Like a rolling font
“Complicare è facile, semplificare è difficile. Per complicare basta aggiungere, tutto quello che si vuole: colori, forme, azioni, decorazioni, personaggi, ambienti
pieni di cose. Tutti sono capaci di complicare. Pochi
sono capaci di semplificare”
Bruno Munari

Vol. 2 - Altervista

Transcript

Documenti analoghi

Bosco e Territorio

05_scrittura cinetica

pag. 39 29 Giugno 2016 - La Gazzetta dello Sport (ed. Nazionale)

pag. 03 17 Maggio 2016 - La Gazzetta dello Sport (ed. Roma)

Tipografia digitale - L`anatomia dei font

Riprendere i Sensi (di Jon Kabat

Tag RFID per l`abbigliamento dei bambini Boboli

Bonprix Italia

PDF

4B Inglese PROGRAMMA Dal libro di testo `Performer Culture and