Tailles de titres : construire une hiérarchie h1–h6

Les tailles de titres fonctionnent mieux dérivées que choisies : faites correspondre les niveaux de titres aux paliers d’une échelle typographique modulaire — le texte courant à la base, chaque titre un nombre fixe de paliers plus haut — au lieu de choisir six valeurs indépendantes. Sur une base de 16px avec une quarte juste (ratio 1,333), on obtient h4 à 21px, h3 à 28px, h2 à 38px, h1 à 51px, et les légendes à 12px sous la base. Deux remarques honnêtes ont leur place dans la réponse : la plupart des pages n’utilisent jamais h5 ni h6, et les niveaux de titres HTML relèvent de la structure du document tandis que la taille relève de la présentation — liés, mais séparables.

Cet article fait partie de notre guide de l’échelle typographique. Il détaille la correspondance avec de vrais chiffres, ce qu’il faut faire des niveaux inférieurs, pourquoi la sémantique et la taille doivent rester distinctes, et à quel point les écarts de taille doivent être marqués.

Comment faire correspondre h1–h6 à une échelle typographique ?

Une échelle modulaire génère les tailles selon base × ratio^(i/notes). Avec deux notes par intervalle, des demi-paliers apparaissent entre les sauts de ratio entiers — 18px, 25px, 33px, 44px sur cette échelle — et la correspondance de titres la plus nette les ignore : attribuez aux titres les paliers entiers, et réservez les demi-paliers aux chapôs, aux grandes étiquettes d’interface et aux autres rôles intermédiaires.

Chaque niveau de titre se rapporte désormais au suivant par la même proportion — une quarte juste entière. C’est cette cohérence que le lecteur perçoit réellement. Personne ne mesure les valeurs en pixels sur une page, mais nous savons bien percevoir les proportions, et quand chaque saut de la hiérarchie suit le même ratio, les niveaux se lisent — pour emprunter une analogie à la parole — comme une seule voix à différents volumes plutôt que comme six voix distinctes. Une hiérarchie bâtie sur six tailles sans lien peut être techniquement ordonnée et sembler malgré tout arbitraire ; une hiérarchie bâtie sur un seul ratio semble voulue.

Ouvrez la correspondance complète dans Scale Composer — quarte juste, base de 16px, deux notes, avec les niveaux de titres posés sur les paliers entiers. Faites glisser le ratio et toute la hiérarchie se redérive ; aucun niveau n’a besoin d’être redécidé.

À quoi devraient ressembler h5 et h6 ?

Honnêtement : sur la plupart des sites, à rien — parce qu’ils ne s’affichent jamais. Un contenu qui a réellement besoin de six niveaux d’imbrication est rare en dehors des spécifications, des documents juridiques et des références d’API poussées, et la plupart des pages s’arrêtent à h3 ou h4. Consacrer deux paliers d’échelle à des niveaux qui apparaissent une fois par an comprime ceux qui apparaissent sur chaque page.

La convention courante et sensée : arrêter l’échelonnement à h4 et différencier les niveaux inférieurs par le traitement — h5 à la taille du texte courant avec une graisse plus marquée, h6 à la taille d’une légende, souvent en capitales avec de l’interlettrage. La taille n’est qu’un canal de hiérarchie parmi d’autres ; la graisse, la casse et l’espacement portent les deux derniers niveaux sans rien coûter à l’échelle. Si votre contenu descend vraiment sur six niveaux, c’est le signe qu’il faut choisir un ratio plus plat pour que le haut de la hiérarchie reste sur la page.

Les tailles de titres doivent-elles correspondre aux niveaux de titres ?

Non — et les traiter comme une même chose cause de réels dommages d’accessibilité. Les niveaux de titres constituent le plan du document : les personnes qui utilisent un lecteur d’écran naviguent en sautant de titre en titre et comptent sur la hiérarchie des niveaux — un h3 sous un h2 sous un h1, sans saut — pour comprendre l’organisation de la page. Le tutoriel du W3C sur la structure des pages explique comment ce plan doit se comporter. La taille n’y joue aucun rôle : les technologies d’assistance lisent le niveau, pas les pixels affichés.

Deux règles en découlent. Choisissez la balise pour le plan — ne prenez jamais un h4 parce que vous en voulez la taille, et ne sautez jamais de h1 à h3 parce que h2 « paraît trop gros ici ». Puis mettez en forme librement : un h2 dans une barre latérale affiché à la taille d’un h3 est légitime — le plan reste fidèle tandis que le poids visuel s’adapte à son contexte. L’échelle rend cela facile à mettre en œuvre proprement, car les tailles sont des paliers nommés plutôt que des propriétés des balises : n’importe quel niveau peut pointer vers n’importe quel palier sans toucher à la structure du document.

Pourquoi le même h2 finit-il avec des tailles différentes sur un site ?

Parce que les tailles sont choisies page par page. La page de destination reçoit un h2 de 40px, le gabarit de blog un de 32px, la page tarifs un de 36px — chacun raisonnable localement, chacun choisi par une personne différente ou à un mois différent. Les visiteurs lisent d’une page à l’autre, et cette dérive se ressent comme un vague manque de soin que personne ne sait nommer.

La solution, c’est le nommage, pas la discipline. Dérivez les tailles de titres de l’échelle une seule fois, puis exportez-les sous forme de tokens — Scale Composer écrit des tokens DTCG, des propriétés personnalisées CSS, des valeurs Tailwind v4 @theme ou des Figma Variables — de sorte que « la taille de h2 » se résolve en une seule valeur partout où le design et le code la consultent. Le choix page par page n’a alors plus rien à décider : une nouvelle page hérite de la hiérarchie au lieu de la réinventer, et le h2 cesse d’être une opinion propre à chaque page.

À quel point la hiérarchie des titres doit-elle être marquée ?

Le ratio fixe le registre. Une quarte juste (1,333) est une valeur sûre pour les pages de contenu et de marketing : des sauts nets, un h1 avec une vraie présence. Une interface produit dense demande généralement plus plat — autour de 1,2, la même correspondance place le h1 près de 33px au lieu de 51px, et la hiérarchie s’appuie davantage sur la graisse et l’espacement que sur la taille. Les pages éditoriales et de destination peuvent aller plus marqué (1,5 et au-delà) quand les titres sont courts et destinés à dominer. Le compromis, c’est la capacité : plus le ratio est marqué, moins il y a de paliers entiers entre le texte courant et la plus grande taille qu’une mise en page peut contenir ; les échelles marquées conviennent donc aux plans peu profonds et les échelles plates aux plans profonds.

Comparer une hiérarchie plate et une hiérarchie marquée

Le registre est plus facile à ressentir qu’à raisonner : ouvrez la même correspondance de titres sur un ratio plat de 1,2 et comparez-la avec la quarte juste — mêmes niveaux, mêmes paliers, h1 à environ 33px au lieu de 51px. Basculez de l’une à l’autre et décidez laquelle parle avec la voix de votre produit ; puis exportez la gagnante sous forme de tokens pour que le h2 de chaque page signifie la même chose.