Hiérarchie typographique : équilibrer titre et corps

Une bonne hiérarchie typographique guide l'œil du lecteur sur la page sans effort : d'abord le titre, puis le sous-titre, et enfin le corps du texte. Ce qui établit cet ordre n'est que rarement la couleur ou l'ornement ; le plus souvent, tout repose sur des différences de taille et de graisse. Dans cet article, je détaille comment équilibrer titre et corps, quels rapports privilégier et comment écrire tout cela en CSS de façon maintenable.

Pourquoi la hiérarchie repose sur la taille et la graisse

Quand vous ouvrez un texte, votre œil saisit d'abord l'élément le plus grand et le plus foncé. Le cerveau le marque comme « important » et commence à lire à partir de là. La hiérarchie est donc en réalité une carte de priorité : en tant que designer, vous dites au lecteur « regarde ici, puis là ». Vous le faites avec trois outils fondamentaux :

• Taille (font-size) : le plus grand se lit en premier. C'est le signal le plus fort et le plus rapide à percevoir.
• Graisse (font-weight) : à taille égale, le texte gras passe au premier plan. C'est ainsi qu'on ajoute de l'emphase sans changer la taille.
• Espace (whitespace) : l'espace au-dessus d'un titre le sépare du bloc précédent et signale « nouvelle section ».

La couleur et l'italique aident aussi, mais la taille et la graisse portent la charpente. Une bonne hiérarchie continue de fonctionner même imprimée en niveaux de gris.

Choisir une échelle : utilisez un rapport typographique

Plutôt que de choisir les tailles de titre au hasard, utilisez une échelle modulaire. Vous fixez une taille de base (généralement 16px / 1rem pour le corps) et multipliez chaque niveau supérieur par un rapport constant. Rapports courants : 1,2 (tierce mineure), 1,25 (tierce majeure) et 1,333 (quarte juste). Les grands rapports paraissent plus spectaculaires, les petits plus calmes.

:root {
  --text-base: 1rem;     /* corps 16px */
  --ratio: 1.25;
  --text-sm:  calc(var(--text-base) / var(--ratio));
  --text-lg:  calc(var(--text-base) * var(--ratio));
  --text-xl:  calc(var(--text-lg)  * var(--ratio));
  --text-2xl: calc(var(--text-xl)  * var(--ratio));
}

h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
p  { font-size: var(--text-base); }

L'avantage est la cohérence : comme toutes les tailles sont liées mathématiquement, la page paraît « accordée ». Vous pouvez changer le rapport à un seul endroit et remettre toute la hiérarchie à l'échelle d'un coup.

Typographie fluide : s'adapter à l'écran

Sur mobile, un titre de 48px peut engloutir l'écran, alors que sur ordinateur le même titre peut sembler petit. Plutôt que d'empiler des media queries fixes, construire une échelle fluide avec clamp() est bien plus propre :

h1 {
  /* min, préféré (selon le viewport), max */
  font-size: clamp(2rem, 5vw + 1rem, 3.5rem);
  line-height: 1.1;
}

clamp() maintient le titre à 2rem sur petit écran, ne le laisse jamais dépasser 3,5rem sur grand écran, et interpole en douceur selon la largeur du viewport. Pour le corps de texte, une échelle fluide est généralement inutile ; une base fixe de 16–18px est la plage de lecture la plus confortable sur la plupart des appareils.

Garder le corps de texte lisible

Si la moitié de la hiérarchie tient aux titres, l'autre moitié tient au corps. Aussi frappant soit le titre, un corps de texte qui n'est pas lu fait s'effondrer le design. Quelques règles solides :

• Longueur de ligne : 50 à 75 caractères par ligne est la plage la plus confortable. En CSS, on la limite concrètement avec max-width: 65ch;.
• Interligne : line-height: 1.5–1.6 est idéal pour le corps. Les titres peuvent être plus serrés (1,1–1,25), car un interligne large paraît dispersé aux grandes tailles.
• Contraste : composer le corps en gris très foncé (par ex. #1a1a1a) plutôt qu'en noir pur réduit la fatigue oculaire, mais respectez le seuil de contraste WCAG (au moins 4,5:1).
• Cohérence du rythme : liez l'espacement entre paragraphes à l'interligne ; des valeurs de margin arbitraires brisent le rythme vertical.

Graisse et contraste : trouver l'équilibre

La taille n'est pas la seule à porter l'équilibre entre titre et corps ; la graisse compte tout autant. Une erreur classique consiste à associer un titre à la fois grand et très gras (par ex. 800) à un corps très fin (300) — ce contraste paraît déséquilibré et « criard ». Une recette plus sûre :

• Utilisez 400 (regular) pour le corps ; 300 paraît trop pâle dans un texte long.
• 600–700 suffit comme emphase pour les titres ; la différence de taille attire déjà l'attention.
• Servez-vous de <strong> et <em> pour l'emphase ; tout mettre en gras ne met rien en valeur.

Si vous mélangez deux polices (par ex. serif pour les titres, sans-serif pour le corps), limitez-vous à deux et veillez à ce que leurs hauteurs d'x soient compatibles. Dans la plupart des cas, les différentes graisses d'une seule famille donnent le résultat le plus net.

Tester la hiérarchie

Vous pouvez valider la hiérarchie d'un design avec deux tests rapides. D'abord, le test du plissement : plissez les yeux devant l'écran ; à mesure que le texte se brouille, seuls les éléments grands/foncés doivent rester distincts, et l'ordre de lecture doit garder du sens. Ensuite, le test en niveaux de gris : coupez la couleur ; si la hiérarchie fonctionne encore par la seule taille et graisse, elle est solide. Pour l'accessibilité, utilisez les niveaux de titre (h1 → h2 → h3) selon l'ordre sémantique, pas la taille visuelle ; les lecteurs d'écran parcourent cette structure.

Questions fréquentes

Combien de tailles différentes utiliser sur une page ?

En général, 4 à 6 suffisent : un titre principal, deux ou trois niveaux de sous-titres, le corps et un texte petit/auxiliaire. Au-delà, on brouille la hiérarchie au lieu de la clarifier ; chaque niveau supplémentaire demande une décision de plus au lecteur.

Faut-il utiliser px ou rem ?

Préférez rem pour les tailles de police : cela respecte la préférence de taille de police du navigateur de l'utilisateur et améliore l'accessibilité. Vous pouvez réserver px aux petits détails qui doivent vraiment rester fixes, comme une bordure.

Est-ce un problème d'utiliser la même police pour le titre et le corps ?

Non — c'est même souvent le choix le plus sûr. On peut bâtir une hiérarchie forte avec différentes tailles et graisses d'une seule famille. Mélanger deux polices demande du métier, et un mauvais appariement fait amateur.

La hiérarchie typographique est la couche la plus discrète mais la plus décisive du design. Si vous voulez que taille, graisse et espace fonctionnent ensemble comme un système pour votre marque, contactez-moi — construisons ensemble un système typographique lisible, équilibré et évolutif.