Feature 15 — Variable fonts

Le texte
qui respire comme un être vivant

Déplacez la souris sur la zone de texte. L'axe horizontal contrôle le poids (100→900), l'axe vertical contrôle la largeur (25→151). Observez la fonte se transformer en temps réel — un seul fichier, toutes les variations.

Typographie
vivante
← Axe X = poids · Axe Y = largeur →
Respiration
Poids 300
Largeur 100
Optique 40

Axes — Roboto Flex

wghtPoids — 100 → 900
wdthLargeur — 25 → 151
opszTaille optique — 8 → 144
slntInclinaison (non activé)
Présence
Équilibre
Respiration

Animation CSS @keyframes sur font-variation-settings · délais décalés

Fin
wght 100 · wdth 80
Régulier
wght 500 · wdth 100
Gras
wght 900 · wdth 140

Une fonte,
infini de formes

Une variable font est un seul fichier qui interpole entre plusieurs variations. Fini les 6 fichiers distincts (thin, light, regular, medium, bold, black) — un seul .woff2 couvre tout le spectre.

Ici : Roboto Flex, gratuite sur Google Fonts. Elle expose 5 axes animables — la propriété font-variation-settings gère tout en CSS.

Note technique

La propriété font-variation-settings accepte des paires axe/valeur : 'wght' 400, 'wdth' 100. Elle est animable via @keyframes et modifiable en JS via el.style.fontVariationSettings. La position de la souris est normalisée 0→1 dans la zone et mappée vers les plages de chaque axe.