Variable Fonts: la rivoluzione è già qui!

In questo articolo esamineremo cosa sono i font variabili, i vantaggi che offrono e come possiamo utilizzarli nel nostro lavoro. In primo luogo faremo una piccola analisi di come funziona la tipografia sul web e delle innovazioni portate dall’utilizzo dei font variabili.

FACCIAMO CHIAREZZA

Font vs typeface

I termini font e typeface sono spesso usati in modo intercambiabile, tuttavia c’è una differenza:
Font è un singolo file e ad ogni file corrisponde un font (es. regular).
Typeface è il tipo di carattere tipografico (design).
In altre parole, un carattere tipografico è ciò che si vede, il font è ciò che si usa.
Ad esempio: Roboto è un typeface (design) e il file Roboto_medium.otf è un font (meglio: uno dei font che compongono la famiglia dei font Roboto).


CHI HA VOLUTO I FONT VARIABILI?

L’arrivo dei variable font è stato annunciato durante la conferenza ATypI (Association TYPographique Internationale) di Varsavia nel settembre del 2016, dai quattro giganti dell’era digitale: Microsoft, Google, Apple e Adobe, che hanno unito le forze e fatto fronte comune! Per questo possiamo definirla come la prima grande rivoluzione dopo l’introduzione degli OpenType nel 1994.

CAN I USE?

Come potete vedere dallo screenshot, finalmente i variable fonts sono supportati dalla maggior parte dei browser.

COSA SONO E COME FUNZIONANO

Dalton Maag: Aktiv Grotesk


La vera differenza tra un font statico e uno variabile è che un font statico è un OpenType, mentre un font variabile è l’evoluzione del classico OpenType nella versione 1.8 ed ha, in aggiunta, delle tabelle di variazioni che permettono di gestire il font in maniera differente.

Li troviamo sempre nei formati OTF e TTF e anche nei formati compressi WOFF e WOFF2 (quest’ultimo risulta più compresso del WOFF)

L’asse di variazione non consente solo di passare, per esempio, da un Semi-Bold ad un Regular con lo stesso file, ma permette anche di definire un qualsiasi spessore compreso fra i due, a nostra totale discrezione. Tutto ciò avviene tramite specifici assi di variazione che modificano le proprietà, rendendo il font completamente “fluido”. Grazie ai variable fonts non è più un intoppo trovare la larghezza o lo spessore ricercato, che potrà essere settato senza problemi.

“A variable font is a single font file that behaves like multiple fonts.”
John Hudson, Set 2016
(Un font variabile è un singolo file di font che si comporta come più font)

See the Pen Variable font demo by Frida Nyvall (@fridanyvall) on CodePen.

PERCHÈ SCEGLIERLI

I variable font diventano molto utili quando è necessario utilizzare più versioni di un font all’interno di un sito web. Se fino al 2016 ogni famiglia di font doveva essere contenuta in molteplici file, con i variable font è necessario un solo unico font che racchiude più stili e varianti. Queste varianti possono comprendere anche effetti ombra e bagliori o bordi. 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.


Credit: Oliver Schöndorfer https://www.zeichenschatz.net

COME LI IMPLEMENTO?

Quando si inizia a creare un nuovo progetto web, la famiglia di un font viene utilizzata sia durante la realizzazione grafica, sia durante il processo di sviluppo. Come posso quindi implementare i font variabili?

Inclusione nel progetto

L’implementazione di questa tipologia di font è la stessa di un font tradizionale, con qualche istruzione in più da aggiungere, e si lavora esclusivamente tramite fogli di stile.

In CSS si importa il font attraverso il @font-face:

@font-face {
    font-family: 'Source Sans Variable';
    font-weight: 200 900;
    font-style: normal;
    font-stretch: normal;
    src: url('../fonts/SourceSansVariable/WOFF2/SourceSansVariable-Roman.ttf.woff2') format('woff2'),
url('../fonts/SourceSansVariable/WOFF/SourceSansVariable-Roman.ttf.woff') format('woff'),
url('../fonts/SourceSansVariable/VAR/SourceSansVariable-Roman.ttf') format('truetype');
}
body { font-family: 'Source Sans Variable'; }

E si applicano semplicemente i valori desiderati:

h1 { font-size: 3em; font-weight: 876; }
p { font-size: 1em; font-weight: 410; }

In HTML, invece, non occorre scrivere nemmeno una riga.

COME POSSO GESTIRE I VECCHI BROWSER?

Con i vecchi browser che non supportano i variable fonts, possiamo usare un’istruzione del CSS. Nel foglio di stile implementiamo quindi un font di default, che sia simile al variable font che utilizzeremo.

body {
    font-family: 'Source Sans', sans-serif;
}

Mentre per individuare i browser che supportano questa tecnologia, possiamo sfruttare il rilevamento con:

@supports (font-variation-settings: normal) {
    body {
        font-family: 'Source Sans Variable';
    }
}

La domanda che sorge spontanea è: “il browser scarica tutti i font installati?
La risposta è No! I browser sono già pronti per questa eventualità; infatti scaricano solamente i font utilizzati.

CONCLUSIONI

Credo che i variable fonts abbiano un grande potenziale; dal 2016 ad oggi il web è diventato sempre più VF friendly, quindi quello che mi rimane da dirvi è provateli!