# Polices variables à axes inhabituels

> Polices variables expérimentales et expressives à axes personnalisés : douceur, rebond, décontraction, métamorphose, rotation, grade et plus encore.

Le format de police variable permet de faire de n’importe quelle propriété d’un dessin un axe. Cinq sont enregistrés et courants : la graisse, la chasse, l’inclinaison, l’italique et la taille optique. Au-delà, un créateur peut inventer un axe pour tout ce que le caractère peut faire varier de façon utile, et lui donner une balise de quatre lettres en capitales. Cette liberté a produit ces dernières années des caractères inventifs.

Les axes personnalisés se rangent en quelques groupes. Les axes paramétriques commandent une caractéristique mesurable, comme l’épaisseur des déliés ou la hauteur des minuscules, et servent à l’ajustement typographique fin. Le grade change le poids apparent du texte sans modifier sa chasse, de sorte que les lignes ne se recomposent pas, ce qui est utile en mode sombre. Les axes expressifs changent la personnalité des lettres : coins plus doux, tremblé décontracté, rebond le long de la ligne de base, évasements qui évoquent des empattements. Et certains axes sont du pur concept, liant la forme des lettres à des données ou les faisant tourner dans l’espace.

En CSS, chaque axe personnalisé se règle avec font-variation-settings, au moyen de sa balise et d’un nombre. Comme ils sont continus, les axes peuvent être animés ou liés au défilement et à la saisie. Les notes ci-dessous nomment les axes propres à chaque police, tels qu’ils sont consignés.

How these were chosen: Familles variables dont la fiche indique au moins un axe personnalisé en plus des axes enregistrés de graisse, de chasse, d’inclinaison, d’italique et de taille optique.

## Fonts (16)

- [Recursive](https://trendhub.net/fr/fonts/recursive.markdown) (Sans empattements, 16 styles · variable, OFL): Five axes in one file: proportional to monospace, linear to casual, upright to cursive.
- [Fraunces](https://trendhub.net/fr/fonts/fraunces.markdown) (À empattements, 18 styles · variable, OFL): Axes Softness et Wonky en plus de la graisse et de la taille optique.
- [Roboto Flex](https://trendhub.net/fr/fonts/roboto-flex.markdown) (Sans empattements, 20 styles · variable, OFL): 13 axes, dont des commandes paramétriques pour l’épaisseur de trait et la hauteur des lettres.
- [Google Sans Flex](https://trendhub.net/fr/fonts/google-sans-flex.markdown) (Sans empattements, 18 styles · variable, OFL): Six axes : graisse, chasse, taille optique, grade, rondeur et inclinaison.
- [Commissioner](https://trendhub.net/fr/fonts/commissioner.markdown) (Sans empattements, 18 styles · variable, OFL): Flare and Volume axes grow serif-like endings on a humanist sans.
- [Geologica](https://trendhub.net/fr/fonts/geologica.markdown) (Sans empattements, 18 styles · variable, OFL): Cursive and Sharpness axes beside weight and slant.
- [Shantell Sans](https://trendhub.net/fr/fonts/shantell-sans.markdown) (Manuscrite, 12 styles · variable, OFL): Bounce, Informality and Spacing axes on a marker-style handwriting font.
- [Nunito Sans](https://trendhub.net/fr/fonts/nunito-sans.markdown) (Sans empattements, 16 styles · variable, OFL): Un axe de hauteur des minuscules à côté de la graisse, de la chasse et de la taille optique.
- [Science Gothic](https://trendhub.net/fr/fonts/science-gothic.markdown) (Sans empattements, 18 styles · variable, OFL): A custom contrast axis thins the horizontal strokes, beside weight, width and slant.
- [Signika](https://trendhub.net/fr/fonts/signika.markdown) (Sans empattements, 5 styles · variable, OFL): A Grade axis, from -30 to 0, slightly thins the strokes for light-on-dark text, beside weight.
- [Kumbh Sans](https://trendhub.net/fr/fonts/kumbh-sans.markdown) (Sans empattements, 9 styles · variable, OFL): A parametric axis changes the thickness of the thin strokes alone, beside weight.
- [Akshar](https://trendhub.net/fr/fonts/akshar.markdown) (Sans empattements, 5 styles · variable, OFL): Weight and contrast axes in a condensed sans for Latin and Devanagari.
- [AR One Sans](https://trendhub.net/fr/fonts/ar-one-sans.markdown) (Sans empattements, 4 styles · variable, OFL): A resolution axis for augmented reality displays that keeps letter widths, so text does not reflow, beside weight.
- [Honk](https://trendhub.net/fr/fonts/honk.markdown) (Titrage, 1 style · variable, OFL): Morph shifts the blocky letter shapes and Shadow Length extends a shadow behind them; there is no weight axis.
- [Kablammo](https://trendhub.net/fr/fonts/kablammo.markdown) (Titrage, 1 style · variable, OFL): A Morph axis makes its doodle-covered capitals shift and dance.
- [Tilt Neon](https://trendhub.net/fr/fonts/tilt-neon.markdown) (Titrage, 1 style · variable, OFL): Two axes rotate its neon-tube letters up to 45 degrees in X and Y.

## FAQs

### Comment utiliser un axe personnalisé en CSS ?

Écrivez font-variation-settings avec la balise de l’axe entre guillemets et une valeur, par exemple "SOFT" 100. Les balises personnalisées sont sensibles à la casse et s’écrivent en capitales.

### Les axes d’une police variable peuvent-ils être animés ?

Oui. Les valeurs d’axe peuvent faire l’objet de transitions ou d’animations en CSS et être pilotées par JavaScript, puisque ce sont des nombres continus.

### À quoi sert un axe de grade ?

Il rend le texte plus léger ou plus lourd en apparence sans changer la largeur des lettres, donc sans déplacer la mise en page. Les créateurs s’en servent pour compenser des fonds sombres ou des écrans différents.

## Related collections

- [Polices variables avec axe de chasse](https://trendhub.net/fr/fonts/for/variable-fonts-with-a-width-axis.markdown)
- [Polices variables à axe de taille optique](https://trendhub.net/fr/fonts/for/variable-fonts-with-optical-size.markdown)
- [Polices de titrage futuristes pour titres et logos de science-fiction](https://trendhub.net/fr/fonts/for/futuristic-display-fonts.markdown)
- [Polices pixel et arcade](https://trendhub.net/fr/fonts/for/pixel-and-arcade-fonts.markdown)
- [Polices manuscrites pour notes, citations et touches personnelles](https://trendhub.net/fr/fonts/for/handwriting-fonts.markdown)
- [Familles de polices en neuf graisses avec italiques](https://trendhub.net/fr/fonts/for/font-families-with-nine-weights.markdown)

---

Source: https://trendhub.net/fr/fonts/for/variable-fonts-with-unusual-axes (trendhub)
