I Font Variabili nascono nel 2016 e sono disponibili sia per il web che per la stampa. Il loro scopo è quello di create un font flessibile che possa essere configurato liberamente dall’utente senza l’obbligo di doversi limitare alle sole tipologie disponibili.
Va detto che al momento della scrittura di questo articolo la diffusione dei Font Variabili è ancora piuttosto bassa, ma Google Font ha già cominciato ad integrare un numero sempre maggiore di questa tipologia tra i suoi webfont gratuiti.
L’avvento dei Font Variabili avrà di sicuro un grosso impatto positivo soprattutto nello sviluppo di siti web, dove i grafici devono confrontarsi con il problema di contenere il numero di font caricati sulle pagine dei siti che realizzano, al fine di ridurre al minimo il peso dei kb da scaricare durante la navigazione: per quanto relativamente leggeri, i font hanno un certo peso in kb e abusare del loro utilizzo incide sul tempo di caricamento delle pagine web, cosa non buona né per la user-experience né per il SEO.
Come funzionano i Font Variabili
Un Font Variabile incorpora tutte le varianti di un font, includendone lo spessore (p.es.: light, regular, bold, etc.), lo stile (normale o corsivo) in un unico file, quindi, il browser non dovrà caricare diversi file per ogni caratteristica del font da richiamare ma potrà usarne uno unico alterandone le caratteristiche a seconda dell’esigenza grafica.
In poche parole si potrà creare un font definendone le specifiche agendo su un valore variabile che ne fissa un limite massimo ed uno minimo. Per cui, per definire font-weight e font-style di un font possiamo utilizzare un asse variabile e fissarne due master point, ovvero un punto massimo ed uno minimo. Il font, dunque, potrà essere utilizzato scegliendo un valore compreso nel suddetto asse, tra i suoi master point.
Facciamo un esempio concreto.
Abbiamo un font che per weight ha come master point 300 e 700. Potremo usare questo font assegnando alla proprietà font-weight un qualsiasi valore compreso tra 300 e 700, richiamando però un unico file nel nostro documento. In precedenza, per avere disponibili la versione light, quella normale e il bold avremmo dovuto caricare 3 file: il 300, il 400 e il 700!
Nei CSS sono stati registrati 5 assi standard che sono: peso, larghezza, aggiustamento ottico, corsivo ed inclinazione.
- wght (font-weight): peso, per lo spessore del carattere.
- wdth (font-stretch): larghezza, per controllare la larghezza complessiva delle lettere.
- opsz (font-optical-sizing): dimensione ottica, per regolare la leggibilità del carattere a varie dimensioni.
- ital (font-style): corsivo, per passare dal font romano a quello italico.
- slnt (font-style): inclinato, per regolare l’inclinazione di un carattere.
Sarà anche possibile decidere se creare nuovi assi variabili, ad esempio modificando l’asse delle grazie di un carattere consentendo quindi di rendere un carattere con o senza-serif!
Realizzare un sito web con i Font Variabili di Google
Ci sono due modi di incorporare i Font Variabili di Google nel codice HTML delle vostre pagine web:
- scaricando le specifiche variabili di un asse che si è deciso di usare
- richiamando l’intervallo completo di valori di quell’asse:
1. nel primo caso:
<link href="https://fonts.googleapis.com/css2?family=MioFont:wght@200;350;450;600&display=swap" rel="stylesheet">
e definendone il css in questo modo:
h1 { font-weight: 600; }
p { font-weight: 200; }2. nel secondo caso:
<link href="https://fonts.googleapis.com/css2?family=MioFont:wght@200..700&display=swap" rel="stylesheet">
e definendone il css in questo modo:
h1 { font-variation-settings:"wght" 690; }
p { font-variation-settings:"wght" 400; }Realizzare un sito web con i Font “self-hosted”
Per chi avesse la necessità di utilizzare un Font Variabile che non fa parte della libreria dei font di Google esiste la possibilità, anche in questo caso, di ospitare i file sul server importandoli tramite la regola @font-face. Tuttavia, poiché i caratteri variabili possono operare su intervalli di valori, sarà necessario esprimere tali intervalli utilizzando i descrittori CSS:
@font-face {
font-family: 'MIO FONT';
font-stretch: RANGE_PERCENTUALE_MINIMO_MASSIMO;
font-style: NORMALE_O_ITALICO; /* vedi nota sottostante */
font-weight: RANGE_NUMERICO_MINIMO_MASSIMO;
src: url(MIO_FONT.woff2) format('woff2');
}Nota: a causa di alcune incoerenze nel il modo in cui i browser gestiscono i Font Variabili che contengono varianti sia per il corsivo che per il verticale è meglio omettere completamente la riga dello stile del carattere, quindi, “font-style” dovrebbe essere specificato solo nei seguenti casi:
- se stiamo caricando un Font Variabile che contiene solo corsivi
- se il nostro Font Variabile contiene un asse “slant” ma non “italic”.
Adeguamento dei software rispetto all’implementazione dei Font Variabili
Uno degli passaggi fondamentali che riguarda la diffusione all’uso dei Font Variabili è l’applicazione i questi nuovi standard nei software di grafica e HTML coding, quindi nel desktop publishing e nel web.
Per quanto riguarda il web da un paio di anni praticamente tutti i browser ormai supportano i Font Variabili.
Per quanto riguarda il desktop-publishing, Adobe InDesign ha implementato una funzionalità che già presente sui fratelli Photoshop e Illustrator, introducendo uno slider per gestire le font variabili. Questa feature è stata aggiunta anche su Sketch, il software software per il web design, e sarà a breve probabilmente disponibile su tutti i software di grafica.