# Font variabili con asse della larghezza

> Famiglie variabili in cui si regola la larghezza delle lettere oltre al peso, da un lieve restringimento per adattare il testo allo spazio fino a una gamma completa da condensato a largo.

Un font variabile conserva un disegno come un intervallo anziché come un insieme di stili fissi. La maggior parte delle famiglie variabili offre un asse del peso; un numero minore aggiunge un asse della larghezza, registrato con il tag wdth, che rende le lettere più strette o più larghe mantenendone altezza e carattere. I suoi valori sono percentuali della larghezza normale: 75 è uno stile condensato, 100 quello normale e 125 uno esteso.

Nel lavoro di impaginazione la larghezza è spesso l’asse più pratico dei due. Permette di adattare un titolo esattamente alla sua colonna, di comprimere un’etichetta di navigazione su uno schermo piccolo e di allentarla su uno grande, o di far passare una tabella a un’impostazione più stretta solo quando le colonne finiscono lo spazio. In CSS la proprietà è font-stretch, oppure font-variation-settings per un controllo più fine, e può cambiare ai breakpoint o essere animata.

Confronta gli intervalli prima di scegliere. Diverse famiglie qui si limitano a restringere, da 100 fino a circa 75, sufficiente per adattare il testo allo spazio; due si limitano ad allargare; altre vanno da metà della larghezza normale al doppio e sono in pratica più caratteri in uno. Le note qui sotto riportano ogni intervallo come registrato. Un asse della larghezza ben disegnato modifica le forme stesse delle lettere, a differenza di un testo schiacciato artificialmente.

How these were chosen: Famiglie variabili le cui schede indicano un asse della larghezza (wdth) oltre al peso; gli intervalli degli assi sono quelli riportati nelle schede.

## Fonts (17)

