# Font variabili, spiegati per i designer

[Canonical HTML page](https://gradiently.design/it/guide/variable-fonts)

Un solo file, ogni peso intermedio e un carattere che si adatta da solo alla dimensione a cui lo imposti. I font variabili cambiano ciò che un sistema tipografico può fare, se sai a quali assi ricorrere.

## The short version

- Un font variabile è un unico file che contiene una gamma continua di stili, come ogni peso dal thin al black, invece di un file per ogni stile.
- Ogni gamma si chiama asse; i cinque assi standard sono peso, larghezza, corsivo, inclinazione e dimensione ottica.
- I font variabili ti permettono di scegliere valori intermedi, come un peso di 450 o 650, e di regolare il testo con precisione per ogni dimensione e sfondo.
- Tutti i principali browser attuali supportano i font variabili, e molte famiglie su Google Fonts sono disponibili come file variabili.
- Un file variabile può pesare più di un singolo stile statico, quindi il risparmio arriva quando usi diversi pesi o larghezze della stessa famiglia.

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](https://gradiently.design/it/guide/typography-basics) e [i font del brand](https://gradiently.design/it/guide/brand-fonts).

## 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.

| Asse | Etichetta | Cosa cambia | Proprietà CSS |
| --- | --- | --- | --- |
| Peso | `wght` | Lo spessore del tratto, dal thin al black | `font-weight` |
| Larghezza | `wdth` | Larghezza delle lettere, da condensata a espansa | `font-stretch` |
| Dimensione ottica | `opsz` | Dettaglio, contrasto e spaziatura regolati sulla dimensione | `font-optical-sizing` |
| Inclinazione | `slnt` | Un angolo obliquo senza cambiare la forma delle lettere | `font-style: oblique` |
| Corsivo | `ital` | Passa alle vere forme corsive delle lettere | `font-style: italic` |
| Personalizzato | ad es. `GRAD`, `SOFT` | Qualsiasi cosa definisca il designer | `font-variation-settings` |

I cinque assi registrati, più quelli personalizzati. Non tutti i font variabili hanno tutti gli assi: controlla quali include il tuo.

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](https://fonts.google.com/variablefonts), 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.

Un design verticale con una sola parola composta in grandissimo su uno sfondo con gradiente

Dimensioni display: un asse di dimensione ottica aumenta il contrasto e stringe la spaziatura man mano che il testo cresce.

Un design verticale con un titolo e un piccolo testo di supporto nella stessa famiglia di caratteri

Dimensioni di testo: la stessa famiglia apre e irrobustisce il testo piccolo, così regge sullo schermo di un telefono.

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

### Ne vale la pena

- Usi tre o più pesi o larghezze della stessa famiglia
- Vuoi pesi intermedi per bilanciare il testo su sfondi diversi
- Titoli e testo piccolo condividono una famiglia con asse di dimensione ottica
- Vuoi animare peso o larghezza nei lavori in movimento

### Probabilmente no

- Usi sempre solo uno o due pesi
- La versione statica è più leggera e non ti servono altri stili
- Il tuo strumento o la tua piattaforma non permette di scegliere i valori degli assi
- Alla versione variabile manca uno stile o una lingua che ti serve

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](https://gradiently.design/it/guide/text-on-gradient) 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](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_fonts/Variable_fonts_guide) di MDN spiega i dettagli.

```css
@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;
}
```

Gli assi standard passano dalle proprietà standard; quelli personalizzati da `font-variation-settings`. Le gamme in `@font-face` devono corrispondere a ciò che contiene il file.

> **Animare il peso sposta il testo** Nella maggior parte dei font, le lettere più pesanti sono anche più larghe, quindi animare il peso al passaggio del mouse fa spostare il testo intorno. Usa un font con un asse di grado, oppure riserva l’animazione del peso a parole isolate e titoli.

## Impostare un sistema tipografico variabile

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. **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. **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. **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. **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](https://gradiently.design/it/guide/brand-style-guide), 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](https://gradiently.design/it/guide/display-fonts) a 200 px.

## FAQ

### Che cos’è un font variabile?

Un font variabile è un unico file di font che contiene una gamma continua di stili lungo uno o più assi, come peso o larghezza, così puoi scegliere qualsiasi valore intermedio invece di pochi stili fissi.

### Tutti i browser supportano i font variabili?

Tutti i principali browser attuali li supportano. Controlla [caniuse](https://caniuse.com/variable-fonts) se devi supportare browser molto vecchi, e includi una serie di font di riserva.

### I font variabili sono più leggeri di quelli statici?

Non sempre. Un file variabile di solito pesa più di un singolo stile statico ma meno di diversi. Il risparmio arriva quando altrimenti caricheresti tre o più stili.

### Che cos’è la dimensione ottica in un font?

La dimensione ottica è un asse che adatta dettaglio, contrasto e spaziatura alla dimensione del testo, rendendo più robusto il testo piccolo e più fine quello grande. I browser la applicano automaticamente con `font-optical-sizing: auto`.