Interligne : la méthode de la grille de ligne de base

Il y a un moment familier en front-end : deux cartes côte à côte, construites à partir du même composant, et un bloc de texte se termine quelques pixels plus bas que son voisin. Rien d’anormal dans l’inspecteur. Vous ajustez une marge, la paire s’aligne, et le décalage réapparaît deux écrans plus loin dans un autre appariement. La cause n’est généralement pas un style égaré mais de l’arithmétique : des interlignes choisis comme des multiplicateurs sans relation entre eux — 1,4 ici, 1,5 là, 1,3 sur les titres — produisent des hauteurs de bloc qui ne partagent aucun diviseur commun, si bien que les blocs ne s’alignent que par coïncidence.

La méthode de la grille de ligne de base remplace les suppositions d’interligne élément par élément par une seule règle : dérivez une unité de ligne de base égale à la moitié de votre taille de police de base — 8px sur une base de 16px — et choisissez chaque interligne comme un multiple entier ou demi de cette unité. Le corps de texte devient 16px sur une ligne de 24px (3 unités), un titre de 32px repose sur une ligne de 40px (5 unités), une légende obtient une ligne de 20px (2,5 unités). La hauteur de chaque bloc de texte est alors un multiple de la même unité, si bien que les distances verticales s’additionnent au lieu d’accumuler des erreurs.

Cet article fait partie de notre guide de l’échelle typographique. Une échelle modulaire répond à la question de savoir quelles tailles existent ; l’unité de ligne de base répond à la question de savoir sur quelles lignes elles reposent.

Pourquoi les interlignes définis élément par élément ne s’additionnent-ils pas ?

Les multiplicateurs sans unité, c’est du bon CSS — line-height: 1.5 s’hérite de façon plus sûre que des pourcentages ou des valeurs fixes. Le problème n’est pas la syntaxe mais la manière dont les valeurs sont choisies. Multipliez un ensemble de choix individuellement raisonnables et des quasi-coïncidences apparaissent partout :

• corps 16px × 1,5 → 24px
• accroche 21px × 1,5 → 31,5px
• titre 28px × 1,3 → 36,4px
• légende 14px × 1,4 → 19,6px

Chaque valeur se défend prise isolément. Ensemble, elles ne partagent aucun diviseur commun, si bien que deux piles construites à partir d’elles s’écartent l’une de l’autre de fractions de ligne — ce qui est exactement l’effet du décalage de quelques pixels. Les valeurs fractionnaires aggravent les choses : 31,5px est arrondi différemment selon les niveaux de zoom et les rapports de pixels de l’appareil, si bien que la dérive n’est même pas stable.

Sur une ligne de base de 8px, les mêmes choix deviennent 24px (3 unités), 32px (4 unités), 36px (4,5 unités) et 20px (2,5 unités). Vous pouvez toujours écrire les résultats sous forme de nombres sans unité en CSS (24 ÷ 16 = 1,5) ; ce qui change, c’est que chaque valeur a été choisie sur la grille plutôt que devinée élément par élément.

Comment fonctionne la méthode de la grille de ligne de base ?

Deux décisions remplacent toutes les suppositions. D’abord, l’unité : la moitié de la taille de police de base, donc une base de 16px donne une unité de 8px. La moitié de la base plutôt que la base elle-même, parce qu’une grille alignée sur la base entière est trop grossière — autour d’un titre de 38px, une grille de 16px n’offre qu’une ligne de 32px ou de 48px, tandis qu’une grille de 8px offre 40px et 48px. Les demi-multiples (pas de 4px) restent disponibles là où le petit texte a besoin d’un contrôle plus fin. Ensuite, la règle : chaque interligne est un multiple entier ou demi de l’unité — jamais une valeur libre.

Scale Composer dérive cela automatiquement : l’unité de ligne de base est base ÷ 2, et chaque interligne de l’échelle s’aligne sur un multiple de celle-ci. Passez la base à 18px et l’unité devient 9px ; chaque interligne se réaligne sur la nouvelle grille.

Voyez-le sur une véritable échelle : ouvrez la vue de ligne de base dans le Scale Composer — une échelle en quarte juste sur une base de 16px, chaque taille associée à un interligne qui est un multiple de l’unité de 8px. Faites glisser le ratio et regardez les interlignes se réaligner sur la grille au lieu de dériver vers des valeurs fractionnaires.

Le texte plus grand doit-il avoir un interligne plus serré ?

Oui — et le texte plus petit, plus lâche. Un multiplicateur unique pour toute la page aplatit une courbe dont la lecture a réellement besoin. Voici la gamme complète sur une base de 16px, quarte juste, avec des interlignes choisis comme multiples de la ligne de base :

Le multiplicateur effectif passe de 1,67 à 1,18 à mesure que la taille grandit. Le pourquoi est perceptuel. Le corps de texte se lit ligne après ligne : l’œil parcourt la ligne jusqu’à son extrémité et doit trouver le début de la suivante, et ce trajet de retour a besoin d’air — d’autant plus d’air que les lignes sont longues. Un titre, c’est différent : ce sont une ou deux lignes lues comme une seule forme, et à l’espacement du corps de texte, cela se désagrège — un h1 de 51px à 1,5 reposerait sur des lignes de 76px, et l’écart entre elles se lit comme un trou. Le petit texte inverse à nouveau la logique : à 12px, les formes des lettres sont déjà serrées, si bien qu’un interligne serré fait s’agglutiner les légendes denses ; elles ont besoin de proportionnellement plus d’air, pas moins.

La grille exprime cette courbe naturellement, parce que vous choisissez des unités par taille au lieu d’un seul multiplicateur pour tout.

Quel est le plancher d’accessibilité pour l’interligne ?

Le critère d’espacement du texte des WCAG (1.4.12) exige qu’une page ne perde aucun contenu ni aucune fonctionnalité lorsqu’un lecteur redéfinit l’interligne à 1,5 fois la taille de la police, parmi d’autres redéfinitions d’espacement. Deux conséquences en découlent pour la grille. D’abord, le corps de texte à 3 unités — 24px sur 16px, un effectif de 1,5 — se situe déjà au niveau que teste le critère, ce qui constitue en soi un plancher raisonnable pour une lecture confortable du corps de texte. Ensuite, le critère porte sur la capacité à survivre aux redéfinitions de l’utilisateur, non sur les valeurs définies par l’auteur : des titres plus serrés que 1,5 conviennent, mais des conteneurs de texte à hauteur fixe qui tronquent le contenu quand l’espacement augmente, non. Une grille de ligne de base discipline vos valeurs ; elle ne dispense pas la mise en page d’être testée avec un espacement augmenté.

Placez vos interlignes sur la grille

Partez de la taille de votre corps de texte, divisez-la par deux, et lisez le reste sur la grille au lieu de le deviner. Pour sentir comment le système suit la base, ouvrez une variation calibrée pour la lecture dans Scale Composer — une base de 18px, donc l’unité devient 9px et le corps de texte se pose sur une ligne de 27px, 3 unités d’un rythme légèrement plus grand. Ensuite, ramenez la base à celle de votre propre produit et prenez les interlignes que la grille offre : les débats élément par élément disparaissent, et le pixel qui était toujours de travers aussi.