Hiérarchie typographique : comment en construire une qui se lit vraiment

La plupart des articles sur la hiérarchie typographique la décrivent au lieu de la construire. Ils disent que les titres doivent sembler importants et que le texte courant doit sembler calme. Inutile quand la demande est : « choisis cinq tailles, trois graisses et l'interlignage qui tient sur une page d'accueil, un article et un panneau de réglages ». Une description n'est pas un système. Le système, c'est ce qui part en production.

Cet article, c'est la construction. De vrais ratios, de vrais chiffres, l'ordre des décisions, et les schémas d'échec qui tuent la plupart des hiérarchies avant le lancement.

Ce qu'est vraiment la hiérarchie typographique

La hiérarchie typographique est le classement structurel de chaque élément de texte pour que l'œil sache quoi lire en premier, en deuxième et en troisième avant même d'avoir lu quoi que ce soit. C'est la couche typographique de la hiérarchie visuelle et la colonne vertébrale de tout système typographique qui fonctionne.

Une vraie hiérarchie répond par écrit à quatre questions. Combien de niveaux. Quelle taille pour chaque niveau. Quelle graisse pour chaque niveau. Quel espacement entre les niveaux et à l'intérieur de chacun. Si ces réponses n'existent pas sur une seule page de documentation, le système est improvisé, pas conçu.

Les cinq niveaux dont presque tout système a besoin

La plupart des systèmes efficaces se posent sur cinq niveaux : H1, H2, H3, corps et petit. Plus, c'est du bruit. Moins, ça aplatit la page.

Le piège est de traiter les boutons, les légendes et les libellés de formulaire comme des niveaux distincts. Ce sont du corps ou du petit avec un rôle différent. Le bouton, c'est du corps en graisse medium. La légende, c'est du petit en graisse regular. Le libellé, c'est du petit en graisse medium. Mêmes tailles, missions différentes.

Choisissez un ratio d'échelle et tenez-vous-y

La taille de chaque niveau vient d'un seul ratio appliqué à une base. Choisissez d'abord le ratio, puis dérivez chaque taille. La base est presque toujours 16px, la valeur par défaut du navigateur et la taille où le corps de texte se lit le mieux à l'écran. Trois ratios couvrent presque tous les projets.

Tierce majeure (1,25). Serrée et dense. Idéale pour les interfaces riches en données et les outils d'administration. Sur une base de 16px : 16, 20, 25, 31, 39, 49, 61. Visible mais jamais dramatique.

Quarte juste (1,333). La bête de somme. Assez forte pour l'éditorial, assez sobre pour le produit. Sur une base de 16px : 16, 21, 28, 37, 50, 67. Le choix par défaut de la plupart des sites marketing.

Nombre d'or (1,618). Éditorial, expressif, presque théâtral. Idéal pour les landing pages et les mises en page de magazine. Sur une base de 16px : 16, 26, 42, 68, 110. Le H1 écrase le corps de texte, et c'est le but.

Des outils comme type-scale.com génèrent le tableau pour n'importe quelle base et n'importe quel ratio en une seconde. Choisissez-en un, notez les chiffres, livrez. Changer en cours de projet, c'est un refactor qui touche chaque page.

La graisse est le deuxième axe, pas le premier

Les designers n'actionnent que la taille et s'étonnent que la page paraisse plate. La graisse porte la moitié du travail, surtout sur mobile où l'amplitude des tailles est limitée.

Un système qui fonctionne a besoin de trois graisses. Regular pour le corps, medium pour l'emphase et les libellés, bold ou semibold pour les titres. Une quatrième graisse relève d'un choix de marque, pas d'une exigence du système.

La règle qui corrige la plupart des pages plates : n'utilisez jamais la même graisse pour deux niveaux adjacents. Si le H2 est en bold, le H3 doit être en semibold ou medium. Deux niveaux voisins à graisse identique font s'effondrer la hiérarchie, quelle que soit la taille. Le piège inverse, c'est le tout-en-gras, qui supprime complètement la graisse comme levier.

L'interlignage, le levier silencieux de la hiérarchie

L'interlignage est l'espace vertical entre les lignes, de ligne de base à ligne de base. CSS l'appelle line-height. Le levier le plus sous-estimé de la hiérarchie typographique.

