Peso, apertura, contrasto e inclinazione

Parliamo di questi concetti fondamentali della tipografia: peso, apertura dei glifi, contrasto e inclinazione. Sono caratteristiche che definiscono l’aspetto e la funzionalità di un carattere tipografico, influenzandone leggibilità, estetica e utilizzo.

Il peso si riferisce allo spessore dei tratti che compongono le lettere di un carattere tipografico ed è una misura della sua “robustezza” visiva. Può variare da leggero a normale, medio, grassetto, fino a molto pesante, come nelle versioni black o heavy. Un peso leggero dà un aspetto delicato e minimale, mentre un peso grassetto o black appare più deciso e attira l’attenzione. Ad esempio, Helvetica Light è sottile e discreto, mentre Helvetica Bold è forte e dominante. Questo aspetto influenza la gerarchia visiva, come l’uso di titoli in grassetto e corpo del testo in normale, oltre alla leggibilità in diversi contesti, come schermi o stampa.

L’apertura dei glifi è lo spazio tra i tratti di un glifo, in particolare nelle lettere come “a”, “c”, “e”, “g” o “s”, dove ci sono “ingressi” o “uscite” parziali. Quando è ampia, come in Frutiger, rende i glifi più leggibili, specialmente a piccole dimensioni o in contesti come la segnaletica; quando è stretta, come in Helvetica, dà un aspetto più compatto e uniforme. Un’apertura ampia migliora la distinzione tra lettere simili, come “c” ed “e”, mentre una più chiusa può rendere il testo più denso e stilizzato. Confrontando la “e” di Gill Sans, con un’apertura ampia, e quella di Futura, più stretta, si nota chiaramente la differenza.

Il contrasto è la differenza di spessore tra i tratti più sottili e quelli più spessi all’interno di un glifo, una caratteristica che deriva dalla scrittura calligrafica con pennino. Può essere alto, con una grande differenza tra tratti spessi e sottili, come in Bodoni o, in misura minore, in Optima, oppure basso, con tratti quasi uniformi, come in Helvetica o Gill Sans. In alcuni casi, come in Futura, il contrasto è praticamente assente, con uno spessore uniforme. Un contrasto alto dà eleganza e raffinatezza, ma può ridurre la leggibilità a piccole dimensioni, mentre un contrasto basso o assente risulta più moderno e pratico. Nei sans serif umanisti, come Frutiger, il contrasto è spesso minimo ma presente, per imitare la modulazione della scrittura a mano.

L’inclinazione si riferisce all’angolazione dell’asse delle curve o dei tratti di un carattere tipografico, visibile soprattutto in lettere come “o” o “e”, e può anche riguardare la variante corsiva. Quando l’asse è verticale, come in Futura, il design appare dritto e perpendicolare alla linea di base; quando è inclinato, come in Gill Sans o Frutiger, richiama la scrittura manuale, dando un senso di movimento e organicità. Nei corsivi, o italic, l’inclinazione serve a enfatizzare o differenziare il testo, con glifi spesso ridisegnati rispetto alla versione normale, come si vede in Garamond. Nei sans serif, l’inclinazione è generalmente più sottile rispetto ai serif, dove il contrasto e l’asse sono più marcati.

Questi elementi sono interconnessi: il peso influenza la percezione del contrasto, perché un font in grassetto può sembrare più contrastato anche se il design di base è uniforme; l’apertura interagisce con il peso, dato che glifi leggeri con aperture strette possono risultare meno leggibili; contrasto e inclinazione, legati alla tradizione calligrafica, definiscono il “carattere” del font, distinguendo ad esempio un design geometrico da uno umanista.

La struttura di un carattere tipografico

Grazie

Le grazie (in inglese serifs) sono piccole estensioni o tratti aggiuntivi presenti alle estremità delle linee principali di un carattere tipografico. Sono una caratteristica distintiva dei font classificati come serif, in contrasto con i font sans-serif (senza grazie). Le grazie possono essere considerate un elemento decorativo ma hanno anche una funzione pratica, legata alla leggibilità e alla tradizione della scrittura.

Le grazie derivano storicamente dalla calligrafia e dall’incisione su pietra nell’antichità (es. iscrizioni romane), dove i tratti finali delle lettere venivano rifiniti con piccoli dettagli per migliorare la chiarezza o per effetto dello scalpello. Con l’avvento della stampa, questa caratteristica è stata adottata e stilizzata nei caratteri tipografici.

