Font variabili con assi insoliti
Font variabili sperimentali ed espressivi con assi personalizzati: morbidezza, rimbalzo, informalità, morphing, rotazione, grade e altro.
Push the slider
Il formato dei font variabili permette a qualsiasi proprietà di un disegno di diventare un asse. Cinque sono registrati e comuni: peso, larghezza, inclinazione, corsivo e dimensione ottica. Oltre a questi, un designer può inventare un asse per qualunque cosa il carattere possa far variare in modo sensato, e dargli un tag di quattro lettere maiuscole. Questa libertà ha prodotto negli ultimi anni alcuni caratteri molto inventivi.
Gli assi personalizzati si dividono in pochi gruppi. Gli assi parametrici controllano una sola caratteristica misurabile, come lo spessore dei filetti o l’altezza delle minuscole, e sono strumenti per la regolazione tipografica fine. Il grade cambia quanto appare pesante il testo senza cambiarne la larghezza, così le righe non si riflussano, il che è utile per la modalità scura. Gli assi espressivi cambiano la personalità delle lettere: angoli più morbidi, una oscillazione informale, un rimbalzo lungo la linea di base, svasature simili a grazie. E alcuni assi sono puro concetto, e legano la forma delle lettere a dati oppure le ruotano nello spazio.
In CSS ogni asse personalizzato si imposta con font-variation-settings, usando il suo tag e un numero. Essendo continui, gli assi possono essere animati o collegati allo scorrimento e agli input. Le note qui sotto riportano gli assi di ciascun font come risultano nella scheda.
-
Recursive
Five axes in one file: proportional to monospace, linear to casual, upright to cursive.
-
Fraunces
Assi Softness e Wonky accanto a peso e dimensione ottica.
-
Roboto Flex
13 assi, compresi controlli parametrici per lo spessore dei tratti e le altezze delle lettere.
-
Google Sans Flex
Sei assi: peso, larghezza, dimensione ottica, grade, rotondità e inclinazione.
-
Commissioner
Flare and Volume axes grow serif-like endings on a humanist sans.
-
Geologica
Cursive and Sharpness axes beside weight and slant.
-
Shantell Sans
Bounce, Informality and Spacing axes on a marker-style handwriting font.
-
Nunito Sans
Un asse dell’altezza delle minuscole accanto a peso, larghezza e dimensione ottica.
-
Science Gothic
A custom contrast axis thins the horizontal strokes, beside weight, width and slant.
-
Signika
A Grade axis, from -30 to 0, slightly thins the strokes for light-on-dark text, beside weight.
-
Kumbh Sans
A parametric axis changes the thickness of the thin strokes alone, beside weight.
-
Akshar
Weight and contrast axes in a condensed sans for Latin and Devanagari.
-
AR One Sans
A resolution axis for augmented reality displays that keeps letter widths, so text does not reflow, beside weight.
-
Honk
Morph shifts the blocky letter shapes and Shadow Length extends a shadow behind them; there is no weight axis.
-
Kablammo
A Morph axis makes its doodle-covered capitals shift and dance.
-
Tilt Neon
Two axes rotate its neon-tube letters up to 45 degrees in X and Y.
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 assi insoliti
Come uso un asse personalizzato in CSS?
Scrivi font-variation-settings con il tag dell’asse tra virgolette e un valore, per esempio "SOFT" 100. I tag personalizzati distinguono maiuscole e minuscole e si scrivono in maiuscolo.
Gli assi dei font variabili si possono animare?
Sì. I valori degli assi possono avere transizioni o animazioni in CSS ed essere controllati da JavaScript, perché sono numeri continui.
A cosa serve un asse grade?
Fa apparire il testo più leggero o più pesante senza cambiare la larghezza delle lettere, quindi l’impaginato non si sposta. I designer lo usano per compensare sfondi scuri o schermi diversi.