Tipografia Archivi • uiux.it

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:

Font: Acumin

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:

Da web.dev

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	❌

Da caniuse.com

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	❌