Le grazie variano per forma, dimensione e stile, influenzando l’estetica e l’uso del font. Le grazie aiutano a guidare l’occhio lungo le righe di testo, migliorando la leggibilità nei testi lunghi (es. libri, giornali). esse conferiscono un aspetto classico, elegante o formale, a seconda del design. Le grazie possono apparire alla fine di tratti verticali, orizzontali o diagonali, con orientamenti diversi (orizzontali, inclinati, curvi). Possono essere sottili e raffinate o spesse e marcate, in base al contrasto del font.

Le grazie possono essere corte e discrete o lunghe e prominenti, influenzando la percezione del carattere.

X-height

La X-height (altezza-x) è l’altezza delle minuscole senza ascendenti o discendenti (es. “x”, “n”), dalla linea di base alla linea mediana. Un’x-height alta (es. Helvetica) aumenta la leggibilità a piccole dimensioni, mentre una bassa (es. Garamond) offre un aspetto classico.

Una maggiore x-height può migliorare la leggibilità, soprattutto in testi a piccole dimensioni, perché aumenta la dimensione apparente delle lettere. Questo è particolarmente utile per la lettura di lunghi testi su schermi digitali o stampati su carta di bassa qualità.

La x-height influisce sull’aspetto generale di un carattere tipografico. Un carattere con una x-height alta apparirà più grande e più leggibile, mentre un carattere con una x-height bassa sembrerà più elegante e sofisticato, ma potrebbe essere meno leggibile a piccole dimensioni.

La x-height influenza la quantità di spazio verticale che il testo occupa. Un carattere con una x-height alta avrà generalmente meno spazio tra le linee (leading) rispetto a un carattere con una x-height bassa.

Le componenti della x-height sono: linea di base (la linea su cui poggiano le lettere) e linea della x-height (linea immaginaria che tocca la parte superiore della lettera “x” minuscola e altre lettere minuscole simili come “a”, “c”, “e”, “m”, “n”, “o”, “r”, “s”, “u”, “v”, “w”, “x”, “z”)

Asta

L’asta (stem) è il tratto verticale o diagonale principale (es. “l”, “t”), base strutturale della lettera, con uno spessore che definisce il contrasto. Le aste ascendenti e aste discendenti sono componenti importanti delle lettere minuscole, che influenzano notevolmente la leggibilità e l’aspetto complessivo del testo.

L’asta ascendente è la parte di una lettera minuscola che si estende al di sopra della x-height. Questo elemento si trova in lettere come “b”, “d”, “f”, “h”, “k”, “l”, e “t”.

L’asta discendente è la parte di una lettera minuscola che si estende al di sotto della linea di base. Questo elemento si trova in lettere come “g”, “j”, “p”, “q”, e “y”.

Altri componenti

Gli occhielli (counter) sono gli spazi interni chiusi o semiaperti di una lettera, come nella “o”, “e” o “g”. La loro forma e dimensione influenzano la chiarezza: occhielli ampi (es. Verdana) favoriscono la lettura digitale, mentre occhielli stretti (es. Bodoni) danno eleganza.

Il traverso (crossbar) è il tratto orizzontale che collega o attraversa un’asta (es. “H”, “A”), influisce sulle proporzioni.

L’apex è il punto più alto di una lettera angolata (es. “A”), mentre il vertex è il più basso (es. “V”).

Le spalle (shoulder) sono le curve che collegano asta e traverso (es. “n”, “h”), da morbide a squadrate.

La gamba (leg) è il tratto diagonale o verticale discendente (es. “R”, “K”), aggiunge dinamismo.

La coda (tail) è un prolungamento decorativo (es. “Q”, “g”), variabile per stile.

Il terminale (terminal) è l’estremità di un tratto senza grazia (es. “s” in Sans-Serif), dritto o curvo.

L’hinting

L’hinting è una tecnica utilizzata nella tipografia digitale per migliorare la leggibilità e la resa visiva dei font su schermi a bassa risoluzione. Si tratta di un processo che modifica leggermente le forme dei caratteri per adattarle meglio alla griglia di pixel del dispositivo su cui vengono visualizzati. Questo è particolarmente importante per garantire che i font appaiano nitidi e ben definiti, soprattutto in dimensioni ridotte.

Le legature

