Cose da sapere sugli elementi di un font

Lorenzo MigliettaLorenzo Miglietta
Elementi di un font

Nell’ultimo articolo ho introdotto l’argomento dei font, della tipografia e della sua storia. Ti ho anche parlato di serif e sans serif e quindi delle famiglie di caratteri, di come si dividono e come è preferibile utilizzarle (serif per la stampa e sans serif per il web, riassumendo).

L’argomento, però, non l’ho affatto concluso in un solo articolo. Infatti il tema dei font, e della tipografia in genere, è molto vasto e non basta assolutamente un solo articolo per coprire tutto, forse nemmeno un blog!

E infatti, ho cercato di racchiudere tutte le mie competenze in materia nel primo e unico corso in Italiano sui font, Font-Ninja, nel quale troverai ogni nozione, aiuto ed esempio possibile sul magico mondo dei caratteri.

Come ti dicevo, ci sono un sacco di altre cose da sapere sugli elementi di un font e nemmeno un intero sito potrebbe contenere tutti i dettagli di un universo davvero complesso e sfaccettato.

Ad esempio: da quali elementi è formato un carattere? Qual è la differenza tra tracking e kerning? Sono la stessa cosa? E ancora: occhielli, contrasti, allineamenti e interlinee.

Gli elementi di un font

Ok, Lorenzo mi hai nominato un sacco di roba strana e non ci ho capito niente.. spiega un po’!

E hai anche ragione, in questo articolo c’è moltissima carne al fuoco, ma procediamo con calma e ordine come sempre.

Continuo questo viaggio all’interno della tipografia analizzando i diversi elementi di un carattere, partendo dai principali.

Nell’esempio che segue ho scelto di utilizzare uno dei caratteri serif più utilizzati sia sul web che in fase di stampa, ovvero il Georgia, uno dei caratteri serif più leggibili e famosi.

elementi di un font

Come vedi da questo schema, un font è determinato innanzitutto da alcune linee orizzontali che ne definiscono le varie altezze.

Le linee verdi, dette rispettivamente linea ascendente e linea discendente, definiscono il corpo di un carattere; ovvero l’altezza massima che avrà la riga di testo in relazione alle lettere usate. Il corpo di un carattere comprende quindi sia le aste ascendenti (come quelle delle lettere f,l,t,k), sia le aste discendenti (come quelle di p,y,j), oltre all’occhiello o all’asta discendente della g, a seconda del font utilizzato.

La linea di base e la linea ascendente formano la cosiddetta altezza delle lettere maiuscole, la quale non tiene conto delle aste discendenti.

L’occhio del carattere, in inglese X-height, altezza della x, è l’altezza delle lettere che non sono maiuscole e non possiedono aste ascendenti o discendenti come appunto la x, la a, la e, eccetera.

Braccio, gamba, cravatta, orecchio, incrocio, collo. Sono altri importanti elementi di un font. Invece di sprecare tante parole inutili, penso sia molto più immediato spiegandolo attraverso questa sintetica grafica, sempre utilizzando il Georgia come font.

elementi di un font

Fino ad ora mi sono concentrato solo sulla struttura di un carattere e sugli elementi che la compongono, ci sono però alcuni elementi di un font che tendono a caratterizzarlo e a dargli una determinata impronta, oltre che a fargli trasmettere determinate sensazioni visive, e quindi emotive.

Innanzitutto ci sono le grazie (serif), ma approfondisco meglio l’argomento serif/sans serif nel mega-articolo di Grafigata alle basi della tipografia!

Ma oltre alle grazie gli elementi caratterizzanti sono anche altri. Vediamoli.

Il contrasto in un carattere

Uno di questi è il contrasto di un carattere. Il contrasto di un carattere è sostanzialmente la differenza di spessore tra le linee spesse e le linee sottili. Più il rapporto tra linee spesse e sottili è alto, più aumenta il valore del contrasto.

Riprendendo un po’ il principio del contrasto nell’ambito della teoria della Gestalt, un font con alto contrasto nelle lettere è molto più leggibile (e in alcuni casi anche più elegante) quando usata in grandi dimensioni, mentre una a basso contrasto garantisce una buona lettura anche per corpi piccoli.

Nell’esempio a fianco, il Bodoni MT è un classico esempio di font ad alto contrasto, mentre il Lucida Fax ha un minore contrasto.

Esistono numerosi sans serif in cui noti un contrasto ridotto fino ad essere quasi impercettibile come nel caso del Futura (che è tra i font preferiti dai designer e che ho usato anche come esempio nell’articolo sulle correzioni ottiche).

L’importanza della dimensione dell’occhio

La dimensione dell’occhio di un carattere, ossia la larghezza e l’altezza, rispetto al corpo, dello stesso, è tra gli elementi più importanti di un font e sicuramente uno dei più distintivi.

La dimensione dell’occhio è utile anche a definire una buona o una scarsa leggibilità di un testo scritto utilizzando un determinato font.

Non è un caso se alcuni dei font più leggibili che esistono, come il Verdana, il Times New Roman e l’Helvetica, possiedono degli occhi, rapportati al corpo, molto grandi e ben definiti.

Occhio di un font

Nell’immagine qui sopra vengono confrontati tre famosi caratteri e le dimensioni del loro occhio.

