Le Web universel

1.3 Graisse des caractères

La règle du romain au demi-gras, reconstruite pour 2026 : axes de graisse variables et continus, compensation de graisse en mode sombre grâce aux grades, le problème de la mode des graisses fines, et l'interaction entre graisse et contraste WCAG.

7 min read

Cette page a été traduite avec l'aide d'une IA. L'original en anglais fait foi.

La recommandation de 2005 sur la graisse était compacte et juste : composer le texte dans des graisses allant du romain au demi-gras ; éviter les caractères maigres, dont les traits portent trop peu de contraste pour les lecteurs malvoyants, et éviter les caractères gras à noirs, dont les contrepoinçons fermés étouffent la lisibilité pour tout le monde. Vingt ans plus tard, la cible n'a pas bougé. Ce qui a changé, c'est tout ce qui l'entoure — la graisse est désormais une variable continue plutôt qu'un menu de deux ou trois déclinaisons, les interfaces sombres ont rendu la graisse dépendante du contexte, et la mode a passé une bonne partie de la période écoulée à tirer la typographie d'interface exactement dans la direction contre laquelle ce chapitre met en garde.

Ce qui a changé depuis 2005

En 2005, la graisse était un choix discret. Une famille était livrée en romain et en gras, parfois en maigre et en noir, et le designer en choisissait une. Les polices variables ont dissous cette contrainte : l'axe wght expose la graisse comme un continuum, typiquement de 100 à 900, adressable depuis le CSS avec font-weight ou font-variation-settings. « Du romain au demi-gras » n'est plus un bond de 400 à 700 — ce peut être 430 pour le texte courant en mode clair, 380 sur un fond sombre, 500 pour une petite étiquette qui a besoin d'être renforcée. La recommandation survit ; la précision avec laquelle elle peut être exécutée est nouvelle.

Certaines familles vont plus loin et exposent un axe de grade (GRAD), une convention popularisée par des familles comme Roboto Flex de Google. Le grade modifie l'épaisseur des traits sans changer la chasse des lettres, si bien que son ajustement ne provoque aucun recalcul du texte. Cette distinction compte partout où la graisse doit répondre au contexte — mode sombre, états de survol, différences de rendu — sans déplacer la mise en page.

Le second changement est l'avènement des interfaces sombres comme mode de premier rang, interrogeable via prefers-color-scheme. La graisse et la polarité interagissent, et les recommandations de 2005 — rédigées à une époque de texte sombre-sur-clair quasi universel — n'ont jamais eu à s'en préoccuper.

Mode sombre et compensation de graisse

Le texte clair sur un fond sombre paraît plus lourd que le même texte en polarité positive. Les traits lumineux semblent gonfler contre leur environnement sombre — l'effet est communément décrit par la halation, l'étalement de la lumière depuis les zones brillantes, et il est prononcé sur les écrans émissifs ainsi que pour les lecteurs atteints d'astigmatisme ou de troubles de diffusion de la lumière. Un caractère réglé pour paraître juste en sombre-sur-clair semblera légèrement gonflé et flou en clair-sur-sombre ; les contrepoinçons se resserrent, et aux petites tailles les lettres commencent à s'engorger.

La compensation pratique consiste à réduire légèrement la graisse en mode sombre. Avec un axe wght variable, abaisser le texte courant de l'ordre de 20 à 50 unités — de 400 vers 370, par exemple — restaure la densité de trait voulue. Là où un axe GRAD existe, c'est le meilleur outil, puisqu'un grade négatif amincit les traits sans aucun recalcul ; c'est précisément le cas d'usage pour lequel les grades ont été conçus. Les familles statiques n'offrent aucun bon levier, ce qui est en soi un argument en faveur des polices variables dans tout produit engagé envers les deux thèmes de couleur.

Le mode sombre appelle un second ajustement connexe : le texte blanc pur sur noir pur maximise la halation. Des premiers plans légèrement adoucis (blanc cassé) et des surfaces sombres rehaussées réduisent l'éblouissement sans sacrifier le contraste de manière significative. La compensation de graisse et l'adoucissement des valeurs travaillent de concert.

Le problème des graisses fines

