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.
Narrow to wide
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.
-
Roboto
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
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
Larghezza da 62 a 125, da extra condensato a esteso, insieme al peso da Thin a Black con corsivi.
-
Saira
Larghezza da 50 a 125 e peso da 100 a 900 in un Sans Serif squadrato, più i corsivi.
-
IBM Plex Sans
Un asse della larghezza che restringe le lettere fino a 75, con sette pesi e corsivi.
-
Inconsolata
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
Un serif da testo con un asse della larghezza che si restringe da 100 a 62,5, con nove pesi e corsivi.
-
Merriweather
Un serif da testo con una gamma di larghezze contenuta, da 87 a 112, accanto agli assi del peso e della dimensione ottica.
-
Asap
Peso da 100 a 900 e larghezza da 75 a 125, con corsivi.
-
Georama
Un asse della larghezza da 62,5 a 150, da stretto a esteso, e nove pesi con corsivi.
-
Zalando Sans
Larghezza da 75 a 125 e peso da 200 a 900 in un grottesco sobrio, più i corsivi.
-
Science Gothic
Quattro assi: peso 100–900, larghezza 50–200, inclinazione e contrasto.
-
Advent Pro
Qui la larghezza può solo aumentare, da 100 a 200, accanto al peso da 100 a 900.
-
Mozilla Headline
Peso da 200 a 700 e larghezza da 75 a 125 in un sans da titoli.
-
Anek Latin
Larghezza da 75 a 125 su otto pesi dritti da Thin a ExtraBold.
-
Pliant
La larghezza può solo aumentare, da 100 a 125, con nove pesi, corsivi, cirillico e greco.
-
Ubuntu Sans
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.
Gli esempi caricano un sottoinsieme latino di base di ogni famiglia. Tutte le famiglie di questa pagina hanno una licenza aperta; la pagina di ciascuna indica le condizioni e offre i file originali.
Domande su font variabili con asse della larghezza
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.