Cette page a été traduite avec l'aide d'une IA. L'original en anglais fait foi.
Pendant les deux premières décennies de la typographie web, une police de caractères était un ensemble d'instances figées : romain, italique, gras, peut-être un maigre et un noir si le budget le permettait. Chaque choix entre elles était un choix entre des points fixes. Les polices variables — introduites avec les OpenType Font Variations en 2016 et désormais prises en charge par tous les grands navigateurs — remplacent ces points par des plages continues. Un seul fichier contient un espace de conception entier, et le typographe, la feuille de style ou le lecteur peut y sélectionner n'importe quelle position.
Cela importe pour l'accessibilité parce que tant des ajustements recommandés par cette publication — un soupçon de graisse en plus aux petits corps, une chasse légèrement élargie pour les lecteurs malvoyants, des formes plus robustes dans des conditions défavorables — étaient auparavant impossibles, sauf si la fonderie avait par hasard taillé cette instance exacte. Ce sont désormais des nombres.
Les axes
Une police variable expose des axes de variation nommés. Cinq sont enregistrés dans la spécification OpenType :
- wght (graisse) — continue du fil au noir, plutôt que par paliers de cent.
- wdth (largeur) — du condensé à l'étendu, sans la distorsion de la mise à l'échelle mécanique.
- opsz (taille optique) — des formes adaptées au corps auquel elles seront lues.
- slnt (inclinaison) et ital (italique) — l'angle oblique et le basculement vers de vraies formes italiques.
font-weight, font-stretch, font-style et font-optical-sizing — qu'il faut préférer à la propriété de bas niveau font-variation-settings, afin que les styles cascadent et se combinent de manière prévisible.
La taille optique : le retour d'un vieil outil
La taille optique n'est pas neuve ; elle est très ancienne, et c'est son absence de la typographie numérique qui était l'anomalie. Dans le plomb, chaque corps était taillé séparément, et le graveur de poinçons compensait : les petits corps recevaient des traits plus robustes, un espacement plus large, de plus grandes hauteurs d'x, des contreformes plus ouvertes ; les corps d'affichage recevaient un contraste plus fin et un ajustement plus serré. La photocomposition puis les fontes numériques ont abandonné cette pratique, en mettant un unique dessin maître à l'échelle de tous les corps — c'est pourquoi tant de petits textes numériques ont paru maigres et engorgés.
L'axe opsz restaure la pratique. Une police variable bien faite, dotée d'un axe de taille optique, rend le texte au corps de légende avec des formes robustes et ouvertes et le texte de titre avec du raffinement, automatiquement, dès lors que font-optical-sizing: auto est en vigueur (la valeur par défaut). Pour les lecteurs malvoyants, qui vivent à l'extrémité petite et tendue de la plage, c'est un gain direct de lisibilité qui ne coûte au designer rien de plus que le choix d'une police qui le prend en charge.
Les grades : de la graisse sans redistribution
Un axe de grade change l'obscurité des traits sans changer la largeur des glyphes. Cette distinction est tout l'enjeu : ajuster font-weight modifie la largeur des lettres et redistribue donc le texte, tandis qu'ajuster le grade ne le fait pas. Le texte peut devenir visuellement plus lourd ou plus léger et chaque coupure de ligne reste en place.
Le chapitre précédent notait qu'un texte clair sur fond sombre paraît plus gras que le même caractère sur blanc. Le grade est l'instrument précis de cette correction : abaissez légèrement le grade en mode sombre et les deux thèmes s'accordent en graisse apparente, sans décalage de mise en page quand un lecteur bascule de l'un à l'autre. Les grades sont tout aussi utiles pour les états de survol et de sélection, et pour compenser les écrans qui rendent les caractères plus lourds ou plus légers que prévu.
La performance est de l'accessibilité
Une famille qui exigeait autrefois six ou huit fichiers de fontes peut être livrée en un ou deux (romain et italique). Même si un fichier variable est plus lourd que n'importe quelle instance statique isolée, il est presque toujours plus léger que la somme des instances qu'il remplace, et il coûte moins de requêtes réseau. Pour les lecteurs sur connexions lentes et appareils modestes — une population qui recoupe largement celle que sert le travail d'accessibilité — cela signifie moins de temps à fixer un texte invisible ou de substitution, et moins d'échanges brutaux quand la police web arrive enfin. Le sous-ensemble de glyphes et les formats de compression modernes réduisent encore le coût.
Il y a aussi un bénéfice de conception avec un dividende d'accessibilité : quand toutes les graisses sont disponibles, les designers cessent de recourir au faux gras et au faux italique, et cessent de choisir une graisse trop maigre au seul motif que c'était le seul fichier chargé.
La personnalisation : la promesse la plus vaste
L'opportunité la plus profonde reste largement inexploitée : laisser le lecteur régler le caractère. Une application de lecture ou un site de lecture au long cours construit sur une police variable peut offrir un curseur de graisse, un réglage de largeur, un contrôle d'espacement — continus, immédiats et réversibles. Un lecteur malvoyant qui trouve la graisse par défaut trop maigre peut l'épaissir à son goût plutôt que de choisir entre « normal » et « gras ». Un lecteur âgé peut élargir légèrement les formes. Ce sont exactement les ajustements dont la recherche sur la basse vision suggère depuis longtemps l'utilité, et les polices variables les rendent bon marché à offrir.
Peu de sites le font encore, et aucune interface standard n'existe pour cela. Mais la barrière technique est tombée, et la position de cette publication est que le caractère réglable par le lecteur est la direction que devrait prendre la typographie d'écran : le designer fixe une valeur par défaut bien jugée, et le lecteur peut s'en écarter.
Pourquoi ce chapitre est nouveau
Quand la première édition est parue, les pages web ne pouvaient pas embarquer de fontes de manière fiable — la typographie consistait à choisir parmi la poignée de caractères installés sur la machine du lecteur. L'embarquement de polices web est arrivé vers 2010 ; les polices variables ont été spécifiées en 2016 et ont atteint une large prise en charge des navigateurs dans les années suivantes. L'idée qu'une feuille de style puisse spécifier une graisse de 435, ou que la taille optique puisse revenir de l'ère du plomb par un axe dans un fichier, n'existait tout simplement pas pour qu'on l'écrive.
En CSS
body {
font-optical-sizing: auto; /* opsz: text forms at text sizes */
}
@media (prefers-color-scheme: dark) {
/* grade trims dark-mode weight bloom without reflow */
body { font-variation-settings: "GRAD" -20; }
}Recommandations
- Préférez les polices variables pour les nouveaux projets ; livrez un fichier romain et un fichier italique plutôt qu'une pile de statiques.
- Choisissez des caractères dotés d'un axe de taille optique pour les interfaces qui composent du texte à de nombreux corps, et laissez
font-optical-sizing: autoen vigueur. - Utilisez l'axe de grade (là où il existe) pour corriger la graisse apparente en mode sombre sans provoquer de redistribution.
- Utilisez les propriétés CSS de haut niveau (
font-weight,font-stretch) plutôt quefont-variation-settingsbrut chaque fois que possible. - Ne comptez jamais sur le faux gras ni le faux italique ; le fichier variable rend les vraies formes disponibles.
- Là où la lecture au long cours est le produit, envisagez d'offrir aux lecteurs un contrôle direct de la graisse et de la largeur — et mémorisez leur choix.