Font variabili, spiegati per i designer

I font variabili sono file di font che contengono una gamma continua di stili invece di un insieme fisso. Al posto di file separati per Regular, Medium, Semibold e Bold, un solo file variabile contiene ogni peso tra il più leggero e il più pesante, e spesso anche altre gamme, come la larghezza o la dimensione ottica. Scegli qualsiasi punto lungo ogni gamma, chiamata asse, così un titolo può stare a peso 680 e una didascalia a 430 se è ciò che si legge meglio.

Il formato è arrivato come parte della specifica OpenType nel 2016 ed è oggi supportato da tutti i principali browser attuali e dai principali strumenti di design. Questa guida spiega cosa fanno gli assi, quando vale la pena usare i font variabili e come configurarli in CSS. Per il quadro generale sulla scelta dei caratteri, vedi le basi di tipografia e i font del brand.

Gli assi dei font variabili e cosa fa ciascuno

Un asse è una dimensione del disegno che il type designer ha tracciato ai suoi estremi; il font interpola tutto ciò che sta in mezzo. Cinque assi sono registrati nella specifica OpenType e hanno etichette standard di quattro lettere. I type designer possono aggiungere assi personalizzati, scritti in maiuscolo.

Gli assi personalizzati sono dove i font acquistano personalità. Roboto Flex ha un asse di grado (GRAD) che cambia lo spessore del tratto senza cambiare la larghezza delle lettere. Fraunces ha SOFT per terminali più arrotondati e WONK per le sue lettere più eccentriche. Recursive ha gli assi MONO e CASL, che lo portano da sans a monospaziato e da lineare a informale. Puoi esplorarli tutti su Google Fonts, che permette di filtrare le famiglie variabili.

Perché la dimensione ottica conta più di tutto

Il peso riceve l’attenzione, ma la dimensione ottica è spesso l’asse più utile. I caratteri in metallo venivano incisi separatamente per ogni corpo: i corpi piccoli avevano tratti più robusti, occhi più grandi e spaziatura più ampia; i corpi grandi erano più fini, con più contrasto e spaziatura più stretta. I font digitali l’hanno perso quando un unico contorno è stato scalato a ogni dimensione. Un asse opsz lo riporta.

Con font-optical-sizing: auto (il valore predefinito nei browser), un font con asse opsz si adatta da solo alla dimensione che imposti. Non devi fare nulla se non scegliere un font che abbia quell’asse. È particolarmente utile nei design con un titolo grande e un piccolo testo di supporto nella stessa famiglia, cioè la maggior parte dei post social e delle landing page.

Quando vale la pena usare i font variabili

Il peso del file è il compromesso onesto. Un file variabile contiene i dati di ogni stile, quindi di solito pesa più di un singolo peso statico ma meno di diversi. Se un sito carica solo Regular e Bold, due file statici potrebbero benissimo essere più leggeri. Se ne carica quattro pesi e un corsivo, di solito vince un solo file variabile, e ottieni gratis ogni peso intermedio.

I pesi intermedi sono più utili di quanto sembri. Un testo chiaro su uno sfondo scuro o colorato sembra più pesante dello stesso peso sul bianco, quindi potresti impostare un testo bianco su un gradiente a 460 invece di 500 per farlo corrispondere otticamente a una versione scura su chiaro. L’effetto è sottile, ma è ciò che fa sembrare curato un sistema tipografico. Il testo su un gradiente spiega il problema di leggibilità più ampio.

Come usare i font variabili in CSS

Dichiara il font una volta con una gamma per ogni asse, poi usa le proprietà normali come font-weight e font-stretch. Ricorri a font-variation-settings solo per gli assi personalizzati, perché sovrascrive tutti gli assi insieme e non si eredita in modo pratico. La guida ai font variabili di MDN spiega i dettagli.

@font-face {
  font-family: "Brand Sans";
  src: url("/fonts/brand-sans-variable.woff2") format("woff2");
  font-weight: 100 900;   /* the wght range in the file */
  font-stretch: 75% 125%; /* the wdth range, if it has one */
  font-display: swap;
}

body {
  font-family: "Brand Sans", system-ui, sans-serif;
  font-weight: 420;
  font-optical-sizing: auto;
}

h1 {
  font-weight: 720;
  font-stretch: 90%;
}

.on-dark {
  font-weight: 390; /* light on dark reads heavier */
}

/* Custom axes go through font-variation-settings. */
.soft {
  font-variation-settings: "SOFT" 100, "WONK" 1;
}

Impostare un sistema tipografico variabile

1. 1

   Controlla gli assi

   Apri la pagina di presentazione del font e annota ogni asse con la sua gamma. Verifica che le lingue e i caratteri che ti servono siano inclusi nella versione variabile.

2. 2

   Definisci ruoli, non pesi

   Decidi i pesi per ruolo: testo corrente, enfasi, sottotitolo, titolo, etichetta. Un sistema di cinque valori ben regolati batte nove valori standard usati a caso.

3. 3

   Regola per gli sfondi

   Crea un peso leggermente più leggero per il testo chiaro su scuro e confronta le due versioni a dimensione reale.

4. 4

   Lascia lavorare la dimensione ottica

   Mantieni font-optical-sizing: auto a meno che tu non abbia un motivo per fissarla, e controlla titoli e didascalie affiancati.

5. 5

   Mettilo per iscritto

   Annota il file del font, le gamme degli assi e i valori di ogni ruolo nella tua guida di stile del brand, così nessuno li ricostruisce a memoria.

I font variabili premiano la misura. Il punto non è usare ogni valore, ma scegliere i pochi esatti che fanno leggere bene il tuo testo ovunque compaia, da un paragrafo a 16 px a un titolo display a 200 px.