Una rivoluzione dei font per il mondo digitale. È stato questo uno degli argomenti principali della quarta edizione del CssDay di Faenza. La panoramica fornita da Giulia Laco ha evidenziato le tecnologie attuali di tipografia digitale e accennato agli scenari futuri con la progressiva introduzione dei Variable Fonts, vero motore di questo cambiamento. In realtà l’arrivo dei variable font è stato annunciato dai quattro giganti dell’era digitale – Microsoft, Google, Apple e Adobe – a settembre 2016, durante la conferenza ATypl di Varsavia, per questo possiamo definirlo coma la prima grande rivoluzione dopo l’introduzione degli OpenType nel 1994.
“While earlier font interpolation technologies emerged from the font format wars of the early 1990s, and were developed and championed by individual, competing software companies, OpenType variable fonts are the product of a new collegiality aimed not only at defining a common standard but also interoperable implementations.” John Hudson
Che cos’è OpenType e come lo usiamo oggi
La tecnologia che utilizziamo attualmente per la tipografia digitale deve le sue origini ad Adobe e Microsoft, che nel 1994 hanno introdotto OpenType. I vantaggi di OpenType rispetto ai già esistenti TrueType e Postscript sono molteplici: OpenType è cross-platform, può ospitare più di 65.000 glifi per font e adotta gli standard Unicode, per cui ogni glifo corrisponde un codice univoco internazionale. Ma soprattutto con OpenType sono nate le superfamiglie di caratteri. Oggi possiamo scegliere Monteserrat Thin, Extra-Light, Light, Regular, Medium, Semi-bold, Bold, Extra-bold, Black e i relativi italic, senza limitarci a Bold e Italic.
I Variable Font
La definizione dei Variable Font, il cui termine ufficiale è “OpenType Font Variations”, ce la fornisce John Hudson in un suo tweet:
“A single font that behaves like multiple fonts”
Si tratta quindi di un singolo font che si comporta come più font, questo grazie alla possibilità di modulare fluidamente un numero pressoché infinito di variabili, chiamate assi. Gli assi possibili sono oltre 64.000 ed è il type designer a decidere quali assi mettere a disposizione del singolo font. Le modifiche su ogni asse poi avvengono fluidamente. Ad esempio sull’asse del peso posso scegliere un qualunque valore intermedio fra i master prefissati dal type designer. A dire il vero anche la presenza dei master – gli estremi – di ogni asse è a discrezione del progettista del font, quindi potremmo avere un numero infinito di valori per ogni asse.
Gli assi possono riguardare qualsiasi variabile dello stile: peso, presenza e tipo di grazie, proporzione orizzontale e verticale, inclinazione dei caratteri, etc.
Di seguito ho riportato un’interessante illustrazione di John Hudson che mostra come funzionano gli assi, in particolare il comportamento di un font con 3 assi. Il glifo rosso al centro indica i profili di default impostati dal type designer, i glifi verdi sono gli estremi dei 3 assi e i glifi arancioni sono le posizioni d’angolo. Ovviamente l’illustrazione rappresenta un cubo perché stiamo lavorando con 3 assi, ma potrebbe essere un rettangolo se lavorassimo con 2 assi, una linea se ci fosse solo un asse o un iperspazio a più dimensioni se ci fossero >3 assi. Inoltre questa è un’illustrazione normalizzata, dal momento che la distanza fra gli estremi e la posizione di default è la stessa.
Già così si percepisce la quantità di variabili per ogni font messo a disposizione, ma con l’esempio seguente capiamo la reale portata delle possibilità effettive dei Variable Font.
La seguente illustrazione ci mostra un font con due assi: peso e larghezza. Con 6 variazioni per ogni asse, abbiamo creato 36 font diversi, all’interno di un unico file. Tuttavia le variazioni per ogni singolo asse potrebbero arrivare teoricamente a 1000, costruendo una matrice 1000×1000, un milione di variazioni. Se introduciamo un terzo asse arriviamo ad un bilione di variazioni possibili.
Di seguito 3 esempi forniti dalla Adobe per il supporto delle Variable Font in Photoshop.
A questo è facile capire che le Variable Font possono virtualmente gestire ogni aspetto del disegno di un carattere.
Come si integrano
Prima di tutto bisogna inserire il font designato nella pagina come un qualsiasi altro web font. Ad esempio, è possibile utilizzare le regole di @font-face.
@font-face {
font-family: "Avenir Next Variable";
src: url("AvenirNext_Variable.ttf") format("truetype");
}
È possibile trovare diversi Variable Font su Axis Praxis, ma anche la Adobe sta trasformando i suoi font più famosi in Variable Font.
A questo punto è importante, definirlo con la regola font-variation-settings.
body {
font-family: "Avenir Next Variable";
color: rgb(0, 0, 0);
font-size: 148px;
font-variation-settings: 'wght' 631.164, 'wdth' 88.6799;
}
Per gli assi si può utilizzare qualsiasi valore tra il minimo e il massimo impostato dal type designer, ma è fondamentale specificare un valore per tutti gli assi del font.
Perciò se il nostro font prevede 15 assi, dovremo dichiararli tutti.
div {
font-family: Decovar;
font-variation-settings: 'INLN' 285.094, 'TSHR' 346.594,
'TRSB' 786.377, 'SSTR' 84.268, 'TWRM' 200, 'SINL' 84.268,
'TOIL' 0, 'TINL' 91.983, 'WORM' 0, 'wght' 400, 'TFLR' 0,
'TRND' 0, 'SWRM' 0, 'TSLB' 277.155, 'TBIF' 0;
}
Quali sono i vantaggi?
1. risparmio fisico
Il vantaggio fondamentale degli OpenType 1.8 risiede nell’enorme risparmio di spazio fisico, sia su disco che online. Se oggi vogliamo caricare 12 varianti di Roboto, dobbiamo caricare 12 file. Con i Variable font dobbiamo caricare un solo file per un numero infinito di varianti.
Riporto l’esempio spiegato da Microsoft alla conferenza di Varsavia 2016. Se carichiamo il carattere Segoe UI attuale, con 5 varianti da Light a Bold, occupiamo 657 kb. La versione OpenType 1.8 di Segoe UI occupa invece soli 199 kb, con un conseguente divario di caricamento online tra le due versioni che in termini di performance è un’enormità.
2. Più opzioni e varianti
Il secondo vantaggio chiaramente visibile è la quantità di opzioni e varianti a disposizione dei creativi e dei grafici. In questo modo è possibile gestire al meglio alfabeti diversi, simboli e glifi.
3. Tipografia responsiva
Infine, l’OpenType 1.8 crea un font che può comportarsi in modo diverso a seconda delle variabili fisiche in cui è utilizzato: se ad esempio lo utilizziamo su uno schermo più o meno grande, in versione landscape o portrait. Potremmo pensare di rendere il contenuto più leggibile utilizzando una variante dal peso maggiore su schermi piccoli, che si alleggerisce man mano che lo schermo o lo zoom aumenta. Oppure potremmo utilizzare l’asse della larghezza del font per utilizzare una variante condensed se lo schermo è in versione portrait e una variante regular se lo schermo è in versione landscape. Si tratta così di accostarsi ad un movimento fluido del font che porta verso la responsive typography.
Il prossimo futuro? L’integrazione
I variable font sono considerati ancora una novità e come tali richiederanno diversi passaggi per poter godere di una completa integrazione.
I software di progettazione grafica, con gli ultimi aggiornamenti di Photoshop e Illustrator di ottobre 2017, supportano già appieno i variable font.
L’integrazione con i browser, invece, è ancora un work in progress. Tuttavia se a novembre 2017 solo il 7% dei browser supportava i variable font, a gennaio la percentuale era salita ad oltre il 60%. Questo vuol dire che i variable font sono una tecnologia già utilizzabile.
Infine c’è da tenere in considerazione la disponibilità assai limitata di font ad utilizzo commerciale, a oggi disponibili. Invece si possono già trovare numerosi esempi, liberi da licenza, su Axis Praxis.
Conclusioni
La transizione dai web font che conosciamo oggi ai Variable Font sarà come passare da una JPEG a SVG vettoriale: probabilmente coesisteranno a lungo, ma il vantaggio dei Variable Font sarà sempre più visibile. Noi stiamo già pensando di applicare questo approccio ai prossimi progetto, specialmente in ambito mobile.
Per approfondire
- OpenType 1.8, specifiche
- Annuncio dai 3 big: Adobe, Google, Microsoft
- Introducing OpenType Variable Fonts