# Font variabili con assi insoliti

> Font variabili sperimentali ed espressivi con assi personalizzati: morbidezza, rimbalzo, informalità, morphing, rotazione, grade e altro.

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.

How these were chosen: Famiglie variabili le cui schede elencano almeno un asse personalizzato oltre a quelli registrati di peso, larghezza, inclinazione, corsivo e dimensione ottica.

## Fonts (16)

- [Recursive](https://trendhub.net/it/fonts/recursive.markdown) (Sans Serif, 16 stili · variabile, OFL): Five axes in one file: proportional to monospace, linear to casual, upright to cursive.
- [Fraunces](https://trendhub.net/it/fonts/fraunces.markdown) (Serif, 18 stili · variabile, OFL): Assi Softness e Wonky accanto a peso e dimensione ottica.
- [Roboto Flex](https://trendhub.net/it/fonts/roboto-flex.markdown) (Sans Serif, 20 stili · variabile, OFL): 13 assi, compresi controlli parametrici per lo spessore dei tratti e le altezze delle lettere.
- [Google Sans Flex](https://trendhub.net/it/fonts/google-sans-flex.markdown) (Sans Serif, 18 stili · variabile, OFL): Sei assi: peso, larghezza, dimensione ottica, grade, rotondità e inclinazione.
- [Commissioner](https://trendhub.net/it/fonts/commissioner.markdown) (Sans Serif, 18 stili · variabile, OFL): Flare and Volume axes grow serif-like endings on a humanist sans.
- [Geologica](https://trendhub.net/it/fonts/geologica.markdown) (Sans Serif, 18 stili · variabile, OFL): Cursive and Sharpness axes beside weight and slant.
- [Shantell Sans](https://trendhub.net/it/fonts/shantell-sans.markdown) (Scritto a mano, 12 stili · variabile, OFL): Bounce, Informality and Spacing axes on a marker-style handwriting font.
- [Nunito Sans](https://trendhub.net/it/fonts/nunito-sans.markdown) (Sans Serif, 16 stili · variabile, OFL): Un asse dell’altezza delle minuscole accanto a peso, larghezza e dimensione ottica.
- [Science Gothic](https://trendhub.net/it/fonts/science-gothic.markdown) (Sans Serif, 18 stili · variabile, OFL): A custom contrast axis thins the horizontal strokes, beside weight, width and slant.
- [Signika](https://trendhub.net/it/fonts/signika.markdown) (Sans Serif, 5 stili · variabile, OFL): A Grade axis, from -30 to 0, slightly thins the strokes for light-on-dark text, beside weight.
- [Kumbh Sans](https://trendhub.net/it/fonts/kumbh-sans.markdown) (Sans Serif, 9 stili · variabile, OFL): A parametric axis changes the thickness of the thin strokes alone, beside weight.
- [Akshar](https://trendhub.net/it/fonts/akshar.markdown) (Sans Serif, 5 stili · variabile, OFL): Weight and contrast axes in a condensed sans for Latin and Devanagari.
- [AR One Sans](https://trendhub.net/it/fonts/ar-one-sans.markdown) (Sans Serif, 4 stili · variabile, OFL): A resolution axis for augmented reality displays that keeps letter widths, so text does not reflow, beside weight.
- [Honk](https://trendhub.net/it/fonts/honk.markdown) (Display, 1 stile · variabile, OFL): Morph shifts the blocky letter shapes and Shadow Length extends a shadow behind them; there is no weight axis.
- [Kablammo](https://trendhub.net/it/fonts/kablammo.markdown) (Display, 1 stile · variabile, OFL): A Morph axis makes its doodle-covered capitals shift and dance.
- [Tilt Neon](https://trendhub.net/it/fonts/tilt-neon.markdown) (Display, 1 stile · variabile, OFL): Two axes rotate its neon-tube letters up to 45 degrees in X and Y.

## FAQs

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

## Related collections

- [Font variabili con asse della larghezza](https://trendhub.net/it/fonts/for/variable-fonts-with-a-width-axis.markdown)
- [Font variabili con asse della dimensione ottica](https://trendhub.net/it/fonts/for/variable-fonts-with-optical-size.markdown)
- [Font futuristici da titolazione per titoli e logo di fantascienza](https://trendhub.net/it/fonts/for/futuristic-display-fonts.markdown)
- [Font pixel e arcade](https://trendhub.net/it/fonts/for/pixel-and-arcade-fonts.markdown)
- [Font scritti a mano per appunti, citazioni e tocchi personali](https://trendhub.net/it/fonts/for/handwriting-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-unusual-axes (trendhub)
