Un visiteur ne lit pas une page web : il la survole. Les études de parcours oculaire le montrent depuis vingt ans — le regard suit un motif en F ou en Z, s'accroche aux contrastes, saute les blocs uniformes. Autrement dit, avant même qu'un mot soit lu, votre page a déjà raconté une histoire : celle de ce qui semble important. La hiérarchie visuelle est l'ensemble des décisions qui rendent cette histoire volontaire plutôt qu'accidentelle.
Les quatre leviers, dans l'ordre
On entend souvent que la hiérarchie est une affaire de taille de police. C'est vrai, mais c'est le levier le plus grossier — et le plus vite épuisé. Quand tout est agrandi, rien n'est grand. Les concepteurs expérimentés actionnent quatre leviers, et ils les actionnent dans cet ordre :
- La taille, d'abord, parce qu'elle fonctionne même de loin — mais à condition de respecter des sauts francs. Une échelle typographique qui passe de 20 à 24 pixels ne crée aucun niveau ; de 20 à 32, si.
- La graisse et la couleur, ensuite. Un intertitre en semi-gras sombre hiérarchise autant qu'un titre plus grand, sans gonfler la mise en page.
- L'espacement, le levier le plus sous-estimé. Le blanc est du sens : un titre respire parce que rien ne le touche. La proximité entre deux blocs dit « même famille » ; l'écart dit « autre sujet ».
- Le contraste de forme, enfin : une police à empattements dans une page sans empattements, un chiffre géant en italique, un filet de couleur. À doser au compte-gouttes.
Quand tout crie, personne n'entend rien. La hiérarchie commence par ce qu'on accepte de taire.
La méthode des trois questions
Avant d'ouvrir le moindre logiciel de mise en page, posez trois questions à votre contenu. Un : si le visiteur ne lit qu'une chose, laquelle ? C'est votre niveau 1, un seul par écran. Deux : qu'a-t-il besoin de voir pour décider de rester ? Ce sont vos niveaux 2 — accroches, visuels, points clés. Trois : qu'est-ce qui mérite d'exister mais pas d'attirer l'œil ? Métadonnées, mentions, liens de pied de page : niveau 3, gris, petit, discret par design.
Cette discipline évite la maladie chronique des pages web : l'égalitarisme. Par peur de dévaloriser un contenu, on valorise tout — boutons rouges à côté de titres bleus, badges dans tous les coins, encadrés qui concurrencent le texte. Le résultat est une page où l'œil ne trouve aucun point d'ancrage et rebondit.
Un test simple : le flou
Pour vérifier une hiérarchie, plissez les yeux jusqu'à ne plus lire. Reste une carte de gris et de masses : voyez où votre regard tombe. S'il tombe sur le bon élément — le titre, le bouton d'action, l'image-clé — la hiérarchie fonctionne. S'il se disperse entre quatre zones de même poids, revenez aux leviers. Les outils d'audit de contraste font la même chose avec des nombres, mais l'œil plissé reste l'instrument le plus rapide du métier.
Hiérarchie et accessibilité : le même combat
Ce qui guide l'œil guide aussi les technologies d'assistance — à une condition : que la hiérarchie visuelle s'appuie sur une hiérarchie structurelle. Un titre stylé en gros caractère mais balisé en simple paragraphe est invisible pour un lecteur d'écran ; un h2 explicite vaut mieux qu'un div en graisse 800. Les deux hiérarchies doivent coïncider : ce qui paraît important doit être important dans le code, et réciproquement. C'est bon pour vos lecteurs, et c'est bon pour les moteurs, qui lisent vos pages à peu près comme un lecteur d'écran : en structure d'abord.
La suite logique de ce carnet se trouve dans le n°57, consacré à la construction des palettes — car la couleur est le second langage de la hiérarchie — et dans le n°76 sur la typographie fluide, qui traite le même sujet dans l'axe du responsive. Pour voir ces principes appliqués à un cas complet, l'anatomie du site vitrine déroule une page réelle, niveau par niveau.