Le legature sono combinazioni speciali di due o più lettere che vengono progettate e utilizzate come un singolo glifo o carattere. Questo viene fatto per migliorare l’estetica e la leggibilità del testo, ridurre il numero di caratteri utilizzati e migliorare il flusso del testo.

Le legature standard sono le più comuni e includono combinazioni di lettere che si trovano frequentemente vicine l’una all’altra. Ad esempio, le legature “fi”, “fl”, “ff”, “ffi”, “ffl” sono comunemente utilizzate per migliorare l’aspetto del testo e ridurre il numero di spazi bianchi indesiderati tra le lettere.

Le legature stilistiche sono progettate per migliorare l’estetica e l’armonia del testo. Queste legature possono essere più decorative e meno frequentemente utilizzate rispetto alle legature standard. Possono essere presenti in caratteri progettati per scopi artistici o decorativi.

Interlinea

Con il termine leading (“interlinea”) ci si riferisce alla distanza verticale tra le linee di testo in un paragrafo. Più specificamente, è la distanza tra la linea di base di una riga di testo e la linea di base della riga successiva. La linea di base è la linea immaginaria su cui poggiano le lettere. Il termine leading deriva dalla pratica tipografica tradizionale in cui strisce di piombo (“lead” in inglese) venivano inserite tra le righe di testo per aumentare lo spazio verticale.

Tipi di Leading

Leading automatico: La maggior parte dei software di desktop publishing, come Adobe Illustrator o InDesign, calcolano automaticamente il leading basandosi sulla dimensione del carattere. Di solito, il leading automatico è impostato a circa il 120% della dimensione del carattere. Ad esempio, se il carattere è di 10 pt, il leading automatico sarà di 12 pt.

Leading manuale: Il designer può scegliere di regolare manualmente il leading per ottenere un effetto visivo specifico o per migliorare la leggibilità in base al contesto del design.

Kerning

Con il termine kerning (“crenatura” in italiano) ci si riferisce alla regolazione dello spazio tra coppie di lettere in un testo con l’obiettivo di migliorare la leggibilità e l’aspetto estetico del testo stesso.

Tipologie di kerning:

Kerning automatico (Auto kerning): Questo è il kerning predefinito che viene impostato automaticamente dal software basato sui dati della font utilizzata. Adobe Illustrator utilizza il valore di kerning fornito dal designer della font per determinare la spaziatura ottimale tra le lettere. In molti casi, questo valore è sufficiente per garantire una buona leggibilità.

Kerning metrico (Metric kerning): Anche noto come “kerning metrico”, questo tipo di kerning utilizza le informazioni di spaziatura predefinite incorporate nella font stessa. Questi valori sono specificati dal designer della font e sono progettati per funzionare bene con quella particolare font. È simile al kerning automatico, ma il termine “metric” viene utilizzato specificamente per sottolineare che sta usando i valori predefiniti della font.

Kerning ottico (Optical kerning): Quando si utilizza il kerning ottico, Adobe Illustrator calcola automaticamente la spaziatura tra le lettere in base alla loro forma e dimensione, piuttosto che basarsi sui valori predefiniti della font. Questo può essere utile per testi che utilizzano font meno standardizzate o per combinazioni di caratteri che non vengono gestite bene dal kerning metrico.

Kerning manuale (Manual kerning): Con il kerning manuale, l’utente può regolare manualmente la spaziatura tra singole coppie di lettere. Questo tipo di kerning permette un controllo molto preciso, consentendo di personalizzare esattamente lo spazio tra le lettere per ottenere l’aspetto desiderato. In Illustrator, questo può essere fatto selezionando la coppia di lettere desiderata e utilizzando i tasti freccia o inserendo un valore numerico specifico per regolare la spaziatura.

Tracking

Il tracking (“avvicinamento”) o letter-spacing si riferisce alla regolazione uniforme dello spazio tra tutti i caratteri in una porzione di testo, piuttosto che tra singole coppie di lettere come nel kerning. Il tracking può essere utilizzato per influenzare l’aspetto complessivo e la leggibilità del testo su una scala più ampia.

A differenza del kerning, che si concentra sulle spaziature specifiche tra coppie di lettere, il tracking viene applicato a intere parole, frasi, paragrafi o blocchi di testo. Può essere utilizzato per creare effetti stilistici o per adattare il testo a un layout specifico.

Le correzioni ottiche

