Cette page a été traduite avec l'aide d'une IA. L'original en anglais fait foi.
Une hiérarchie typographique dit au lecteur de quoi parle une page, comment elle est organisée et par où y entrer — avant même qu'une seule phrase soit lue. L'édition de 2005 recommandait de dimensionner les niveaux de hiérarchie selon un ratio constant entre 1,2 et 1,5, et avertissait qu'une taille de base mal choisie s'effondrerait sous la mise à l'échelle. Les deux points subsistent, mais chacun a acquis une seconde dimension que l'original ne pouvait pas traiter : les échelles sont désormais fluides plutôt que fixes, et la hiérarchie sur le web n'est plus seulement visuelle. Elle doit aussi être structurelle, car une part substantielle des lecteurs ne la voit jamais.
Ce qui a changé depuis 2005
La recommandation du ratio de 1,2–1,5 a mûri pour devenir la pratique aujourd'hui standard des échelles typographiques modulaires : chaque taille de la page dérivée en multipliant à répétition une taille de base par un même ratio. Les ratios courants ont reçu des noms empruntés aux intervalles musicaux — 1,2 (tierce mineure), 1,25 (tierce majeure), 1,333 (quarte juste), 1,5 (quinte juste) — et la plage d'origine reste exactement la bonne, avec un raffinement : le ratio doit convenir au médium. Les interfaces produit denses et la lecture au long cours s'accommodent bien de ratios doux (1,125–1,25), qui produisent suffisamment de tailles distinctes sans titres démesurés ; les pages éditoriales et marketing peuvent porter du 1,333 ou du 1,5. Un ratio qui engendre un h2 de 60 pixels dans une application dense en données est le mauvais ratio pour ce contexte.
Le changement technique le plus important est qu'une échelle n'a plus besoin d'être un jeu unique de nombres fixes. Le clamp() de CSS permet à chaque échelon de l'échelle d'être fluide : une taille définie avec un minimum, une valeur préférée relative au viewport et un maximum, de sorte que les titres évoluent en douceur entre téléphone et écran de bureau au lieu de sauter aux points de rupture. Une échelle fluide bien construite utilise en pratique un ratio plus petit sur les petits écrans et un plus grand sur les grands écrans — ce qui correspond à la manière dont les designers de l'imprimé ont toujours ajusté les caractères de titrage au format de la page. Une précaution d'accessibilité est essentielle : le terme médian relatif au viewport doit être mêlé à une composante fondée sur le rem (par exemple un calcul combinant rem et vw), jamais des unités de viewport pures. Un texte dimensionné uniquement en vw ignore la préférence de taille de police de l'utilisateur et ne répond pas au redimensionnement du texte par le navigateur, sapant les exigences de redimensionnement et de redistribution de WCAG. Chaque expression clamp() doit continuer d'honorer un utilisateur qui a réglé sa taille de base à 200 %.
Les avertissements de l'original sur le comportement à la mise à l'échelle — cadres tronqués, libellés de boutons disparus, ordre de lecture brisé à 150 % — ont été codifiés. WCAG exige que le texte se redimensionne à 200 % sans perte (1.4.4 Redimensionnement du texte) et que le contenu se redistribue à 320 pixels CSS (1.4.10). Le vieux conseil de « concevoir pour la mise à l'échelle » relève désormais tout simplement de la conformité.
La hiérarchie doit être structurelle, pas seulement visuelle
L'ajout le plus important de ce chapitre est invisible. Un utilisateur de lecteur d'écran ne perçoit pas qu'une ligne fait 32 pixels et qu'elle est en gras ; il perçoit qu'elle est — ou n'est pas — un élément de titre d'un niveau donné. Les utilisateurs de lecteurs d'écran naviguent couramment en affichant la liste des titres et en sautant de l'un à l'autre ; une page dont les « titres » ne sont que des paragraphes agrandis et engraissés ne leur offre aucune structure. C'est ce qu'exige le critère de succès 1.3.1 Information et relations (niveau A) de WCAG : l'information véhiculée par la présentation visuelle — y compris la hiérarchie — doit aussi être déterminable par programmation.
La discipline pratique a deux volets. Premièrement, chaque titre visuel doit être un véritable élément de titre (h1 à h6), et les niveaux de titre doivent refléter le plan du document : un seul h1 pour le sujet de la page, h2 pour les grandes sections, h3 pour leurs sous-sections, sans sauter de niveaux en descendant. Deuxièmement — et c'est là que les designers se trompent le plus souvent — le niveau sémantique et la taille visuelle doivent être découplés. Le bon niveau de titre est dicté par la structure du document ; la bonne taille est dictée par le design. Quand ils entrent en conflit (un h2 qui doit paraître modeste, un h4 qui mérite de la proéminence), conservez le niveau structurel et restylez-le avec une classe. Choisir la balise pour sa taille par défaut est la cause première de la plupart des plans brisés sur le web.
La hiérarchie au-delà de la taille
Le chapitre de 2005 traitait la hiérarchie comme un problème de dimensionnement. La pratique mûre répartit le travail sur quatre variables — taille, graisse, espace et couleur — et la taille est souvent la moins efficace d'entre elles. Un cran de plus en graisse (disons, de 400 à 600) ou une bande d'espace blanc au-dessus d'un titre peut signaler une nouvelle section aussi clairement qu'un saut de taille, sans consommer d'espace vertical ni encombrer les petits écrans. Cela compte pour l'accessibilité autant que pour l'économie : les hiérarchies qui reposent entièrement sur la taille tendent à s'effondrer aux viewports étroits, où les tailles de titrage doivent rétrécir, tandis que la différenciation par la graisse et l'espace survit à n'importe quel viewport. Les polices variables font de la graisse un axe continu, si bien que des graisses intermédiaires peuvent être réglées précisément sur le contraste dont un niveau a besoin. La couleur et les indices secondaires ne doivent jamais porter seuls la hiérarchie — ils doivent se superposer au balisage structurel et à au moins un autre signal visuel, et le texte des titres doit toujours satisfaire aux exigences de contraste.
Deux raffinements modernes plus modestes. Les titres sur plusieurs lignes bénéficient de text-wrap: balance, qui égalise les longueurs de ligne afin qu'un grand titre n'abandonne pas un mot seul sur sa dernière ligne — une petite déclaration CSS qui remplace des années de retouches manuelles des coupures. Et l'interlignage des titres doit être réglé serré (environ 1,1–1,25, conformément au chapitre précédent) à chaque niveau de l'échelle plutôt qu'hérité du texte courant.
La taille de base, comme l'original y insistait, reste primordiale : toute l'échelle se multiplie à partir d'elle. Le plancher moderne est la valeur par défaut du navigateur de 1rem (16px par défaut) pour le texte courant — définie en rem, jamais en pixels, afin que les préférences de l'utilisateur se propagent — la lecture au long cours étant souvent mieux servie à 1,125–1,25rem.
En CSS
:root {
/* a fluid modular scale, ratio ≈ 1.25, anchored in rem */
--step-0: 1rem;
--step-1: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
--step-2: clamp(1.55rem, 1.35rem + 1vw, 2.2rem);
--step-3: clamp(1.95rem, 1.55rem + 2vw, 3.2rem);
}
h1 { font-size: var(--step-3); text-wrap: balance; }
h2 { font-size: var(--step-2); text-wrap: balance; }
h3 { font-size: var(--step-1); }Recommandations
- Construire les tailles à partir d'une échelle modulaire avec un ratio d'environ 1,2–1,5, choisi selon la densité du contenu.
- Rendre l'échelle fluide avec clamp(), en mêlant toujours une composante rem à la valeur préférée afin que les réglages de taille de police de l'utilisateur soient honorés.
- Utiliser de véritables éléments de titre dans un plan logique — un seul h1, aucun niveau sauté — conformément à WCAG 1.3.1 ; ne jamais choisir une balise pour sa taille.
- Découpler la sémantique de l'apparence : styler les niveaux de titre avec des classes quand structure et design divergent.
- Exprimer la hiérarchie par la graisse et l'espace autant que par la taille ; éviter les hiérarchies qui dépendent de la seule taille ou de la seule couleur.
- Régler le texte courant à un minimum de 1rem en unités relatives, et vérifier que la hiérarchie survit au redimensionnement du texte à 200 % et à la redistribution à 320px.
- Appliquer text-wrap: balance et un interlignage resserré aux titres.