Menu
Contattaci
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.
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).
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.
Come potete vedere dallo screenshot, finalmente i variable fonts sono supportati dalla maggior parte dei browser.
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.
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
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?
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.
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.
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!