Un interlignage serré sur un titre paraît assuré et dense. Un interlignage aéré sur le corps paraît calme et lisible. À l'envers, la hiérarchie s'inverse. Un corps à 1,2 se lit comme un mur. Un titre de 64px à 1,6 se lit comme de la décoration.

Valeurs par défaut qui marchent. Titres (H1, H2) : 1,1 à 1,2. Sous-titres (H3) : 1,2 à 1,3. Corps : 1,5 à 1,7. Légendes : 1,4 à 1,5. Plus le texte est grand, moins il a besoin d'interlignage ; plus il est petit, plus il en réclame. Le texte long demande plus d'interlignage de corps que l'UI. Un tableau de bord à 1,4 paraît dense, et c'est correct.

L'approche est pour l'affichage, pas pour le corps

Le crénage est l'espace entre des paires de lettres précises, ajusté à l'échelle d'un logo ou d'un titre. L'approche (tracking) est l'espace entre toutes les lettres d'une ligne, réglé uniformément. Ce ne sont pas le même levier.

L'approche n'est un outil de hiérarchie qu'aux extrêmes. Une approche serrée sur un grand titre (-0,02em à -0,04em) lui donne un côté posé et tranché. Une approche aérée sur de petits libellés en capitales (+0,05em à +0,1em) donne au libellé un air intentionnel. Les deux signalent le rôle du texte.

La zone de danger, c'est le corps. Modifier l'approche du texte courant nuit à la lisibilité sans rien apporter à la hiérarchie. Laissez le corps à zéro. Le signe le plus rapide d'un designer qui ne comprend pas l'approche, c'est un titre de hero réglé à +0,1em parce que ça « fait éditorial ». Non. Ça fait décoration.

L'espacement entre les niveaux fait partie de la hiérarchie

L'espace vertical autour de chaque niveau le classe autant que la taille et la graisse. Un H2 avec 80px au-dessus et 24px en dessous se lit comme le début d'une nouvelle section. Le même H2 avec 24px au-dessus et en dessous se lit comme une simple pause entre paragraphes.

La règle : l'espace au-dessus doit valoir environ le double de l'espace en dessous. L'élément appartient au contenu qui le suit. Spécification de départ : au-dessus du H2 : 64 à 96px, en dessous du H2 : 16 à 24px. Au-dessus du H3 : 32 à 48px, en dessous du H3 : 8 à 16px. La discipline de l'espace blanc compte autant que le texte lui-même. Une échelle parfaite avec un espacement bâclé paraît plate.

L'ordre des décisions pour construire une hiérarchie de zéro

Sautez des étapes et la hiérarchie semble correcte isolément, mais s'effondre dans un vrai produit.

1. Choisissez la taille de base. 16px pour l'écran. 18px pour les sites très éditoriaux. Jamais moins de 16px pour le corps.
2. Choisissez le ratio d'échelle. Tierce majeure pour l'UI dense, quarte juste pour un usage général, nombre d'or pour l'éditorial.
3. Générez le tableau des tailles. Dérivez chaque niveau du ratio. Arrondissez au pixel entier. Notez-le.
4. Choisissez trois graisses. Regular, medium, bold ou semibold. Pas plus.
5. Réglez l'interlignage par niveau. Serré pour les titres, aéré pour le corps.
6. Réglez l'espacement par niveau. Ratio 2 pour 1 entre le dessus et le dessous sur chaque titre.
7. Ne réglez l'approche qu'aux extrêmes. Serrée sur l'affichage, aérée sur les petites capitales. Zéro sur le corps.
8. Validez sur trois vrais écrans. Un hero de page d'accueil, un article long, un panneau d'UI dense. Si ça tient sur les trois, livrez.

Le moyen le plus rapide de livrer une hiérarchie cassée, c'est de dériver les tailles de l'intuition plutôt que d'un ratio, puis de rafistoler l'interlignage et l'espacement page par page.

Où la plupart des hiérarchies échouent

Six schémas d'échec tuent plus de hiérarchies que tout le reste.

Tout est en gras. La graisse cesse d'être un levier et la page s'appuie sur la seule taille. Passez le H3 et tout titre tertiaire en medium ou semibold.

