Styles display, titre et corps : les différences expliquées

Prenez une phrase — Livrez des interfaces dignes de confiance — et composez-la de trois façons. À 51px, graisse 700, interlettrage −0,02em, interligne 1,1, c’est une déclaration : vous la lisez avant même d’avoir décidé de le faire. À 28px, graisse 600, interligne 1,3, c’est un panneau indicateur : vous l’enregistrez en faisant défiler, en décidant s’il faut vous arrêter. À 16px, graisse 400, interligne 1,5, elle se pose dans un paragraphe et attend son tour. Les mêmes mots, trois missions différentes.

Ces trois missions définissent les trois familles de rôles de texte dans un système typographique : les styles display vendent (déclarations héros, lues d’un seul coup d’œil), les styles de titre orientent (repérage, lus en balayant la page), et les styles de corps portent (lecture soutenue, sur plusieurs lignes). Chaque famille reçoit son propre traitement — pas seulement des versions plus grandes ou plus petites d’un même style — parce que chacune est optimisée pour un acte de lecture différent. Cet article parcourt les trois missions, les réglages qui en découlent, et pourquoi un style display n’est pas simplement un h1 plus grand. Il fait partie de notre guide des échelles typographiques.

À quoi sert un style display ?

Vendre — au sens large : faire mouche avec une déclaration avant que le lecteur ne se soit engagé à lire quoi que ce soit. Un titre héros, un chiffre sur une page de tarifs, un message d’excuse sur une page 404. Le texte display se lit d’un seul coup d’œil, généralement une seule fois, et presque jamais en quantité — un écran porte une déclaration display, rarement deux.

Les réglages découlent de la mission. Les tailles sont les plus grandes de l’échelle (à partir de 44px ; 51px dans l’exemple travaillé ci-dessous). L’interligne descend autour de 1,1, car une déclaration display sur deux lignes avec un interligne de style corps se désagrège en deux déclarations distinctes — d’un coup d’œil, les lignes doivent se lire comme une seule forme. L’interlettrage se resserre à environ −0,02em, car l’espacement intégré d’une police paraît lâche lorsqu’elle est agrandie bien au-delà des tailles de lecture. La graisse est généralement de 700 ou plus : à ces tailles, il y a assez de pixels pour que les traits épais gardent leurs contreformes ouvertes, et la densité donne à la déclaration son autorité.

Que font les styles de titre que le display ne fait pas ?

Les titres orientent. Ils existent pour qu’un lecteur qui parcourt une page puisse en reconstituer la structure sans la lire — dans quelle section suis-je, qu’est-ce qui vient ensuite, où se trouve la partie dont j’ai besoin. Cela signifie que les titres se lisent par comparaison : un h2 compte surtout parce qu’il est visiblement plus grand qu’un h3 et visiblement plus petit que le h1, si bien que les tailles de titre forment une série hiérarchisée (21, 28, 38px sur l’échelle travaillée) plutôt qu’une seule taille.

Parce qu’un titre peut être assez long pour passer à la ligne, son interligne reste confortable à la lecture — autour de 1,3 — et son interlettrage ne se resserre que légèrement (de 0 à −0,015em à mesure que les tailles augmentent). Les graisses se situent entre 600 et 700 : assez sombres pour se classer au-dessus du corps d’un coup d’œil, assez sobres pour que six titres sur une page ne se couvrent pas mutuellement. Un titre est un panneau indicateur, et un panneau indicateur qui exige d’être admiré échoue dans sa mission.

Qu’est-ce qui rend le texte de corps différent ?

Le corps porte la lecture proprement dite — de nombreuses lignes, une attention soutenue, l’œil qui revient à gauche quelques centaines de fois par page. Tout, dans un style de corps, sert ce retour à la ligne. La taille se situe dans la plage pour laquelle les polices ont été conçues (14–18px ; 16px est la valeur par défaut courante). L’interligne s’ouvre autour de 1,5, car le canal vide entre les lignes est ce qui permet à l’œil de trouver le début de la suivante sans trébucher. La graisse reste à 400 — l’épaisseur de trait à laquelle la police a été dessinée pour être lue — et l’interlettrage reste à zéro, car les polices sont déjà espacées pour cette plage de tailles.