Le correzioni ottiche sono aggiustamenti visivi per compensare le illusioni percettive dell’occhio umano, garantendo che le lettere appaiano equilibrate.

Questi accorgimenti derivano dal fatto che l’occhio umano non percepisce le forme in modo geometricamente perfetto. Senza correzioni ottiche, un font potrebbe sembrare sbilanciato o poco leggibile, anche se tecnicamente preciso. I grandi tipografi, come quelli che hanno creato font classici (es. Garamond, Helvetica), hanno sempre usato queste tecniche per migliorare l’estetica e la funzionalità.

Questi aggiustamenti non seguono regole matematiche rigide, ma si basano sulla percezione visiva.

Ecco alcuni concetti chiave:

Overshoot (sovradimensionamento) L’overshoot si riferisce all’estensione intenzionale di alcune parti di un carattere (come le curve di lettere tondeggianti “O”, “Q” o “S”) oltre la linea di base o l’altezza delle lettere rettilinee (come “H” o “I”). Questo serve a far sembrare le lettere tondeggianti della stessa altezza delle lettere dritte, evitando che appaiano troppo piccole a causa della percezione ottica.

Ad esempio: senza overshoot, una “O” sembrerebbe più bassa di una “H”, anche se matematicamente sono allineate. Con l’overshoot, la “O” viene leggermente “esagerata” in altezza o spessore per bilanciare l’effetto visivo.

Arrotondamento L’arrotondamento riguarda il modo in cui le curve dei caratteri vengono progettate per sembrare fluide e naturali. Spesso, i tipografi regolano il raggio delle curve per evitare che sembrino troppo piatte o irregolari. Questo è particolarmente importante nei font serif o sans-serif con dettagli curvi (es. “g”, “a”). L’arrotondamento può anche riferirsi a una tecnica per ammorbidire gli angoli nei caratteri, rendendoli meno rigidi.

Allineamento delle aste Le linee verticali (es. in “l” o “t”) possono essere leggermente inclinate o adattate per sembrare dritte, dato che l’occhio umano tende a percepire distorsioni.

I font variabili

I font variabili (o variable fonts) sono una tecnologia tipografica che consente di racchiudere più stili all’interno di un solo file, invece di dover utilizzare file separati per ogni variante di un font, come Regular, Bold, Italic e così via. Questo è possibile grazie all’uso delle OpenType Font Variations, una specifica introdotta nel 2016 da Microsoft, Google, Apple e Adobe.

A differenza dei font tradizionali, che richiedono un file distinto per ogni variante, un font variabile include assi di variazione che permettono di modificare in modo continuo caratteristiche come il peso (wght), la larghezza (wdth), l’inclinazione (slnt), lo stile corsivo (ital) o la dimensione ottica (opsz). Alcuni font includono anche assi personalizzati, definiti dai designer. Grazie a questi assi, è possibile ottenere non solo le versioni canoniche come Light o Bold, ma anche valori intermedi, ad esempio un peso 523, che normalmente non esisterebbe in una famiglia tipografica tradizionale.

Dal punto di vista pratico, questo significa che, invece di avere diversi file come Roboto-Regular.ttf, Roboto-Bold.ttf o Roboto-Light.ttf, con un font variabile come Roboto Variable si può gestire tutto tramite un unico file, ottenendo qualsiasi variazione desiderata attraverso un controllo diretto, ad esempio via CSS nel web design.

I vantaggi sono numerosi. Si riduce il numero di file da caricare, con un conseguente miglioramento delle prestazioni, specialmente nelle pagine web. Si ottiene anche una flessibilità creativa molto maggiore, potendo regolare in modo preciso il peso, la larghezza e altri aspetti del testo. Questo rende i font variabili particolarmente adatti al design responsivo, dove lo stile tipografico può adattarsi dinamicamente al contesto o al dispositivo dell’utente. I font variabili offrono inoltre un controllo molto più granulare, ad esempio potendo impostare un peso esatto come font-weight: 526 in CSS, cosa impossibile con i font statici.

Ci sono tuttavia anche alcuni limiti. Non tutti i browser o i software supportano ancora pienamente i font variabili, anche se il supporto sta crescendo costantemente. Inoltre, per chi è alle prime armi, l’uso dei font variabili può risultare un po’ più complesso rispetto ai font tradizionali.

I font variabili più famosi