- [Roboto](https://trendhub.net/it/fonts/roboto.markdown) (Sans Serif, 18 stili · variabile, OFL): Un asse della larghezza da 75 a 100 restringe il disegno verso uno stile condensato, accanto al peso da 100 a 900 con corsivi.
- [Open Sans](https://trendhub.net/it/fonts/open-sans.markdown) (Sans Serif, 12 stili · variabile, OFL): La larghezza si restringe da 100 a 75 per adattare il testo allo spazio, in un Sans Serif umanista con sei pesi e corsivi.
- [Archivo](https://trendhub.net/it/fonts/archivo.markdown) (Sans Serif, 18 stili · variabile, OFL): Larghezza da 62 a 125, da extra condensato a esteso, insieme al peso da Thin a Black con corsivi.
- [Saira](https://trendhub.net/it/fonts/saira.markdown) (Sans Serif, 18 stili · variabile, OFL): Larghezza da 50 a 125 e peso da 100 a 900 in un Sans Serif squadrato, più i corsivi.
- [IBM Plex Sans](https://trendhub.net/it/fonts/ibm-plex-sans.markdown) (Sans Serif, 14 stili · variabile, OFL): Un asse della larghezza che restringe le lettere fino a 75, con sette pesi e corsivi.
- [Inconsolata](https://trendhub.net/it/fonts/inconsolata.markdown) (Monospaziato, 8 stili · variabile, OFL): Un monospaziato con un asse della larghezza da 50 a 200, da metà della larghezza normale al doppio, accanto al peso da 200 a 900.
- [Noto Serif](https://trendhub.net/it/fonts/noto-serif.markdown) (Serif, 18 stili · variabile, OFL): Un serif da testo con un asse della larghezza che si restringe da 100 a 62,5, con nove pesi e corsivi.
- [Merriweather](https://trendhub.net/it/fonts/merriweather.markdown) (Serif, 14 stili · variabile, OFL): Un serif da testo con una gamma di larghezze contenuta, da 87 a 112, accanto agli assi del peso e della dimensione ottica.
- [Asap](https://trendhub.net/it/fonts/asap.markdown) (Sans Serif, 18 stili · variabile, OFL): Peso da 100 a 900 e larghezza da 75 a 125, con corsivi.
- [Georama](https://trendhub.net/it/fonts/georama.markdown) (Sans Serif, 18 stili · variabile, OFL): Un asse della larghezza da 62,5 a 150, da stretto a esteso, e nove pesi con corsivi.
- [Zalando Sans](https://trendhub.net/it/fonts/zalando-sans.markdown) (Sans Serif, 16 stili · variabile, OFL): Larghezza da 75 a 125 e peso da 200 a 900 in un grottesco sobrio, più i corsivi.
- [Science Gothic](https://trendhub.net/it/fonts/science-gothic.markdown) (Sans Serif, 18 stili · variabile, OFL): Quattro assi: peso 100–900, larghezza 50–200, inclinazione e contrasto.
- [Advent Pro](https://trendhub.net/it/fonts/advent-pro.markdown) (Sans Serif, 18 stili · variabile, OFL): Qui la larghezza può solo aumentare, da 100 a 200, accanto al peso da 100 a 900.
- [Mozilla Headline](https://trendhub.net/it/fonts/mozilla-headline.markdown) (Sans Serif, 6 stili · variabile, OFL): Peso da 200 a 700 e larghezza da 75 a 125 in un sans da titoli.
- [Anek Latin](https://trendhub.net/it/fonts/anek-latin.markdown) (Sans Serif, 8 stili · variabile, OFL): Larghezza da 75 a 125 su otto pesi dritti da Thin a ExtraBold.
- [Pliant](https://trendhub.net/it/fonts/pliant.markdown) (Sans Serif, 18 stili · variabile, OFL): La larghezza può solo aumentare, da 100 a 125, con nove pesi, corsivi, cirillico e greco.
- [Ubuntu Sans](https://trendhub.net/it/fonts/ubuntu-sans.markdown) (Sans Serif, 16 stili · variabile, UFL): Un asse della larghezza che si restringe da 100 a 75 in un sans pensato per menu, pulsanti e finestre di dialogo, con otto pesi e corsivi.

## FAQs

### Come imposto la larghezza del font in CSS?

Usa font-stretch con una percentuale, per esempio font-stretch: 85%, oppure font-variation-settings: "wdth" 85. Il valore deve rientrare nell’intervallo supportato dal font; i valori esterni vengono portati all’estremo più vicino.

### Un asse della larghezza equivale a scalare il testo in orizzontale?

No. Scalare deforma spessore dei tratti e curve. Un asse della larghezza usa forme disegnate per ogni larghezza, quindi i tratti verticali e orizzontali restano in proporzione.

### I font variabili funzionano in tutti i browser e le app?

I browser attuali e le principali applicazioni di design li supportano. I software più vecchi potrebbero mostrare solo lo stile predefinito, quindi dove serve tieni dei file statici come alternativa.

### Posso usare questi font variabili a fini commerciali?

Sì. Tutti tranne uno sono sotto la SIL Open Font License, che consente uso commerciale, incorporamento e hosting in proprio; Ubuntu Sans usa la Ubuntu Font License, che consente anch’essa l’uso commerciale. Ogni pagina del font riporta la sua licenza.

## Related collections

- [Font variabili con asse della dimensione ottica](https://trendhub.net/it/fonts/for/variable-fonts-with-optical-size.markdown)
- [Font variabili con assi insoliti](https://trendhub.net/it/fonts/for/variable-fonts-with-unusual-axes.markdown)
- [Sans serif stretti per tabelle e impaginati compatti](https://trendhub.net/it/fonts/for/narrow-fonts-for-tight-layouts.markdown)
- [Font condensati per titoli](https://trendhub.net/it/fonts/for/condensed-headline-fonts.markdown)
- [Font larghi ed estesi per titoli e loghi](https://trendhub.net/it/fonts/for/wide-and-extended-fonts.markdown)
- [Famiglie di caratteri con nove pesi e corsivi](https://trendhub.net/it/fonts/for/font-families-with-nine-weights.markdown)

---

Source: https://trendhub.net/it/fonts/for/variable-fonts-with-a-width-axis (trendhub)
