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.

Typeface composto da diversi font

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 ✨

Font variabile
Un font variabile si compone di un unico file.

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
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
Da v-fonts.com (lista completa)

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

Scarica qui

Pathway Extreme

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

Scarica qui

Fraunces

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

Scarica qui

Recursive

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

Scarica qui

Petrona

Axes: Weight
Designed by: Ringo R. Seeber

Scarica qui

Trispace

Axes: Weight, Width
Designed by: Etcetera Type Company

Scarica qui

Altre info

Altre informazioni sui font variabili le puoi trovare qui: