Les polices variables expliquées aux designers

Les polices variables sont des fichiers de police qui contiennent une plage continue de styles plutôt qu’un ensemble fixe. Au lieu de fichiers séparés pour Regular, Medium, Semibold et Bold, un seul fichier variable contient toutes les graisses entre la plus légère et la plus grasse, et souvent d’autres plages, comme la largeur ou la taille optique. Vous choisissez n’importe quel point le long de chaque plage, appelée axe : un titre peut être en graisse 680 et une légende en 430 si c’est ce qui se lit le mieux.

Le format est arrivé avec la spécification OpenType en 2016 et il est aujourd’hui pris en charge par tous les grands navigateurs actuels et les principaux outils de design. Ce guide explique ce que font les axes, quand les polices variables valent la peine, et comment les configurer en CSS. Pour une vue d’ensemble du choix typographique, voir les bases de la typographie et les polices de marque.

Les axes d’une police variable et leur rôle

Un axe est une dimension de dessin que le créateur de caractères a dessinée à ses extrêmes ; la police interpole tout ce qui se trouve entre les deux. Cinq axes sont enregistrés dans la spécification OpenType et ont des étiquettes standard de quatre lettres. Les créateurs de caractères peuvent ajouter leurs propres axes personnalisés, écrits en capitales.

C’est dans les axes personnalisés que les polices prennent du caractère. Roboto Flex a un axe de grade (GRAD) qui change la graisse des traits sans changer la largeur des lettres. Fraunces a SOFT pour des terminaisons plus rondes et WONK pour ses formes plus fantaisistes. Recursive a des axes MONO et CASL qui la font passer de la linéale à la chasse fixe et du linéaire au décontracté. Vous pouvez tous les explorer sur Google Fonts, qui permet de filtrer les familles variables.

Pourquoi la taille optique compte le plus

La graisse attire l’attention, mais la taille optique est souvent l’axe le plus utile. Les caractères en plomb étaient gravés séparément pour chaque corps : les petits corps avaient des traits plus robustes, une hauteur d’x plus grande et un espacement plus lâche ; les grands corps étaient plus fins, plus contrastés et plus serrés. Les polices numériques ont perdu cela quand un seul contour a été agrandi à toutes les tailles. Un axe opsz le fait revenir.

Avec font-optical-sizing: auto (la valeur par défaut des navigateurs), une police dotée d’un axe opsz s’adapte d’elle-même à la taille choisie. Vous n’avez rien à faire, sinon choisir une police qui possède cet axe. C’est particulièrement utile pour les créations qui associent un grand titre et un petit texte d’appui dans une même famille, c’est-à-dire la plupart des publications et des pages d’accueil.

Quand les polices variables valent la peine

Le poids du fichier est le vrai compromis. Un fichier variable contient les données de tous les styles : il est en général plus lourd qu’une seule graisse statique mais plus léger que plusieurs. Si un site ne charge que Regular et Bold, deux fichiers statiques peuvent très bien être plus légers. S’il charge quatre graisses et un italique, un fichier variable l’emporte en général, et vous gagnez toutes les graisses intermédiaires en prime.

Les graisses intermédiaires sont plus utiles qu’il n’y paraît. Un texte clair sur un fond sombre ou coloré paraît plus gras que la même graisse sur du blanc : vous pouvez donc composer un texte blanc sur un dégradé en 460 au lieu de 500 pour l’accorder optiquement à une version foncée sur clair. L’effet est subtil, mais c’est ce qui donne à un système typographique un air réglé. Du texte sur un dégradé explique le problème de lisibilité plus large.

Utiliser les polices variables en CSS

Déclarez la police une fois avec une plage pour chaque axe, puis utilisez les propriétés habituelles comme font-weight et font-stretch. Ne recourez à font-variation-settings que pour les axes personnalisés, car cette propriété écrase tous les axes à la fois et ne s’hérite pas de façon pratique. Le guide des polices variables de MDN couvre les détails.

@font-face {
  font-family: "Brand Sans";
  src: url("/fonts/brand-sans-variable.woff2") format("woff2");
  font-weight: 100 900;   /* the wght range in the file */
  font-stretch: 75% 125%; /* the wdth range, if it has one */
  font-display: swap;
}

body {
  font-family: "Brand Sans", system-ui, sans-serif;
  font-weight: 420;
  font-optical-sizing: auto;
}

h1 {
  font-weight: 720;
  font-stretch: 90%;
}

.on-dark {
  font-weight: 390; /* light on dark reads heavier */
}

/* Custom axes go through font-variation-settings. */
.soft {
  font-variation-settings: "SOFT" 100, "WONK" 1;
}

Mettre en place un système typographique variable

1. 1

   Vérifiez les axes

   Ouvrez la page de présentation de la police et notez chaque axe et sa plage. Vérifiez que les langues et les caractères dont vous avez besoin sont inclus dans la version variable.

2. 2

   Définissez des rôles, pas des graisses

   Choisissez les graisses par rôle : texte courant, accentuation, intertitre, titre, étiquette. Un système de cinq valeurs réglées vaut mieux que neuf valeurs standard utilisées au hasard.

3. 3

   Ajustez selon les fonds

   Créez une graisse légèrement plus fine pour le texte clair sur fond sombre et comparez les deux en taille réelle.

4. 4

   Laissez agir la taille optique

   Gardez font-optical-sizing: auto sauf si vous avez une raison de la fixer, et comparez titres et légendes côte à côte.

5. 5

   Notez-le

   Consignez le fichier de police, les plages des axes et les valeurs de chaque rôle dans votre charte graphique, pour que personne ne les reconstruise de mémoire.

Les polices variables récompensent la retenue. Le but n’est pas d’utiliser toutes les valeurs, mais de choisir les quelques valeurs exactes qui rendent votre typographie lisible partout où elle apparaît, d’un paragraphe en 16 px à un titre display en 200 px.