C’est aussi la famille où la sobriété rapporte le plus : le texte de corps représente la majorité des mots sur presque chaque écran, si bien que la moindre bizarrerie du style est une bizarrerie que le lecteur doit supporter des paragraphes durant.

Comment les trois familles se comparent-elles ?

* Les plages sont typiques du travail d’interface ; les valeurs entre parenthèses proviennent d’une échelle modulaire de base 16px au ratio 1,333 avec deux crans par intervalle. Sur cette échelle, avec les interlignes alignés sur la grille de ligne de base de 8px (la moitié de la base) : display 51/56, heading-lg 38/48, heading-md 28/36, body 16/24, caption 12/16.

Lisez le tableau par colonnes et le motif apparaît : en descendant du display vers la légende, l’interligne augmente tandis que la taille diminue, et l’interlettrage bascule du négatif au positif. Les trois familles ne sont pas des tailles d’un même style — ce sont trois styles qui se trouvent partager une même police.

Voyez les trois familles dans un seul système : ouvrez ce jeu de rôles dans Scale Composer — le display, la série de titres, les tailles de corps et la légende côte à côte, chacun avec l’interligne, la graisse et l’interlettrage que sa mission réclame. Comparez directement l’interligne 1,1 du niveau display à celui de 1,5 du corps.

Pourquoi le display n’est-il pas simplement un h1 plus grand ?

Parce que la mission du h1 reste la navigation — c’est le sommet de la série de repérage, qui obéit aux conventions de la série : interligne de titre, logique de graisse de titre, une taille qui se classe par rapport au h2. Le display se situe au-dessus de cette série et enfreint ses conventions à dessein : interligne plus serré, interlettrage plus serré, souvent une graisse plus forte — des réglages qui seraient faux n’importe où dans la série de titres elle-même.

La distinction fait ses preuves en pratique. Étirez la série de titres pour couvrir un héros de 51px et, soit vous donnez au héros un interligne de style titre (il se désagrège sur deux lignes), soit vous déformez discrètement le style du h1 jusqu’à ce qu’il ne corresponde plus à ses frères. Garder display comme un rôle à part entière permet aux deux d’être justes — et notez que le display est un style, pas un élément : un héros marketing stylé en display est généralement toujours balisé en h1, parce que le rôle visuel et la structure du document sont des décisions distinctes. Les systèmes typographiques des plateformes tracent la même ligne — les Human Interface Guidelines d’Apple définissent un rôle Large Title au-dessus de la série des titres, avec des rôles body, footnote et caption en dessous, reflétant les mêmes trois familles.

Où se placent les légendes et les surtitres ?

Ce sont les frères discrets du corps — plus petits que la taille de lecture, utilisés pour les métadonnées, les horodatages, les étiquettes de tableau et les crédits d’image. Une légende est un petit texte en minuscules : elle garde la graisse du corps, gagne un soupçon d’interlettrage (+0,02em) pour rester ouverte à 12px, et descend souvent d’un cran en couleur plutôt qu’en graisse. Un surtitre est la variante en capitales — la petite étiquette au-dessus d’un titre de carte — et les capitales à petites tailles ont besoin d’air : +0,08em et une graisse de 500 pour que leurs traits survivent à la taille. Ni l’un ni l’autre n’appartiennent à la série de titres ; ils se classent en dessous du corps, pas au-dessus.

Construisez le jeu minimal

La plupart des produits ont besoin de moins de styles qu’ils ne le pensent : ouvrez un jeu de rôles minimal — un display, deux titres, un corps, une légende — et testez-le sur votre écran le plus complexe. N’ajoutez un style que lorsque deux rôles existants entrent vraiment en collision, et laissez chaque ajout hériter de la logique de sa famille : interlignes de titre pour les titres, interlignes de lecture pour le corps. Les trois missions — vendre, orienter, porter — constituent la liste de contrôle ; si un style proposé ne correspond à aucune d’elles, c’est probablement une variante d’un style que vous avez déjà.