La révision la plus forte de ce chapitre ne porte pas sur la règle mais sur son urgence. En 2005, les caractères fins étaient rares parce qu'ils ne pouvaient pas se rendre — un trait filiforme sur un écran à 96 DPI disparaissait tout simplement. Les écrans à haute densité ont rendu les graisses ultra-maigres affichables, et la mode a suivi immédiatement : les graisses fines et extra-maigres sont devenues le raccourci de l'élégance et de la modernité dans l'image de marque, les interfaces et les grands textes de titrage.

Affichable n'est pas lisible. Un trait de graisse 200 qui survit sur l'écran haute densité du designer se dégrade sur les moniteurs à densité standard, s'assombrit encore sous une faible luminosité d'écran ou un filtrage nocturne agressif, et pour les lecteurs malvoyants peut tomber tout à fait sous le seuil de contraste de trait utile. Le caractère fin est un pari cumulé sur le fait que chaque lecteur dispose d'une excellente acuité, d'un écran haut de gamme et d'une pleine luminosité. Les rapports de contraste mesurés surestiment aussi la performance réelle des graisses fines : la formule de WCAG compare les couleurs de premier plan et d'arrière-plan mais ne tient pas compte de l'épaisseur du trait, si bien qu'un caractère de graisse 100 peut techniquement passer 4,5:1 tout en présentant bien moins de contraste utilisable qu'un caractère de graisse 400 aux mêmes couleurs. La recherche APCA qui alimente le projet de WCAG 3.0 traite exactement cette lacune — son modèle considère le contraste, la taille et la graisse comme des variables en interaction, assignant au texte plus fin et plus petit des exigences de contraste de luminosité plus strictes. Cette direction de voyage confirme l'intuition de 2005 : la graisse fait partie du contraste, que la formule actuelle le dise ou non.

L'autre pôle exige moins de nouveaux débats. Les graisses grasses et noires ferment toujours les contrepoinçons et fusionnent les lettres aux tailles de labeur ; elles restent des outils de titrage. Le gras conserve son rôle légitime d'emphase et de hiérarchie — et WCAG lui-même reconnaît la contribution du gras en abaissant le seuil de contraste du texte de grande taille à 14pt pour le texte en gras contre 18pt pour le romain.

L'axe de graisse de 100 à 900 avec la bande de 400 à 600 marquée sûre pour le texte courant — les filiformes sont réservés au titrage, le gras à l'emphase, et les traits fins disparaissent sur les surfaces sombres.

La graisse en pratique

Une politique de graisse moderne ressemble à ceci. Le texte courant se situe entre environ 400 et 500, choisi famille par famille — certains caractères sont dessinés maigres à 400 et se lisent mieux à 450. L'emphase monte de 200 à 300 unités au-dessus de la graisse du texte courant, afin d'être sans équivoque plutôt qu'ambiguë. Le mode sombre soustrait une quantité modeste via wght ou, de préférence, GRAD. Rien en dessous d'environ 300 n'apparaît aux tailles de labeur, et tout ce qui descend en dessous aux tailles de titrage est vérifié sur un écran à densité standard, à une luminosité réaliste. Là où les polices variables sont indisponibles, les déclinaisons statiques les plus proches de ces cibles s'appliquent, et la compensation en mode sombre se reporte sur l'adoucissement des couleurs.

En CSS

body { font-weight: 400; }
strong { font-weight: 600; }     /* semibold beats bold for emphasis */

@media (prefers-color-scheme: dark) {
  /* light-on-dark reads heavier — pull back with a variable axis */
  body { font-variation-settings: "GRAD" -20; }
}

Recommandations

  • Maintenir le texte courant dans la plage 400–500, réglée police par police avec l'axe variable wght quand il est disponible.
  • Réduire légèrement la graisse en mode sombre ; préférer un axe GRAD quand la famille en offre un, puisque le grade ne provoque aucun recalcul du texte.
  • Adoucir les associations blanc pur sur noir en mode sombre pour limiter la halation.
  • Traiter les graisses en dessous d'environ 300 comme réservées au titrage, et les vérifier sur des écrans à densité standard ; ne jamais les utiliser pour du texte continu.
  • Éviter les graisses grasses à noires aux tailles de labeur ; utiliser le gras comme un cran d'emphase délibéré de 200–300 unités au-dessus de la graisse du texte courant.
  • Ne pas laisser un rapport de contraste WCAG conforme excuser des traits fins — la graisse fait partie du contraste effectif, comme le rendent explicite les travaux APCA derrière le projet de WCAG 3.0.

Pour aller plus loin