Esistono moltissimi font variabili, sia open source che commerciali, ampiamente usati nel design grafico e nel web. Alcuni dei più noti e apprezzati includono Roboto Flex, che è una versione avanzata di Roboto con decine di assi di variazione, e Inter Variable, pensato specificamente per l’interfaccia utente digitale. Ci sono poi font classici ripensati in chiave variabile come Source Serif Variable e Source Sans Variable, entrambi sviluppati da Adobe.

Un altro font molto utilizzato è Recursive, estremamente versatile perché combina un design monospace e proporzionale in un solo file, adattabile anche a diversi stili di scrittura. Work Sans Variable e Nunito Sans Variable sono due altre famiglie che offrono grande controllo tra pesi e larghezze, molto usate in ambienti digitali moderni.

Fira Code Variable è invece pensato per la programmazione, con supporto per ligature e variazioni visive utili per l’ambiente di coding. JetBrains Mono Variable segue la stessa direzione, con una resa ottimizzata per la scrittura di codice. In ambito editoriale e più tradizionale, troviamo EB Garamond Variable, che propone un’impostazione classica con assi di variazione per peso e dimensione ottica.

Fra i font più recenti, Lexend Variable è progettato per migliorare la leggibilità e la velocità di lettura, mentre Atkinson Hyperlegible Variable è stato pensato per chi ha difficoltà visive, con tratti ben distinguibili. Un’altra proposta molto apprezzata è Spline Sans Variable, elegante e pulito, adatto a progetti editoriali e corporate.

Raleway Variable è un sans serif moderno con una buona escursione nei pesi, come anche IBM Plex Sans Variable, parte di un sistema tipografico pensato per la comunicazione digitale. Fra i serif più eleganti c’è Tektur Variable, dal design leggermente tecnico, e Vollkorn Variable, un serif robusto ma raffinato. Inoltre, ci sono font come Urbanist Variable, General Sans Variable, e Manrope Variable, tutti con una forte vocazione per il web design contemporaneo.

Infine, Space Grotesk Variable chiude la lista come esempio di sans geometrico altamente leggibile e versatile, perfetto per branding e UI. Tutti questi font sono spesso disponibili su Google Fonts o GitHub e supportano assi come peso, larghezza, inclinazione e dimensione ottica.

L’optical size

Optical size (in italiano: dimensione ottica) è un asse di variazione nei font variabili (ma esisteva anche nei font tradizionali) che serve ad ottimizzare l’aspetto del carattere tipografico in base alla sua dimensione di utilizzo. Lo stesso carattere può in pratica essere leggermente diverso se lo usi a corpo piccolo (ad esempio 8 pt) o a corpo grande (ad esempio 72 pt), per migliorare leggibilità e equilibrio visivo a seconda del contesto.

Quando un font supporta l’optical size (opsz), si adatta automaticamente (o manualmente, se specificato) alla dimensione del testo. Ecco cosa può cambiare in base alla dimensione.

Quando un carattere viene utilizzato a corpo piccolo, come nel testo di lettura, le lettere tendono ad avere forme più aperte, con tratti sottili leggermente ispessiti per evitare che scompaiano alla lettura. Anche gli spazi interni, detti controcampi, risultano più ampi, e le grazie, se presenti, sono generalmente semplificate per non appesantire il testo e migliorarne la leggibilità.

Al contrario, a corpo grande, come nei titoli o nelle affissioni, le lettere assumono un aspetto più raffinato e sottile. I dettagli tipografici diventano più marcati, e i tratti possono presentare un contrasto maggiore, contribuendo a creare un effetto visivo più elegante e ricercato.

L’optical size migliora la leggibilità del testo in contesti diversi e garantisce che il font sia sempre visivamente bilanciato, evitando che un testo piccolo appaia troppo sottile o che un titolo grande sembri goffo o pesante.

Un font come EB Garamond o Source Serif Variable può variare automaticamente il disegno dei caratteri quando passi da 10 pt a 72 pt, adattando grazia, contrasto e spaziatura per ciascuna dimensione. In un software o su web, l’optical size può essere impostata anche manualmente con la proprietà CSS:

font-optical-sizing: auto;
font-variation-settings: "opsz" 12;

Per approfondire

Libri

“Designing Type“, di Karen Cheng. Feltrinelli

Video

Designing Type: The More I Learn, The Less I Know: Karen Cheng