#Design

Variable Font, storia di una rivoluzione tipografica

Gianluca Vedovato
Gianluca Vedovato
gennaio 2020 - 4 minuti
tavole da disegno

La nuova grande rivoluzione nell’utilizzo di font nel web avvenne nel 2016 con il rilascio della versione 1.8 di OpenType. Quattro pilastri della tecnologia mondiale come Apple, Microsoft, Google e Adobe unirono le loro forze per la creazione dell’ Open Type font variation, meglio conosciuto con il nome di Variable font.

Prima di entrare nel dettaglio facciamo un passo indietro nel tempo e rispolveriamo qualche pagina di storia.

Storia dei font nel web

Alle origini del web, i font potevano essere selezionati solo tramite le impostazioni del browser, senza alcuna possibilità di utilizzare determinati caratteri per diversi siti. Solo a metà degli anni ‘90 sono stati progettati i primi font per il web: Georgia e Verdana. Questi, assieme ai font di sistema più comuni, erano gli unici utilizzati nei siti dell’epoca. Per gli anni seguenti, nonostante il supporto a @font-face, i soli font che potevano essere utilizzati erano quelli installati nei dispositivi, per aggirare questo problema l’unica soluzione era quella di utilizzare immagini al posto del testo.

Solo nel 2012, grazie al  CSS3 Fonts Module, diventò possibile il download di font per la visualizzazione di siti web. Grazie a questo sistema i font venivano caricati sul server e scaricati solamente per la visualizzazione all’interno del sito, senza il bisogno di installare file nel sistema operativo.

Variable font, cosa sono e come sono costruiti

Se fino al 2016 ogni famiglia di font doveva essere contenuta in più file, con i variable font è necessario un solo unico font che racchiude più stili e varianti. In questo modo il peso dei file dei font da scaricare e le richieste HTTP diventano di gran lunga inferiori e sarà così possibile avere un design più vario senza alcuna limitazione di numero di font utilizzati.

Le variazioni dei font avvengono grazie all’interpolazione tra varie versioni dei font stessi. Per interpolazione in matematica si intende la determinazione approssimata dei valori intermedi di una funzione o di una grandezza, a partire da un numero di valori noti. Nella tipografia per interpolazione intendiamo la generazione di nuovi font a partire da alcune istanze già esistenti. Quindi, a partire da alcune versioni di font (chiamate  master ) sarà possibile generare un numero pressoché infinito di font con caratteristiche intermedie alle forme master. Ad esempio, sarà possibile generare numerosi pesi intermedi tra la versione regular e la versione bold. Oltre al peso, sarà possibile modificare tutte le caratteristiche strutturali come larghezza, contrasto, grazie, dimensioni ottiche, ecc. avendo così la possibilità di ottenere un numero quasi illimitato di variazioni di un stesso font.

Un variable font è contenuto in un unico file dove vengono definiti vari assi sui quali la forma verrà modificata. Modificando i valori sull’asse, verranno generati nuovi font grazie all’interpolazione dei punti sulle forme master. All’apertura del file gli assi avranno un valore di default. Sarà poi possibile creare delle istanze del font per orientare il designer su alcuni stili predefiniti (come ad esempio i più conosciuti regular, bold, extended, condensed, ecc.). Il numero di assi modificabili su un font è molto ampio (65.536, per la precisione), e il nome degli assi è personalizzabile a discrezione dell’utente, nonostante esistano alcuni standard da seguire.

Perché utilizzare i variable font?

I variable font diventano molto utili quando è necessario utilizzare più versioni di un font all’interno di un sito web. Non sarà più necessario dover caricare in un sito molteplici file, allungando così i tempi di caricamento della pagina web. Basterà soltanto un unico file che contiene più pesi e variazioni del font che si vuole utilizzare.

Per esempio, se dovessimo utilizzare 5 pesi/varianti di un font (Light, Regular, Bold, Semi Bold, Condensed Regular) dovremmo caricare 5 file per un peso complessivo di circa 200Kb e saremmo comunque forzati ad utilizzare solamente queste 5 versioni del font scelto. Un variable font è invece racchiuso un unico file che ha un peso intorno agli 80Kb. Quindi, oltre a risparmiare sul peso dei file da caricare, avremmo anche un risparmio di richieste HTTP e una maggiore creatività da parte del designer che può utilizzare un numero di font molto più ampio rispetto al passato.