Variable fonts: cosa sono e come si utilizzano

I variable fonts offrono delle opportunità uniche per il mondo del web design grazie a delle particolari caratteristiche che non si trovano nei normali font.

Cosa sono i variable fonts?

Il variable font è una particolare tecnologia che consente di immagazzinare tutte le varianti grafiche di un carattere in un unico file. Queste varianti possono comprendere anche bordi, effetti ombra e bagliori. È un’estensione delle specifiche OpenType ed è stata introdotta nella versione 1.8 a fine 2016 1.

Lavorare con i font tradizionali

Quando ci mettiamo al lavoro su un nuovo progetto web siamo abituati ad aggiungere un set di font alla nostra pagina. Questo set, nella maggior parte dei casi, include il font regular, l’Italic e il bold; a volte anche il light e il semi-bold. Li aggiungiamo inserendo all’interno dell’head il link ad un archivio font oppure li importiamo nel nostro foglio di stile tramite la regola @font-face messa a disposizione dal CSS.

Partiamo da questo esempio:

<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700&display=swap" rel="stylesheet">

Grazie a questo link stiamo aggiungendo al nostro sito web il font Open Sans nelle sui varianti light, regular, regular italic, semi-bold, e bold.

Abbiamo subito un primo problema: il set di caratteri non è completo; infatti mancano il light italic, il semi-bold italic, e il bold italic, che potrebbero essere utili, seppur in modo molto limitato.

Google Fonts ci segnala un secondo problema non trascurabile: i tempi di caricamento sono moderati; ciò significa che il rendering della pagina potrebbe risultare poco veloce.

Analizzando il pacchetto font Open Sans, notiamo che aggiungere i cinque caratteri, nel formato WOFF, significa allegare al nostro sito web 300 Kb di dati. Non sono pochi; e sono tanti considerato che il set non è completo.

I vantaggi del nuovo formato

I variable fonts risolvono esattamente i due problemi evidenziati nel precedente paragrafo: ci consentono di aggiungere un set completo e di ridurre drasticamente i tempi di caricamento.

Per comprendere meglio le qualità del nuovo formato, ho scelto di prendere come esempio il font Source Sans Pro di Adobe, rilasciato con licenza Open Font (OFL). Il font è scaricabile da GitHub all’indirizzo https://github.com/adobe-fonts/source-sans-pro. Il pacchetto completo include l’intera famiglia del font, diviso in file separati uno per ogni stile, oppure nel moderno formato variabile.

Se volessimo utilizzare questo font con il vecchio metodo e nel formato WOFF (ampiamente supportato e che garantisce una migliore compressione), dovremmo sovraccaricare la pagina con diversi file. Il browser dell’utente quindi si ritroverà a dover scaricare diversi file, con un evidente problema di velocità delle pagine. L’intera famiglia del font include 12 varianti e pesa ben 1,6 Mb. Lato SEO il sito riceverebbe un pessimo punteggio.

Cosa accade invece se utilizzassimo il Source Sans Pro nel nuovo formato? Usando il variable font, dovremmo incorporare, con il font di esempio, solo due file (uno per lo stile roman e l’altro per lo stile italic). Il peso totale sarà solo di 292 Kb, con un incredibile guadagno dell’82%.

Finora mi sono soffermato molto sul peso totale di un font: come sviluppatore web front-end presto molta attenzione alla SEO tecnica di una pagina.

I variable fonts però hanno anche altri vantaggi molto importanti dal punto di vista del design.
Il peso del carattere, definito in CSS dal font-weight, non è limitato solo alle cifre tonde, come 400, 600 o 700. Possiamo utilizzare anche tutti i valori intermedi, come 101, 423, 608, 751, 888.
Oltre al peso, si può intervenire anche sulla larghezza del carattere e sull’inclinazione.
In alcuni casi si va ben oltre, perché si possono regolare anche il profilo, l’ombra, il bagliore e la smussatura degli angoli, caratteristiche disponibili però solo con i variable fonts predisposti. In altre parole, non esiste quasi più nessun limite.

In CSS, i valori extra sui quali si può intervenire sono definiti dalla proprietà font-variation-settings.

