Tipografia
Regole di Composizione
Spazio del Testo Per inviare con chiarezza il messaggio della nostra grafica è importante stabilire quali saranno i rapporti visivi tra il testo e le immagini: in particolar modo è importante determinare quale spazio e quanto spazio all’interno di un dato formato questi elementi andranno rispettivamente ad occupare.
Se all’interno di un formato c’è parità, in termini di spazio occupato, tra testo e immagini allora sarà necessario scegliere una famiglia di caratteri ben leggibile (ad esempio serif) e un tipo di font che possa adattarsi per stile e forme all’audience della nostra grafica. Bisogna inoltre determinare le possibile variazioni all’interno di uno stesso testo: dimensioni e “definizione” dei caratteri nei titoli, nei paragrafi, nelle didascalie, ecc. In questo modo si andranno a differenziare i diversi contenuti (per la loro visibilità e quindi rilevanza) e si conferirà un maggiore senso di dinamicità.
Allo stesso tempo un’adeguata scelta tipografica determinerà un preciso stile, com’è il caso ad esempio del design interno del seguente libro di testo, dove si percepisce subito quali sono le aree di testo principali, quali sono i titoli e quali invece sono le aree didascaliche relative alle immagini. Quello che si nota dalla visualizzazione di sole due pagine costituisce in realtà un tema ricorrente, riproposto con leggere variazioni di spazio, all’interno di tutto il manuale.
Esempio dell’“Identità tipografica” di un Libro di Testo (Storia e Identità: Corso di Storia. A cura di Adriano Prosperi, Gustavo Zagrebelsky, Paolo Viola, Michele Battini. Edito da Einaudi, 2012
Titolature Se un design grafico richiede in primo luogo delle titolature o delle intestazioni (come ad esempio in un poster, una pubblicità, un banner, ecc.) allora la scelta primaria di realizzazione sarà dettata dal concept dei caratteri. Anche se generalmente i cosiddetti caratteri display sono leggibili per le loro dimensioni, per accrescere il loro livello di leggibilità è comunque buona norma utilizzare per la loro rappresentazione quei font rientranti nella famiglia Serif (come ad esempio il Times New Roman o il Garamond).
Per una lista completa dei principali font appartenenti a questa categoria: http://en.wikipedia.org/wiki/List_of_typefaces#Serif
Didascalie Le didascalie possono costituire degli elementi di testo particolarmente importanti soprattutto quando il formato grafico è ricco di immagini che necessitano opportune descrizioni. Questo è particolarmente vero soprattutto nella realizzazione grafica di libri d’arte, di fotografia ma anche nei cataloghi di prodotti.
In quest’ultimo caso la foto del prodotto dovrà possedere il maggior impatto visivo. Tuttavia, allo stesso tempo, la didascalia dovrà comunque essere ben leggibile. In particolare e soprattutto nei casi in cui è l’immagine a rappresentare il focus point della grafica, il font scelto dovrà essere leggibile anche in piccole dimensioni (anche in questo caso i font serif o sans-serif costituiscono una scelta sicura) e soprattutto dovrà integrarsi con il resto della composizione. Ad esempio nella seguente pagina del Catalogo IKEA i caratteri scelti cambiano colore a seconda dello sfondo su cui sono posizionati.
Catalogo IKEA (Autunno 2012)
Nel design sopra riportato troviamo infatti didascalie/descrizioni bianche su un fondo scuro e didascalie in nero su uno sfondo chiaro. Anche nel caso delle didascalie è importante determinare una loro rilevanza visiva, giocando proprio sulle dimensioni, sul colore e lo stile dei caratteri (il font del catalogo è il Verdana, di tipo Sans-Serif).
La didascalia con maggiore rilevanza è senz’altro quella riportante il costo del prodotto principale della pagina del catalogo.
Tale scritta si differenzia dalle altre per: • posizionamento (centrale); • dimensioni (maggiori, per quanto riguarda la titolatura che in questo modo costituisce uno stacco ancora maggiore rispetto al paragrafo); • stile (bordatura a punti della titolatura); • rapporto di colore (bianco su sfondo chiaro); • Semantica (le parti di testo ritenute più importanti, in questa didascalia specifica, vengono ancora più evidenziata: prezzo … basso … € 69,00).
Facilitare la lettura Per facilitare la lettura di qualsiasi testo all’interno di un design grafico è buona norma attenersi ai seguenti criteri:
Linee di testo troppo lunghe possono limitare la leggibilità.
Dimensioni troppo ridotte e colonne di testo troppo estese impediscono allo stesso modo una facile lettura. Un forte contrasto dimensionale tra spazi vuoti e spazi di testo concentrati, va sempre a limitare la leggibilità complessiva. Testi allineati a sinistra o giustificati risultano generalmente più leggibili.
Nell’organizzazione dei testi è bene creare, tramite l’inserimento di titoli e sottotitoli, sezioni distinte e facilmente riconoscibili. Pertanto è necessario evitare testi eccessivamente lunghi e privi di suddivisioni interne. E’ sempre buona norma evitare uno sviluppo discontinuo del testo e il posizionamento isolato di caratteri, parole e righe.
A questo riguardo è bene evitare di “chiudere” un paragrafo con una riga molto più corta delle altre (una cosiddetta “widow” in campo tipografico: una riga finale formata da una o due parole.)
Righe di questo tipo in ambito tipografico certo non contribuiscono a creare un bilanciamento tra le righe di un testo. Allo stesso modo è bene evitare di iniziare un paragrafo all’inizio di una pagina con una riga “orfana”: vale a dire una riga iniziale composta da una o due parole al massimo.
Come regola generale per aumentare la leggibilità di un testo, “moderazione”, nell’utilizzo dei caratteri, rimane la parola d’ordine.
Se il messaggio della nostra grafica è in primo luogo “letterale”, allora bisognerà scegliere un font adeguato e seguire tutte le regole esposte, volte proprio ad incrementare il livello di leggibilità.
Questo tuttavia non vuol dire abbandonare i possibili espedienti di variazione e contrasto, utili per suscitare curiosità nel lettore. Ancor prima che l’osservatore legga il nostro testo, dovrà infatti esserne attratto.
In particolare è possibile creare uno specifico interesse visivo in relazione al testo inserendo al suo interno alcuni elementi aggiuntivi:
Citazioni
Immagini
Capolettere
Colori diversi
Righe
Paragrafi che iniziano con lettere minuscole o maiuscole.
Elementi grafici diversificati come simboli, sottolineature, bordi, ecc.
… e in generale a questa lista base va aggiunto qualsiasi elemento, coerente con il resto della grafica, che contribuisca ad accrescere l’interesse visivo dell’osservatore com’è il caso di quest’ultimo paragrafo in lista …
Gestire il Flusso Testuale Anche nell’utilizzo di caratteri tipografici esistono delle modalità per la creazione di una gerarchia visiva: in questo modo sarà possibile sempre guidare l’osservatore, dal messaggio più importante a quello meno rilevante ai nostri fini.
Per determinare la gerarchia visiva dei testi un designer deve in primo luogo stabilire cosa all’interno dell’intera grafica dovrà essere enfatizzato o meno.
Esistono diversi modi per aumentare il livello di enfasi di un testo. Prendiamo in considerazione gli espedienti tipografici più importanti: › Enfasi per isolamento. › Enfasi per posizionamento. › Enfasi per scala (la gestione delle relazioni dimensionali tra le varie componenti di un testo come titoli, sottotitoli, paragrafi, simboli e immagini: vale a dire tra tutti quegli elementi che possono accompagnare un testo). › Enfasi per contrasto. › Enfasi per direzione e orientamento.
Esistono inoltre degli strumenti base volti ad accrescere l’enfasi all’interno del corpo di uno stesso testo. Questi strumenti vanno ad intervenire sui seguenti elementi tipografici:
Dimensioni dei caratteri
Colore dei Caratteri
Variazioni di stile: effetto sottolineature, ombreggiature, ecc.
grassetto,
effetto
corsivo,
Variazioni di spaziatura (tra caratteri, parole, righe).
Variazioni di carattere (tra font all’interno di uno stesso corpo testuale).
In base a quanto riportato, i criteri fondamentali di organizzazione spaziale valgono e si applicano anche nel campo del design tipografico. Nell’organizzazione degli elementi tipografici, accanto alla gerarchia visiva, è necessario considerare il ritmo e l’unità. Lo scopo del designer è condurre il “lettore” da un elemento tipografico ad un altro, sfruttando proprio la gerarchia visiva e il ritmo compositivo. Per ritmo compositivo tipografico si vuole intendere: un pattern realizzato attraverso uno specifico posizionamento degli elementi tipografici, in considerazione anche ad eventuali intervalli, ripetizioni
e variazioni. Sfruttando questi elementi si vuole stabilire un “naturale” senso di movimento e sequenzialità tra i vari testi.
Tale effetto “guida” è ad esempio evidente nel seguente design tipografico, dove il lettore viene inconsapevolmente condotto nella lettura delle parti testuali della composizione, proprio attraverso il ritmo creato dall’alternanza e dalla diversità dei testi.
Poster: The New York Book Show Graphic Designer: Ray Cruz.
UnitĂ & Variazione Proprio in questo design grafico troviamo un esempio di alternanza tipografica che tuttavia non genera forti contrasti ma un senso di unitĂ generale.
Alcune regole fondamentali per stabilire unità visiva e spezzare allo stesso modo la monotonia consistono nel: Limitare i possibili allineamenti. Per ottenere un effetto unitario in maniera semplice e rapida è bene adottare un unico allineamento per i nostri testi. Limitare i font in uso. Per ottenere un effetto unitario in maniera semplice e rapida è bene utilizzare un unico tipo di font all’interno della composizione. Gestire l’alternanza. Proprio questo fattore serve a ricreare un’unità attraverso quegli elementi tipografici che altrimenti risulterebbero isolati per stile, all’interno della composizione. In particolare per
ottenere un effetto unitario, partendo da elementi contrastanti è possibile giocare con i colori, gli allineamenti e le dimensioni per creare una corrispondenza, proprio attraverso l’alternanza. E’ proprio il caso della rappresentazione vista in precedenza dove il primo elemento tipografico in alto a sinistra viene alternato e corrisposto, per colore, al secondo elemento in basso a destra. I due elementi vengono “raccordati” dal testo e dall’immagine centrale che va a creare una diagonale direzionale tra i due.
Alternanza e unitĂ tipografica
Spaziatura Le tre tipologie di spaziature che devono essere controllate in un design tipografico sono le seguenti: • la spaziatura tra lettere/caratteri • la spaziatura tra parole • la spaziatura tra righe
Come già sappiamo ogni tipo di spaziatura scelta dovrebbe aumentare il livello di leggibilità e di interesse. Se la spaziatura va ad inficiare un’immediata leggibilità, il lettore perderà facilmente interesse, anche se il design tipografico è accattivante (questo ovviamente solo se vogliamo che il nostro testo venga letto).
E’ proprio il fattore “spaziatura” che determina le modalità di passaggio visivo tra i singoli caratteri, quindi tra le parole, righe, paragrafi di testo, pagine e così via.
Il 70% della buona riuscita di un design tipografico dipende proprio dalle modalità di gestione di questa “transizione”.
Quando un carattere viene prodotto digitalmente, i vari software di tipo word processing, determinano in automatico la precisa distanza tra i singoli caratteri. Tuttavia, nella realizzazione di un design grafico, specifico ad esempio per dei titoli, non è una buona idea fare affidamento esclusivo sulla spaziatura automatica.
Infatti in questo caso il designer è tenuto a verificare l’adeguatezza della spaziatura di default e di conseguenza ad aggiungere o a sottrarre spazio tra i caratteri, sempre in funzione di un aumento della leggibilità . I word processor vanno infatti a calcolare tale spaziatura basandosi unicamente sulla tipologia e le dimensioni di partenza di un dato carattere in uso. Un designer invece deve regolare la spaziatura, considerando i caratteri come forme e pertanto deve stabilire le varie spaziature in base alle proprie finalità .
Ad esempio il computer potrebbe automaticamente impostare una stessa distanza tra le seguenti due coppie di lettere:
1) HN 2) LA
Nel primo caso, per aumentare la leggibilitĂ dei caratteri (in font Times New Roman, Famiglia Serif), potrebbe essere necessario aumentare la spaziatura:
HN (spaziatura espansa di 5 pt, su caratteri con dimensioni di 26 pt)
Al contrario la stessa forma della successiva coppia di caratteri (LA) permette una buona leggibilitĂ anche con una spaziatura precalcolata dal software.
Detto questo è essenziale giudicare la spaziatura tra i singoli caratteri, caso per caso, per determinare un corretto rapporto non solo tra le lettere ma anche tra gli spazi negativi che queste vanno a creare.
Posizionamento Quando si realizza un design tipografico bisogna considerare il rapporto spaziale non solo tra le lettere, le parole e le righe ma anche lo spazio complessivo che esse occupano all’interno del formato compositivo. Dei caratteri troppo piccoli, usati all’interno di paragrafi costruiti con un’eccessiva interlinea, sembreranno persi in uno spazio vuoto e pertanto saranno poco leggibili. In generale maggiore è la lunghezza di una linea di testo, maggiore dovrà essere l’interlinea: questo per dare sufficiente “respiro” al testo generale.
Per determinare le corrette relazioni spaziali è possibile attenersi ad alcune regole proporzionali di base:
1) Troppo spazio tra righe di testo può rendere l’operazione di lettura “noiosa”; al contrario uno spazio troppo ridotto può rendere la lettura difficile. 2) Utilizzando un’ampia spaziatura tra lettere dovremmo di conseguenza utilizzare una spaziatura più ampia anche tra le parole. Di contro con un letter-spacing ristretto anche la spaziatura tra parole dovrà risultare ridotta.
Tutti questi accorgimenti “spaziali” vanno ovviamente considerati in base al font scelto che può richiedere diversi accorgimenti di spaziatura proprio a causa delle sue forme base.
Interruzioni e Ritmo Generalmente in un design grafico in cui il testo costituisce l’elemento di contenuto fondamentale, interruzioni nella sua lunghezza generale contribuiscono ad accrescere l’interesse del lettore.
Questo vale non solo per i formati cartacei (libri, riviste, quotidiani, ecc.) ma anche per le pagine web. Dividendo il contenuto testuale in “moduli” distinti lo rendiamo più gestibile graficamente, più leggibile ma soprattutto più “piacevole” dal momento che proprio la divisione può servire a creare, caso per caso, uno specifico interesse visivo.
La divisione in moduli permette infatti l’utilizzo di metodi specifici per il conferimento di enfasi:
l’utilizzo di colori diversi per i font (ad esempio nei titoli di paragrafo).
L’utilizzo di colori diversi per lo sfondo dei paragrafi.
L’utilizzo di stili diversi per i caratteri (testo in grassetto, sottolineato, corsivo, ecc.) nelle varie divisioni. L’utilizzo di elementi di separazione tra paragrafi (immagini, bordi, linee orizzontali e verticali, ecc.).
Tutte queste caratteristiche, utilizzate anche singolarmente, possono stabilire una coesione e una differenziazione semantica all’interno di un design grafico. Allo stesso tempo esse contribuiscono alla creazione di un ritmo specifico, che determina il passaggio tra i diversi moduli di testo.
Margini Considerare i margini al testo come dei bordi, che racchiudono e presentano il contenuto scritto, aiuta senz’altro a stabilire una migliore divisione dei contenuti.
Inserire uno spazio adeguato tra i vari paragrafi e tra questi e il formato generale, aiuterà il lettore a focalizzare immediatamente il contenuto, aumentandone ovviamente la leggibilità e il valore semantico.
Ad esempio quale dei seguenti layout di pagina risulterà graficamente più leggibile e interessante? In base a quanto finora affermato, senza dubbio il secondo.
Layout tipografico 1
Layout tipografico 2
Utilizzare Caratteri Diversi Nel campo del design tipografico un designer può liberamente mischiare diverse tipologie di font a seconda del tipo di visualizzazione testuale scelto e soprattutto a seconda delle finalità. Tuttavia anche in questa libertà creativa è bene considerare la seguente regola di base: i font in uso in uso all’interno di uno stesso formato dovrebbero essere al massimo due e dovrebbero possibilmente appartenere ad una stessa famiglia.
Infatti quei caratteri che appartengono ad una stessa famiglia stabiliscono solo delle variazioni stilistiche all’interno della stessa, mantenendo costanti le caratteristiche di base. Pertanto l’utilizzo di una singola famiglia di caratteri, in uno stesso formato, contribuisce a creare dinamismo e varietà, conferendo allo stesso tempo unità della composizione. Ad esempio nel seguente layout è stata apportata una leggera variazione modificando la type-family del tipo di font in uso: l’Arial. Mentre il corpo testuale è in Arial (stile normale) il titolo principale è in Arial Black e il sottotitolo (così come la dicitura Author) è in Arial Rounded.
Queste piccole variazioni contribuiscono a creare interesse senza minare la fruizione del testo.
Più complicato e delicato è invece l’utilizzo congiunto di font che appartengono a famiglie diverse (come ad esempio il Verdana e il Times New Roman). In questo caso specifico, per ottenere ad una composizione visivamente gradevole, è essenziale: • Verificare, con più prove grafiche, come i diversi font lavorano nelle possibili combinazioni di spazio e stile. • Cercare di limitare l’alternanza sistematica e privilegiare un effetto di contrasto. In questo caso, come anche nell’esempio sopra riportato, la variazione rispetto al font di partenza può
essere limitata ad esempio ai soli titoli e sottotitoli (oppure ad elementi testuali di minor rilevanza, come ad esempio le didascalie): in questo modo il corpo testuale manterrà un’unica identità visiva costante.
Inoltre nella scelta dei font è importante considerare cosa differenzia le famiglie di appartenenza. Se si ricerca un alto contrasto potrebbe essere una buona idea abbinare due font appartenenti a famiglie che differiscono per caratteristiche tipologiche di base: un abbinamento di questo tipo potrebbe coinvolgere un font della famiglia sans-serif e
un font della famiglia serif o slab serif (come ad esempio l’Arial e il Times New Roman o l’Arial e il Rockwell).
Esempio: Questo paragrafo è in Arial
I piccoli tratti alla fine di ogni carattere vengono chiamati proprio “serif” e costituiscono il tratto distintivo di questa typeface (e della derivata slab-serif).
Questo paragrafo è in Rockwell Questo paragrafo è in Times New Roman
In questa scelta sarà fondamentale considerare le proporzioni tra le singole parti (rappresentate da font diversi) e come il passaggio tra di esse dovrà risultare agli occhi dell’osservatore.
Esempio di utilizzo congiunto dei font Arial e Rockwell Per ottenere un buon ritmo il font Rockwell è stato inserito in uno stile corsivo.
Font Artistici I font artistici e decorativi servono essenzialmente per la rappresentazione di quei testi che più che leggibili devono essere accattivanti e riprodurre delle forme particolari e, di conseguenza, inviare dei messaggi specifici all’osservatore. Questi font possono essere utilizzati per la rappresentazione di loghi, brevi slogan e in generale per le titolature all’interno di spazi compositivi che non siano prettamente di “lettura” (come invece sono riviste, quotidiani, brochure, cataloghi di prodotti, pagine web, ecc.)
Per quanto riguarda il design di un libro l’utilizzo di font decorativi andrebbe sicuramente limitato alla sola copertina e anche in questo caso, va attentamente valutato in base al contenuto del prodotto.
Se i caratteri decorativi, vengono scelti in corrispondenza allo “stile” e al “messaggio” del prodotto, il risultato potrà senza dubbio migliorare il design grafico, rendendolo sempre leggibile ma allo stesso tempo molto più interessante, com’è ad esempio il caso delle seguenti copertine: il design tipografico della seconda cover è senz’altro molto più comunicativo e in linea con il prodotto venduto.
Diversi Graphic Design della Copertina di Harry Potter
1
2
In generale tutti quei font non esclusivamente “digitali” servono a fornire un particolare supporto visivo ai contenuti proposti e/o alle immagini già presenti nella grafica, aiutandole ad inviare il messaggio completo della nostra composizione com’è il caso dei seguenti design. Copertina del libro “Broken Windows” dedicato alla nascita e alla diffusione della “street art” internazionale
Design Grafico per la campagna pubblicitaria della serie tv internazionale “Dexter�.
Alcune interessanti risorse internazionali consultabili online, per la visualizzazione dei diversi design tipografici, realizzati per le copertine dei libri, sono visualizzabili ai seguenti link:
International Cover Archive: http://bookcoverarchive.com/ Archivio AIGA: http://designarchives.aiga.org/#/home
FINE LEZIONE