La hiérarchie typographique est ce qui permet au lecteur de scanner une page en 3 secondes et de comprendre ce qui est important, ce qui est secondaire et par où commencer. Sans hiérarchie, une page est un mur de texte indifférencié. Avec une hiérarchie claire, chaque élément a un rôle visible.
Les 4 leviers de la hiérarchie
1. La taille
Le levier le plus évident et le plus puissant. Un titre en 32px domine un corps en 16px sans effort. La règle : chaque niveau de hiérarchie doit être visuellement distinct du niveau suivant. Si la différence entre H2 et H3 n'est pas visible au premier coup d'œil, elle n'existe pas.
Un ratio fiable : chaque niveau est environ 1.25 à 1.5 fois plus grand que le suivant. Si ton corps est en 16px, ton H3 peut être en 20px, ton H2 en 25px et ton H1 en 32px. Ce ratio crée une progression naturelle.
2. La graisse
Bold, SemiBold, Regular, Light — la graisse crée du contraste sans changer la taille. Un titre en SemiBold sur un corps en Regular suffit à les distinguer. Combiner taille et graisse amplifie l'effet : un H1 en 32px Bold se détache nettement d'un H2 en 24px Medium.
Attention à ne pas utiliser plus de 3 graisses différentes sur une même page. Regular + SemiBold + Bold couvrent tous les besoins. Au-delà, la hiérarchie devient floue au lieu de se clarifier.
3. L'espace
L'espace autour d'un élément signale son importance. Un titre avec une grande marge au-dessus attire l'œil. Un paragraphe serré contre le précédent est perçu comme une continuation. L'espace est le levier le plus sous-estimé — et souvent le plus efficace.
Règle pratique : l'espace au-dessus d'un titre doit être plus grand que l'espace en dessous. Le titre est visuellement rattaché au contenu qui le suit, pas au contenu qui le précède.
4. Le contraste de style
Sérif vs sans-sérif, romain vs italique, majuscule vs minuscule, couleur vs gris. Chaque changement de style crée une rupture visuelle qui peut servir la hiérarchie. Un sous-titre en petites capitales espace crée un niveau intermédiaire sans augmenter la taille.
H1 : 32px · Bold · Sérif · Marge haute 48px
H2 : 24px · SemiBold · Sans-sérif · Marge haute 40px
H3 : 20px · SemiBold · Sans-sérif · Marge haute 32px
Corps : 16px · Regular · Sans-sérif · Interligne 1.6
Légende : 14px · Regular · Gris 60% · Interligne 1.5
Label : 12px · SemiBold · Majuscules espacées
Construire sa hiérarchie en 3 étapes
Étape 1 — Identifier les niveaux
Combien de niveaux de lecture a ta page ? En général : titre principal (H1), titre de section (H2), sous-titre (H3), corps de texte, légendes/notes. 5 niveaux couvrent 95 % des besoins. Au-delà, simplifie ta structure de contenu avant de chercher une solution typographique.
Étape 2 — Définir le corps d'abord
Commence par la taille du corps de texte — c'est la fondation. Pour le web : 16-18px. Pour le print : 10-12pt. Tout le reste se construit par rapport à cette base, vers le haut (titres) et vers le bas (légendes).
Étape 3 — Tester le « scan »
Remplis ta maquette avec du vrai contenu (pas du Lorem ipsum). Recule de ton écran ou plisse les yeux. Tu dois pouvoir identifier les titres, les sous-titres et le corps sans lire un seul mot. Si deux niveaux se confondent, augmente le contraste entre eux.
La hiérarchie typographique n'est pas une question de beauté. C'est une question de fonction. Si le lecteur doit réfléchir pour comprendre la structure de ta page, la hiérarchie a échoué.
Erreurs fréquentes
Trop de niveaux. Si ta page a 7 niveaux de titres différents, le lecteur ne les distingue plus. Simplifie le contenu, pas la typo.
Des différences trop subtiles. Un H2 en 22px et un H3 en 20px sont indiscernables. Il faut au minimum 4px de différence entre deux niveaux consécutifs sur le web.
Utiliser la couleur seule. Un titre en bleu et un texte en noir ne suffisent pas à créer une hiérarchie — surtout en N&B ou pour les lecteurs daltoniens. La couleur complète la hiérarchie, elle ne la remplace pas.