I variable fonts
l'innovazione dei fonts per il web

Html e css
Autore:

I variable font sono una nuova specifica di font usabili sui siti web che permette di avere uno stile grafico accattivante, moderno e professionale ma riducendo il problema dei tempi di caricamento dei font personalizzati.
La nuova specifica "Variable font" permette inoltre di avere sui siti altre cose molto interessanti come la possibilità di animare i caratteri.

Variable Fonts
Vediamo come funzionano i variable fonts e come usarli attraverso gli stili css per realizzare un sito web, questi sono pienamente supportati da tutti i maggiori browser a partire dalle relative versioni dal 2018.


"Perchè una ricca esperienza tipografica ha un costo elevato in termini di velocità di visualizzazione?"


Per un dato font esistono molte varianti ( typeface ) infatti abbiamo i vari pesi es. light, regular, medium, bold questi per ogni versione come corsivo, sottolineata, condensata erc. quindi per ogni variante è necessario caricare un file specifico per ciascuna, questo comporta che per avere l'intera gamma grafica del font vanno caricati molti file all'apertura della pagina sul browser e questo può rallentare anche molto la visualizzazione dei contenuti, cosa assolutamente da evitare per garantire la migliore esperienza utente anche su dispositivi mobile.

Ad esempio con la seguente istruzione andiamo a caricare la famiglia "Open Sans" con i pesi 300,400,600,700 e solo la versione italic per il peso 400:

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

come si vede la famiglia comunque non è completa ma tutto questo può provocare la necessità di caricare oltre 300Kb per il font scelto,
pur non avendo tutte le potenzialità tipografiche del font.

Gli OpenType Variable Fonts permettono di avere disponibili molte variazioni di una famiglia di font in un unico file permettendo anche valori intermedi per le scalature e riducendo drasticamente il numero di file da caricare per avere un'ampia esperienza tipografica.


"Come è fatto un font variabile ?"


E' una collezione di stili principali, con un font principale master "default" ( tipicamente il regular ) e molti "assi" che collegano le versioni master secondarie tra loro (Thinner, Bolder), ad esempio l'asse "Weight/peso" permette di ottenere molte scalature di peso con solo alcuni file principali di riferimento, mettendoci a disposizione un set completo.

assi per i variable fonts


Secondo la specifica OpenType sono possibili molte tipologie di assi quali : peso, larghezza del carattere, inclinazione, profilo, ombra, smussatura etc ...
Tutti questi assi condividono lo stesso font master principale e possono combinarsi con i font secondari ( Thinner e Bolder ) per ottenere un vasto numero di versioni tipografiche.

Al momento del caricamento del font è da stabilire quali assi sono richiesti da usare tra quelli disponibili.


Axis names and CSS values
Weight wght
Width wdth
Slant slnt
Optical Size opsz
Italics ital
Grade GRAD


Questi assi possono essere anche variati "al volo" dinamicamente sul sito per ottenere effetti visivi dinamici di variazione del font,
creando delle vere proprie sequenze di animazione per un testo.


( rif. https://css-irl.info/variable-font-animation-with-css-and-splitting-js/ )


"Come posso usare i variable fonts sul mio sito ?"


Si possono usare sia inserndo il file .ttf del font variabile in una cartella del sito e usando il @font-face ma anche usando i google fonts che recentemente hanno introdotto le versioni variabili di alcuni delle famiglie di fonts più utilizzate.


USANDO I FILE DEI FONT DI TIPO VARIABILE


Per aggiungere un font variabile per prima cosa và linkato nel css come qualsiasi font custom a partire dal file di definizione del font AmstelvarAlpha-VF.ttf :

@font-face {
font-family: 'AmstelvarAlpha';
src: url('../fonts/AmstelvarAlpha-VF.ttf');
}

Per definire poi un valore per l'asse del font variabile si usa la proprietà css "font-variations" che associa l'asse con il font a cui assegnarlo
( nel caso specifico sotto si imposta l'utilizzo di due assi width e weight per il font AmstelvarAlpha )

#font-amstelvar {
font-family: 'AmstelvarAlpha';
font-variation-settings: 'wdth' 400, 'wght' 98;
}


USANDO I GOOGLE FONTS


Ovviamente si possono aggiungere anche utilizzando i google fonts nella loro versione variabile per le famiglie di font che lo prevedono
( sul sito ufficiale è possibile filtrarli selezionando la casella Show only variable fonts. )

Sarà sufficiente inserire quindi il riferimento nella pagina al font selezionato:

<link href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">

e specificare nel css la famiglia da usare:

font-family: 'Raleway', sans-serif



Riferimenti



https://medium.com/web-typography-news/variable-fonts-the-new-google-fonts-api-d442e9a0a255
https://web.dev/variable-fonts/
https://docplayer.it/182490413-Variable-fonts-davide-mancuso-pagina-1-di-13.html


Articoli in evidenza

Target e Personas

Cosa sono e come usarli per vendere di più sul web

Come si evolve il SEO, migliorare il posizionamento su google.

Gli aggiornamenti dell' algoritmo di google.

A scuola di contenuti

Oggi parliamo di come scrivere un buon articolo per essere letti nel web

Quanto costa fare un sito

Scopri il prezzo giusto per fare un sito internet

I più visti

Font-size CSS per una tipografia fluida e responsive.

px – em – rem – vw – vh – vmin – emax: la guida alle unità di misura dei font, per capirne le differenze, come e quando utilizzarle

Usare i CSS per creare splendidi effetti di sovrapposizione di testi, immagini e colori

Ovvero come realizzare le dissolvenze e i mascheramenti tipici dei programmi più avanzati di fotoritocco con gli attributi CSS Mix-blend-mode e background-clip: text

Come realizzare uno schema colori professionale per un sito web.

Ovvero adatto al prodotto/servizio di cui si occupa la tua interfaccia, accessibile a tutti e in grado di condizionare le conversioni e le scelte dei tuoi utenti

Automatizzare combinazioni di colori armoniose sul tuo sito web con LESS

Ovvero come passare dalla teoria del colore alla pratica della programmazione di un sistema di colori generato da un colore primario

Centrare un DIV dentro un altro DIV

5 metodi per centrare un DIV in orizzontale e in verticale in una pagina HTML con gli stili CSS, o all’interno di una pagina reattiva bootstrap