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, se consideriamo oltretutto 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 di Adobe, rilasciato con licenza Open Font (OFL). Il font è scaricabile da GitHub all’indirizzo https://github.com/adobe-fonts/source-sans. 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 accadrebbe invece se utilizzassimo il Source Sans 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 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:
.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.
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
Per installare i variable font su Windows, è sufficiente fare doppio click sul font da installare. Si aprirà automaticamente il visualizzatore del font e quindi Installa.
Utilizzo su Figma
Su Figma l'utilizzo dei Variable Font è piuttosto semplice. Come si può vedere nel video di esempio che segue, basta creare un'area di testo, aprire Type settings e quindi il pannello Variable. Per il font Roboto sono disponibili la lunghezza e il peso.
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 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.
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, apriamo la pagina https://fonts.google.com/ e filtriamo la lista dei font: Technology › Variable.
Scegliamo il carattere desiderato e otteniamo il codice da incorporare mantenendo il "Full axis".
Infine copiamo i codici HTML e CSS da incorporare nei nostri file. Nel tag head dei file HTML avremo qualcosa di simile a:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wdth,wght@0,75..100,300..800;1,75..100,300..800&display=swap" rel="stylesheet">Mentre nel foglio di stile:
// : Use a unique and descriptive class name
// : Use a value from 300 to 800
// : Use a value from 75 to 100
.open-sans- {
font-family: "Open Sans", sans-serif;
font-optical-sizing: auto;
font-weight: ;
font-style: normal;
font-variation-settings:
"wdth" ;
} Per ogni specifica del font, quindi, si crea una classe con un identificativo univoco, e si aggiungono i valori per il peso (
Utilizzo per la stampa
Le stesse istruzioni scritte per il web sono utilizzabili anche per la stampa, salvo qualche possibile leggera variazione.
Compatibilità browser
L'adozione nelle API dei browser è stata veloce. Ad oggi può essere usufruita da oltre il 97% della popolazione globale 2.
Dove trovare i variable fonts
Il gratuito Source Sans utilizzato come esempio per i test di questa guida è disponibile su Github, https://github.com/adobe-fonts/source-sans.
Per reperire alcuni variable fonts con licenza, segnalo:
Riepilogo
- Semplicità d’installazione
- Facilità d’uso
- Ampia personalizzazione
- Compatibile con i principali software grafici
- Ampia compatibilità browser
- Peso ridotto a vantaggio della SEO tecnica