Ecco un esempio con il font fs-kitty (disponibile in licenza alla pagina https://www.variable-fonts.com/fonts/fs-kitty):

.text {
    font-size: 82px;
    font-variation-settings: "SHDW" 370, "OUTL" 931;
}

Le istruzioni sopra riportate intervengono sulla dimensione, tramite il font-size che conosciamo già benissimo, e sulle variazioni specifiche del font definite durante la sua creazione e modificabili in CSS tramite il font-variation-settings.

Gli svantaggi

Gli svantaggi riguardano la scarsa disponibilità e i costi elevati.
I variable fonts gratuiti sono pochissimi, hanno poche opzioni e visivamente sono poco attraenti. Google Fonts ha appena iniziato ad aggiungere al suo vasto archivio i primi v-fonts. È una bella notizia, ma nei prossimi paragrafi saranno spiegate le limitazioni.

Come si implementano?

Quando si crea un progetto web, la famiglia di un font viene utilizzata sia durante la realizzazione grafica, sia durante il processo di sviluppo. Come implementare i variable fonts in questi due casi? In pochissime parole: allo stesso modo dei font tradizionali, ma con una piccola differenza quando si personalizza il testo durante il processo di design.

Guida per i grafici

Per prima cosa, dopo aver scelto il variable font da utilizzare, lo scarichiamo (alla sezione risorse ho aggiunto una lista di link dove poterli scaricare o acquistare) e lo installiamo nel nostro sistema.

Installazione su macOS

Per installare i variable font su macOS, basta aprire il file .ttf e installarlo nel Libro Font. L’aggiunta è immediata e possiamo quindi chiudere l’applicazione.

Installazione su Windows 10

Per installare i variable font su Windows 10, è sufficiente fare doppio click sul font da installare. Si aprirà automaticamente il visualizzatore del font e quindi Installa.

Utilizzo su Sketch

Sketch ha introdotto l’uso dei variable font a partire dalla versione 59. L’utilizzo è molto semplice. Aggiungiamo al layout grafico il nostro testo e scegliamo il font da utilizzare, nel nostro primo esempio il Source Sans Variable.

Sketch per il font installato come esempio ci da la possibilità di personalizzare il peso, con valori che vanno da 200 a 900, anche in decimali. Per altri font, potrebbero essere disponibili anche le altre opzioni.

Utilizzo su Figma

Attualmente Figma, strumento di design in rapida crescita e disponibile in versione browser e app, non consente di utilizzare i variable fonts.

Utilizzo su Adobe PhotoShop e Creative Cloud

Su PhotoShop, come in Sketch, l’utilizzo di un variable font è semplice. Aggiungiamo un livello di testo e scegliamo il carattere desiderato. Su PhotoShop i variable font sono contrassegnati dal simbolo VAR.

Nel pannello Proprietà possiamo modificarne il peso (Spessore). Per altri font, potrebbe invece essere possibile modificare anche le altre opzioni.

Il nuovo formato per i font è utilizzabile anche sulle ultime versioni di Illustrator e InDesign.

Utilizzo su Affinity Designer

Il team di Affinity non ha ancora aggiunto il supporto ai variable fonts. Possono essere utilizzati ma senza le qualità che li contraddistinguono. Aggiornerò questo tutorial non appena ci saranno novità positive a riguardo.

Guida per gli sviluppatori Front-End

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 solo tramite i 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 non occorre fare nulla.

Google V-fonts

Se invece scegliamo di utilizzare il servizio Google Fonts, abbiamo due scelte.

Per prima cosa, apriamo la pagina https://fonts.google.com/ e aggiungiamo un segno di spunta alla casella “Show only variable fonts”.

Scegliamo il carattere desiderato e selezioniamo gli stili che vogliamo utilizzare nel nostro progetto. Possiamo aggiungere uno o più stili con peso personalizzato.

Infine copiamo i codici HTML e CSS da incorporare nei nostri file. Nel tag head dei file HTML avremo qualcosa di simile a:

<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@250;385;516&display=swap" rel=“stylesheet">

Mentre nel foglio di stile:

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

Quella appena descritta è una delle due scelte. Personalmente suggerisco invece di scaricare il font e di includerlo direttamente nel progetto così da usufruire di tutti i pesi e scegliere quelli che ci interessano direttamente nel file CSS.

Utilizzo per la stampa

Le stesse istruzioni scritte per il web sono utilizzabili anche per la stampa, salvo qualche possibile leggera variazione.

Compatibilità browser

I vantaggi nell’usare i variable fonts non finiscono qui. Sebbene questa straordinaria tecnologia sia stata introdotta di recente, la sua adozione da parte dei principali browser è stata veloce. Ad oggi può essere usufruita dall’88% della popolazione globale 2.

Come comportarci con i vecchi browser?

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

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

Mentre per i browser che supportano questa nuova tecnologia, possiamo sfruttare l’istruzione di rilevamento:

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

Così facendo però il browser non scarica tutti i font installati? I browser sono già pronti anche per questa eventualità; infatti scaricano solo i font utilizzati.

Dove trovare i variable fonts

Il gratuito Source Sans Pro utilizzato come esempio per i test di questa guida è disponibile su Github, https://github.com/adobe-fonts/source-sans-pro.

Per reperire alcuni variable fonts con licenza, segnalo:

• https://fonts.google.com/?vfonly
• https://v-fonts.com/
• https://www.variable-fonts.com/
• https://www.fontspring.com/tag/variable

Le mie aspettative

Questo nuovo formato per i font ha già tutte le qualità per essere una tecnologia ampiamente utilizzabile: è adottato dai browser moderni e più diffusi, pesa poco e quindi consente tempi di caricamento più rapidi, e sui vecchi browser possiamo utilizzare dei font similari o lo stesso font ma nei precedenti formati separati.

Ad oggi i variable fonts sono pochi e le licenze costose. Realizzarli però non richiede un notevole sforzo. I font già esistenti, partendo dai più utilizzati, possono essere trasformati nel nuovo formato. I principali software per la realizzazione dei font, come FontLab, sono già pronti per affrontare questa nuova evoluzione.

Mi auguro quindi un rapido passo verso questa direzione da parte dei principali distributori, a partire da Google Fonts che ha già pubblicato le prime decine di famiglie di caratteri

Riepilogo