Vengono anche presentati dei testi con caratteri in dimensione 12pt, parità di giustificazione e di interlinea per dimostrare come il fattore della leggibilità sia strettamente collegato alla dimensione dell’occhio

Il primo è il Verdana, disegnato da Matthew Carter nel 1996 per la Microsoft, da tutti considerato il miglior font in termini di leggibilità e infatti l’occhio del Verdana è estremamente grande.

È più facile da leggere in lunghi testi anche di un altro “big” della leggibilità, ovvero il Times New Roman, di Stanley Morison e Victor Lardent disegnato nel 1931 per il The Times.

Nettamente minore sono la leggibilità e la dimensione dell’occhio del Bodoni, di Giovan Battista Bodoni nel XVIII secolo, che, però, va detto che in grandi dimensioni garantisce un eleganza che Verdana e TNR si sognano di notte.

L’utilizzo di Kerning e Tracking

kerning e tracking

Il kerning, in italiano crenatura, e il tracking, o spaziatura, sono due termini importanti nella tipografia e due importanti elementi di un font.

Iniziamo subito col dire che il kerning, o crenatura è sostanzialmente il processo di gestione dello spazio tra due singole lettere all’interno di un font, mentre il tracking è la gestione dello spazio “totale” tra tutte le lettere e le parole di un font.

Il kerning viene utilizzato, nella creazione di un font, per rendere più armoniosa la composizione e più facile la lettura.

Perché? Perché, nonostante i caratteri stampati dell’alfabeto latino siano sempre stati progettati per avere una spaziatura meccanica automatica, alcune lettere, quando affiancate, creano degli effetti visivi non piacevoli a livello ottico.

Se provassimo, infatti, ad affiancare in modo meccanico e con spaziatura omogenea alcune lettere, come la A e la V o la A e la T, i caratteri ci apparirebbero troppo distanti, creando un effetto sgradevole che affaticherebbe gli occhi in fase di lettura.

Per evitare questa discrepanza, le nostre lettere vengono dunque avvicinate tra di loro in modo più marcato rispetto ad altre, ovviamente senza unirle o sovrapporle.

Questo fa sì che si venga a creare una più fluida composizione visiva.

Bisogna fare distinzione invece con il tracking, termine che, come detto, indica la spaziatura “totale” tra le lettere e le parole.

Aumentando o diminuendo il tracking (in italiano spaziatura o avvicinamento) si vanno infatti a modificare in modo proporzionale tutti gli spazi tra i vari caratteri nello stesso momento.

Quindi, se col kerning modifichi e gestisci solamente il calcolo dello spazio tra le singole coppie di lettere, con il tracking si va a modificare la spaziatura globale di tutto il testo.

Un tracking ben calcolato è di fondamentale importanza, permette infatti di garantire al cervello una rapida individuazione dell’inizio e della fine di una parola in un testo e quindi una maggiore leggibilità.

Conclusioni

Bene, con questo articolo mi sono addentrato ancora un po’ di più nel mondo dei font parlando di quelli che sono i più importanti elementi di un font.

Ci sono innumerevoli altri argomenti interessanti, ad esempio, sai quali sono i font preferiti dai designer? Te lo spiego qua, oltre a raccontarti la loro storia. Se invece sei interessato a come scegliere il font migliore per il tuo progetto allora ti consiglio di leggere questa guida completa alla scelta del font che ho scritto e che è piena di contenuti, risorse, esempi e consigli per scegliere il font perfetto ad ogni progetto.

Il passo finale per migliorare la tua conoscenza dei caratteri tipografici e per passare dalla teoria alla pratica è rappresentato da Font-ninja, il mio corso completo sull’universo dei font, che risponderà ad ogni tua perplessità.

Ma nel frattempo, che cosa ne pensi di questo articolo? Ritieni anche te che il Verdana sia il font più leggibile? Se no quale pensi sia meglio? Fammelo sapere, come sempre, nei commenti qui sotto!

Alla prossima, Lorenzo.

Commenti:

Ci sono 4 commenti in “Cose da sapere sugli elementi di un font”

  • lorenzo fino a qualche giorno fa non l’avrei nemmeno notato, ma da quando mi hai illuminato con la storia che la parola font è femminile non posso che farti una domanda: perchè in questo articolo è sempre maschile? c’è una differenza di utilizzo in contesti diversi? e comunque…complimenti! sono giorni che leggo senza sosta ed ho quasi terminato i tuoi articoli! scrivi scrivi scrivi

  • Ciao Lorenzo! 😄 Mi sono imbattuta in questo articolo perché sto approfondendo il discorso sul kerning e tracking. Su un libro di testo, precisamente “Caratteri, testo, gabbia” di Ellen Lupton leggo che il kerning è la spaziatura per diverse combinazioni di due lettere mentre il tracking è la variazione della spaziatura complessiva fra tutte le lettere. Quest’ultima definizione non coincide molto con la tua visione. Sono entrambe valide? Grazie!

    • È esattamente come scritto in quel libro. Nell’articolo (molto vecchio) ai tempi non avevo spiegato con le parole più giuste questo dettaglio. Ora ho corretto con la definizione migliore e più precisa :)

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

*