Font variabili con asse della dimensione ottica
Famiglie variabili che si ridisegnano in base alla dimensione a cui sono composte: più robuste e aperte quando sono piccole, più fini e strette quando sono grandi.
Small print, big type
Nei caratteri di metallo ogni corpo veniva inciso separatamente e gli incisori adattavano il disegno strada facendo. I corpi piccoli erano più larghi e robusti, con spaziatura più aperta, per reggere sulla pagina; i corpi grandi erano rifiniti, con filetti più sottili e un accostamento più stretto. I font digitali hanno perso questa cura quando un unico contorno ha iniziato a essere scalato a ogni dimensione. L’asse della dimensione ottica, con il tag opsz, la riporta.
In un font con questo asse il valore corrisponde normalmente alla dimensione in punti. A un valore basso le lettere hanno un’altezza della x maggiore, filetti più spessi e più spazio tra le lettere. A un valore alto il contrasto si accentua e i dettagli diventano delicati. Il risultato pratico è che una sola famiglia può servire sia da carattere per il testo sia da carattere da titolazione, e una didascalia resta leggibile senza apparire pesante.
I browser applicano l’asse in automatico: font-optical-sizing è impostato su auto per impostazione predefinita, quindi un font con l’asse si adatta alla dimensione del carattere senza altro codice. Puoi anche impostarlo a mano per usare di proposito il disegno da titolazione in piccolo o quello da testo in grande. Gli intervalli variano molto da una famiglia all’altra, da una regolazione di pochi punti solo per il testo a un’escursione di oltre mille, e le note riportano ciascuno come risulta nella scheda.
-
Inter
La dimensione ottica da 14 a 32 adatta un Sans Serif da schermo a etichette piccole e titoli più grandi, con nove pesi e corsivi.
-
DM Sans
Dimensione ottica da 9 a 40 su un Sans Serif geometrico a basso contrasto.
-
Merriweather
Un serif da testo la cui dimensione ottica va da 18 a 144, con assi del peso e della larghezza.
-
Bricolage Grotesque
Dimensione ottica da 12 a 96, con ink trap esagerate all’estremo piccolo, accanto a peso e larghezza.
-
Nunito Sans
Un intervallo di dimensione ottica per corpi piccoli, da 6 a 12, tra quattro assi con peso, larghezza e altezza delle minuscole.
-
Source Serif 4
Dimensione ottica da 8 a 60 in un serif di transizione, con otto pesi e corsivi.
-
Newsreader
Un asse della dimensione ottica da 6 a 72, con pesi da 200 a 800.
-
Literata
A reading serif with optical size from 7 to 72, eight weights and italics.
-
Playfair
The widest optical range here, 5 to 1200, in a serif that also varies in weight and width.
-
Fraunces
Dimensione ottica da 9 a 144 accanto agli assi del peso, Softness e Wonky.
-
Bodoni Moda
Un serif ad alto contrasto la cui dimensione ottica va da 6 a 96.
-
Roboto Serif
Optical size from 8 to 144 among four axes, with weight, width and grade, and 18 named styles.
-
Roboto Flex
La dimensione ottica da 8 a 144 è uno dei 13 assi in un unico file.
-
Pathway Extreme
Optical size from 8 to 144 in a grotesque sans, beside weight and width axes.
-
TikTok Sans
Optical size from 12 to 36 with weight, width and slant, four axes in a single file.
-
Hedvig Letters Serif
A single-weight brand serif whose only axis is optical size, from 12 to 24.
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 dimensione ottica
Che cosa cambia la dimensione ottica in un font?
Il contrasto dei tratti, la spaziatura, l’altezza della x e i dettagli fini. Le dimensioni ottiche piccole sono più robuste e aperte; quelle grandi sono più nitide e più strette.
Devo scrivere CSS per usare la dimensione ottica?
Di solito no. I browser fanno corrispondere l’asse alla dimensione del carattere in automatico. Per cambiarlo, imposta font-variation-settings: "opsz" seguito da un valore compreso nell’intervallo del font.
È meglio un asse della dimensione ottica o font separati per testo e titoli?
Ottengono lo stesso risultato. L’asse è più comodo, copre le dimensioni intermedie e richiede un solo file.