Il n'existe que deux niveaux. Un H1 et du corps sans rien entre les deux, c'est un document plat avec un titre en haut. Ajoutez un H2 tous les 150 à 300 mots.

Le sous-titre flottant. Un espace égal au-dessus et en dessous laisse le sous-titre n'appartenir à aucune section. Réduisez l'espace en dessous pour l'accrocher au texte qui suit.

Le H1 qui s'emballe. Un H1 de hero desktop réutilisé tel quel sur chaque page de contenu casse le rythme. Définissez un token de H1 desktop et un token de H1 pour les pages de contenu. Même nom, deux valeurs.

Corps de texte à 14px. En dessous de 16px, la lisibilité casse et les petits niveaux sont écrasés dans une plage de 2px. 16px minimum. Réservez 13 à 14px aux légendes et aux libellés.

Hiérarchie conçue uniquement sur desktop. Le mobile compresse chaque niveau et réduit la hiérarchie à une bouillie. Concevez mobile d'abord, puis agrandissez.

La hiérarchie dans les conditions de 2026

Les polices variables sont désormais le bon choix par défaut. Un seul fichier de 80 Ko fournit regular, medium, semibold et bold sur un seul axe. Deux polices variables couvrent tout le système. Le guide d'association de polices explique comment les choisir.

Les AI overviews lisent le balisage sémantique, pas le visuel. Une page avec un H1, puis une div stylée pour ressembler à un H2, puis un H3, est mal interprétée. La hiérarchie visuelle et le HTML sémantique doivent coïncider. Un seul H1 par page, aucun niveau sauté. L'analyse des principes de web design couvre le volet sémantique.

La checklist d'audit de hiérarchie

Gardez-la. Passez-la avant le lancement. Tout non se corrige avant de livrer.

Dix sur dix se lit tout seul sur tous les appareils. Sept sur dix donne un résultat dessiné avec intention. En dessous de sept, ça paraît plat quelle que soit la police.

FAQ

Quelle est la différence entre hiérarchie visuelle et hiérarchie typographique ?

La hiérarchie visuelle est le système plus large qui classe chaque élément par la taille, la graisse, la couleur, la position, l'espace, l'alignement et l'imagerie. La hiérarchie typographique est la couche propre au texte qui utilise la taille, la graisse, l'interlignage, l'approche et l'espacement pour classer le texte. La hiérarchie typographique est une des entrées de la hiérarchie visuelle.

Quel est le meilleur ratio pour une échelle typographique ?

La quarte juste (1,333) est le choix par défaut le plus sûr. Elle donne un contraste net sans devenir théâtrale. Utilisez la tierce majeure (1,25) pour l'UI dense et les outils d'administration. Utilisez le nombre d'or (1,618) pour l'éditorial et les landing pages où le hero doit dominer.

Comment corriger une hiérarchie qui paraît plate ?

Trois gestes, dans l'ordre. Augmentez d'abord le contraste de taille. H1 au moins 2x le H2, H2 au moins 1,5x le corps. Ajoutez ensuite du contraste de graisse. Deux niveaux adjacents ne partagent jamais la même graisse. Resserrez enfin le rythme d'espacement avec un ratio 2 pour 1 entre le dessus et le dessous de chaque titre. Si la page paraît toujours plate, c'est que la mise en page en fait trop et qu'il faut couper dans le périmètre avant de retoucher la typographie.

Construisez la hiérarchie, puis faites-lui confiance

Une hiérarchie qui fonctionne est le chemin le moins cher vers une page qui se lit toute seule. Le lecteur ne voit ni les niveaux, ni les ratios, ni les valeurs d'interlignage. Il voit une page qui a du sens. Les maths disparaissent dans la clarté.

Le piège est de traiter la hiérarchie comme une touche de finition. C'est la colonne vertébrale. Construisez-la d'abord, validez-la sur de vrais écrans, documentez-la en tokens, et laissez chaque autre décision se composer autour d'elle. Si vous voulez une équipe qui construit le système typographique, la hiérarchie et l'UI produit comme un seul projet plutôt que trois, engagez Brainy. Nous choisissons le ratio, écrivons les tokens et livrons le système sur un vrai produit.