Font variabili
In questo articolo parlo di font variabili, di come funzionano e dei benefici che offrono. Prima di tutto è necessario fare un po di chiarezza.
Typeface e font: che differenza c'è?
Per comprendere il concetto e capire a pieno le potenzialità di un variable font, chiariamo la differenza tra typeface e font: un typeface include un'intera famiglia di caratteri, per esempio l'Helvetica, invece un font è uno solo dei file di quella famiglia, per esempio l'Helvetica Bold, quindi ogni stile è un file separato.

Cos'è un font variabile?
Un font variabile può includere una famiglia intera di stili di caratteri in un unico file ottimizzato: un unico magico file che opererà come la famiglia completa ✨

Com'è possibile?
Grazie a quelli che vengono chiamati axes, le strutture lineari che caratterizzano un font variabile. Cambiando il valore di un asse possiamo aumentare o diminuire una particolare trasformazione. Il designer che progetta il font variabile può creare tutti i tipi di assi, le possibilità sono quasi infinite. Ma siccome è più facile a vedersi che a spiegarsi, ecco un esempio:
Nulla di nuovo
In realtà non c'è nulla di nuovo nei variable font, perché questi sono apparsi molti anni fa ormai. I caratteri variabili OpenType sono un'estensione della specifica OpenType, introdotta in OpenType 1.8. Nel 2016, Adobe, Apple, Google e Microsoft hanno annunciato la tecnologia che consente a un singolo file di memorizzare una gamma di varianti di un carattere. E allora? Quello che è cambiato è che attualmente sono compatibili con molti browser e con alcuni software quindi potrebbe essere una scelta appetibile per i nostri progetti.
Anatomia di un font variabile
Nel progettare un font variabile si inizia con uno stile centrale detto "default", che solitamente corrisponderà alla versione Regular. Questo viene poi collegato e interpolato con gli altri stili.
Per esempio, l'asse più comune è il Weight, che in questo esempio collega Regular a Black e Regular a Thin. In questo esempio, tra le estremità Thin e Black potremo scegliere tra 800 varianti, dette istanze:

Benefici
1) Facilità gestionale
Un singolo file da installare, un singolo file da implementare nei nostri progetti = meno file da mantenere e gestire.
2) Dimensione
A parità di numero di stili compresi, i file dei font variabili, permettono di avere una riduzione tra il 70 e l'85% del peso.
3) Accessibilità
In un'interfaccia possono essere impostati facilmente per adattarsi al contesto, al device e alle preferenze per una migliore esperienza di lettura. Per esempio in una pagina web potremmo utilizzare la funzione CSS calc() sulle proprietà CSS per variare l'aspetto di un font in base alla larghezza del display del device.
4) Creatività
I font variabili permettono di animare facilmente i nostri caratteri ottenendo degli effetti particolarmente interessanti. Per esempio, i parametri di un asse possono essere animati tramite CSS:
Compatibilità browser
Attualmente i font variabili sono compatibili con la maggior parte dei browser internet.
Browser | Versione |
---|---|
Edge | ✅ 17+ |
Firefox | ✅ 62+ |
Chrome | ✅ 62+ |
Safari | ✅ 11+ |
Opera | ✅ 49+ |
Android Browser | ✅ 81+ |
Chrome per Android | ✅ 89+ |
Firefox per Android | ✅ 86+ |
Samsung Internet | ✅ 8.2+ |
Internet Explorer | ❌ |
Compatibilità applicazioni
Purtroppo, ad oggi (marzo 2021), la compatibilità con i software di design è un po' bassa:
Browser | Versione |
---|---|
Adobe Illustrator | ✅ CC 2018 (22.0.0)+ |
Adobe Photoshop | ✅ CC 2018 (19.0.0)+ |
Adobe InDesign | ✅ CC 2020 (15.0)+ |
Sketch | ✅ 59+ |
CorelDRAW Graphics Suite | ✅ 2020+ |
Quark Xpress | 🔜 Programmato |
Figma | 🔜 “Nella nostra lista, ma non stimata la data di arrivo” |
Affinity Designer | ❌ Bassa priorità |
Affinity Photo | ❌ Bassa priorità |
Affinity Publisher | ❌ No "per un po' di tempo" |
Adobe After Effects | ❌ |
Adobe Premiere Pro | ❌ |
Apple Motion | ❌ |
Apple Final Cut Pro | ❌ |
Dove scaricare variable font?
Di seguito una lista di siti dove puoi scaricare dei font variabili. Attenzione alle licenze, non tutti sono gratuiti per uso commerciale.
5 Font variabili gratis
Questa è una piccola selezione di alcuni font variabili che hanno attirato la mia attenzione, tutti gratuiti per uso commerciale.
Anybody
Axes: Weight, Width, Slant
Designed by: Etcetera Type Company



Pathway Extreme
Axes: Weight, Width, Optical, Slant
Designed by: Eduardo Tunni

Fraunces
Axes: Optical size, Weight, Softness, Wonky
Designed by: Undercase Type


Recursive
Axes: Monospace, Casual, Weight, Slant, Cursive
Designed by: Arrow Type

Petrona
Axes: Weight
Designed by: Ringo R. Seeber


Trispace
Axes: Weight, Width
Designed by: Etcetera Type Company

Altre info
Altre informazioni sui font variabili le puoi trovare qui:
- web.dev/variable-fonts/
- variable-fonts.com
- Episodio del podcast Palazzina Talks di Palazzina Creativa: Variable Font: storia di una rivoluzione tipografica