Polices variables à axes inhabituels
Polices variables expérimentales et expressives à axes personnalisés : douceur, rebond, décontraction, métamorphose, rotation, grade et plus encore.
Push the slider
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.
-
Recursive
Five axes in one file: proportional to monospace, linear to casual, upright to cursive.
-
Fraunces
Axes Softness et Wonky en plus de la graisse et de la taille optique.
-
Roboto Flex
13 axes, dont des commandes paramétriques pour l’épaisseur de trait et la hauteur des lettres.
-
Google Sans Flex
Six axes : graisse, chasse, taille optique, grade, rondeur et inclinaison.
-
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 axe de hauteur des minuscules à côté de la graisse, de la chasse et de la taille optique.
-
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.
Les exemples chargent un sous-ensemble latin de base de chaque famille. Toutes les familles présentées ici sont sous licence libre ; leur page en indique les conditions et propose les fichiers originaux.
Questions sur polices variables à axes inhabituels
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.