Que sont les polices variables ?

Une police variable est un fichier de police unique qui contient un espace de conception continu au lieu d’un ensemble de coupes figées. Là où une famille statique livre Regular, Medium et Bold sous forme de fichiers séparés, une police variable stocke les extrêmes du dessin et peut restituer n’importe quel point entre eux — graisse 400, 457 ou 610 — à partir du même fichier.

Les graisses nommées subsistent comme des repères : 400 signifie toujours regular, 700 signifie toujours bold, et les deux se restituent exactement comme elles le feraient à partir de fichiers statiques. Ce qui change, c’est que l’espace entre les repères s’ouvre — les paliers cessent d’être les seules options. Cet article fait partie de notre guide de typographie.

En quoi une police variable diffère-t-elle des graisses statiques ?

Une famille statique est un ensemble de dessins discrets : chaque graisse a été exportée dans son propre fichier, et tout ce qui se trouve entre deux graisses n’existe pas. Demandez à un navigateur la graisse 500 alors que seules 400 et 700 sont installées, et soit il s’aligne sur la voisine, soit il synthétise une fausse graisse — en épaississant grossièrement les contours pour simuler le gras, avec des résultats qui font grimacer les créateurs de caractères.

Une police variable déplace l’interpolation dans le fichier. Ce n’est pas tant une idée nouvelle qu’une idée relocalisée : les créateurs de caractères dessinent depuis longtemps les extrêmes d’une famille et interpolent les graisses intermédiaires entre eux — c’est ainsi que les grandes familles étaient produites. Une police variable livre les extrêmes (les masters) et laisse le moteur de rendu interpoler en direct, si bien que la graisse 457 n’est pas une fausse graisse mais un point légitime dans l’espace conçu.

Quels axes une police variable peut-elle avoir ?

La graisse est l’axe que vous rencontrerez partout, mais le format est général. Une convention d’axes enregistrés nomme les plus courants avec des étiquettes de quatre lettres : wght (graisse), wdth (largeur), slnt (inclinaison) et opsz (taille optique — le dessin s’adaptant à la taille à laquelle il est composé). Les polices peuvent aussi définir des axes personnalisés : grades, douceur, tout ce que le concepteur a paramétré. L’introduction aux polices variables de web.dev parcourt les axes en détail.

En pratique, la plupart des polices variables exposent un ou deux axes — la graisse seule est courante — et ce n’est pas un défaut. Un seul axe bien dessiné couvre la grande majorité des besoins des interfaces.

Les polices variables se chargent-elles plus vite ?

Parfois, et il vaut la peine d’être précis sur le quand. Un fichier variable est plus gros que n’importe laquelle seule de ses graisses statiques — il porte tout l’espace de conception. La comparaison honnête : une graisse de texte statique en sous-ensemble latin pèse couramment autour de 15 à 40 Ko en WOFF2, tandis que l’équivalent variable pèse souvent deux à quatre fois une seule coupe. Donc :

• Une seule graisse utilisée → le fichier statique l’emporte sur les octets.
• Deux graisses → à peu près équivalent, selon la famille.
• Trois graisses ou plus → le fichier variable l’emporte généralement sur les octets, et l’emporte toujours sur les requêtes : un seul fichier remplace l’ensemble.

Une équipe qui utilise 400, 500, 600 et 700 de la même famille est le cas d’école — quatre requêtes se réduisent à une, le total des octets baisse généralement, et chaque valeur intermédiaire vient gratuitement. Les chiffres exacts varient selon la couverture des glyphes et le sous-ensemble, alors mesurez vos propres fichiers plutôt que de citer le tableau de qui que ce soit, y compris celui-ci.

Voyez une hiérarchie de graisses complète dans une seule famille — des graisses par style, de la légende au display, prévisualisées aux tailles d’une véritable échelle. Avec des fichiers statiques, cette hiérarchie représente quatre requêtes ; une police variable livre la même plage en une seule.

Comment utiliser une police variable en CSS ?

Déclarez la plage que le fichier couvre, puis utilisez les propriétés ordinaires :

@font-face {
  font-family: "Inter Variable";
  src: url("/fonts/inter-var.woff2") format("woff2");
  font-weight: 100 900;   /* la plage, pas une valeur unique */
}

h1 { font-weight: 650; }
p  { font-weight: 440; }

font-weight: 457 fonctionne simplement lorsque la police est variable — aucune syntaxe particulière. Les axes enregistrés se mappent sur du CSS ordinaire : la graisse sur font-weight, la largeur sur font-stretch, l’inclinaison sur font-style, la taille optique sur font-optical-sizing. La trappe de secours de bas niveau, font-variation-settings: "XXXX" value, existe pour les axes personnalisés ; préférez les propriétés de haut niveau partout où elles s’appliquent, car elles se composent mieux avec le reste de la cascade.

Pourquoi la précision de la graisse compte-t-elle dans une vraie hiérarchie ?

Parce que 400 et 600 ne tombent pas toujours juste, et avec des polices statiques votre seule option était de faire avec. Deux situations reviennent constamment. Un texte clair sur fond sombre tend à paraître plus fin que la même graisse sur blanc — un corps de texte réglé à 400 peut dériver vers le fragile, et 440 le corrige discrètement. Et un style display à 700 peut sembler plus lourd que voulu aux grandes tailles, où 640 conserve la présence sans le cri. Un réglage plausible :

Que la légende soit plus grasse que le corps de texte est délibéré — les petites tailles s’amincissent optiquement, et un soupçon de graisse ajoutée compense. Les polices variables permettent aussi une graisse animée ou responsive ; c’est une capacité réelle, et rarement déterminante.

Quelles polices sont variables — et comment cela s’intègre-t-il dans un flux de travail à base de tokens ?

Beaucoup des grandes polices d’interface proposent des versions variables — Inter, Roboto Flex, Source Sans 3 et Fraunces en sont des exemples — mais la plupart des familles de polices n’en ont toujours pas, donc la prise en charge du variable est une propriété à vérifier par famille, pas une hypothèse. Tous les moteurs de navigateur actuels les gèrent.

Dans un flux de travail à base de tokens, la répartition des rôles est nette : le système typographique définit les graisses par style, et le format de fichier détermine quelles valeurs sont restituables. Les contrôles de graisse par style de Scale Composer fixent cette hiérarchie, et les tokens exportés — DTCG, CSS, Tailwind, Figma Variables — portent les valeurs sur lesquelles vous vous arrêtez : des paliers nommés si votre famille est statique, absolument n’importe quelle valeur si elle est variable. Le rôle de l’outil est le système, pas le fichier ; la police que vous licenciez décide de la finesse avec laquelle vous pouvez la régler.

Réglez les graisses au lieu d’accepter les paliers

La façon concrète de comprendre la graisse variable est de la déplacer et de regarder la hiérarchie se rééquilibrer. Ajustez la graisse de chaque style en direct — poussez le corps de texte de 400 vers 440, ramenez le display de 700 à 650, et jugez le résultat dans un texte spécimen continu plutôt que dans les chiffres d’un curseur de graisse. Quand une valeur entre les paliers se lit mieux, c’est la capacité pour laquelle le format existe — et les tokens exportés la porteront.