L’interligne dans les systèmes fluides

Quand la taille des polices glisse avec le viewport, l’interligne peut réagir de trois façons : des multiplicateurs sans unité qui s’adaptent à la taille courante quelle qu’elle soit, des multiples de la ligne de base exprimés en rem qui suivent le même clamp racine et verrouillent le rapport taille/interligne sur tout le glissement, ou des clamps par valeur qui laissent l’interligne suivre sa propre courbe. La plupart des systèmes fluides ont besoin de la réponse du milieu, quelques styles d’affichage méritent la troisième, et savoir distinguer l’une de l’autre empêche la typographie fluide de se défaire verticalement. C’est la pièce spécifique à l’interligne de notre guide de la typographie fluide ; ce que l’interligne doit être à chaque taille relève de l’échelle typographique — cet article traite de ce qu’il doit faire pendant que les tailles bougent.

Qu’arrive-t-il à l’interligne si vous ne faites rien ?

Ça dépend de l’unité, et cette différence est tout le sujet. Un interligne déclaré en px reste immobile pendant que son texte glisse — un titre qui passe de 28px à 31,5px à l’intérieur d’une ligne fixe de 36px se resserre visiblement à mesure que le viewport s’élargit, et au-delà d’une certaine largeur, l’interligne qui paraissait généreux sur un téléphone devient à l’étroit sur un ordinateur. Personne n’a choisi cette compression ; c’est le résultat par défaut du mélange d’une quantité fluide et d’une quantité figée — la même dérive qui plaide pour l’espacement fluide, qui se joue à l’intérieur même du bloc de texte.

La vraie question n’est donc pas de savoir si l’interligne doit réagir au glissement — il le doit — mais quel mécanisme s’en charge.

Quand les multiplicateurs sans unité suffisent-ils ?

line-height: 1.5 est calculé par rapport à la taille de police de l’élément lui-même, il glisse donc automatiquement : 1,5 de 16px sur un téléphone, 1,5 de 18px sur un large écran, 1,5 de chaque valeur intermédiaire. Pour le texte courant, c’est simple et correct — la forme sans unité s’hérite aussi sans danger, ce qui explique pourquoi elle est la recommandation standard depuis des années.

Le coût apparaît à l’échelle de tout le système, pas à l’intérieur d’une seule taille. Le grand texte veut un interligne proportionnellement plus serré que le texte courant — la courbe dépendante de la taille que tout système typographique encode — de sorte qu’une seule valeur sans unité pour toute la page est fausse aux extrémités, quel que soit le mode fluide. Des valeurs sans unité par niveau (1,5 pour le corps, 1,3 pour les titres, 1,1 pour l’affichage) corrigent cela tout en glissant quand même. Ce que les valeurs sans unité ne peuvent pas vous offrir, c’est un rythme partagé : l’interligne de chaque élément est un rapport privé, et aucune unité commune ne relie entre elles les hauteurs du bloc de texte.

Comment les multiples de la ligne de base en rem se comportent-ils dans un glissement ?

C’est l’approche de Scale Composer, et elle possède une propriété qui mérite d’être explicitée. Les interlignes du système sont des multiples de la ligne de base exprimés en rem — un corps de 16px repose sur une ligne de 24px écrite 1.5rem, la ligne de 36px d’un titre vaut 2.25rem. En mode fluide, la taille de police racine porte le glissement et chaque valeur en rem la suit — les tailles comme les interlignes. Le numérateur et le dénominateur sont mis à l’échelle par le même facteur, donc le rapport entre une taille et son interligne est verrouillé à chaque largeur de viewport.

Concrètement — un titre de 1.75rem sur une ligne de 2.25rem, la base glissant de 16→18 à travers des viewports 360→1280 :

La proportion que le concepteur a fixée est la proportion que chaque lecteur obtient, quel que soit l’écran — et parce que tous les interlignes sont des multiples de la même ligne de base en rem, l’unité de rythme elle-même glisse : la ligne de base de 8px vaut 8px à l’extrémité étroite et 9px à l’extrémité large, chaque bloc de texte en comptant toujours des unités entières. Le rythme vertical survit au mode fluide en se mettant à l’échelle, pas en se brisant.

Ouvrez un système fluide avec la colonne d’interligne visible — tailles et interlignes tous deux en rem, portés par un seul clamp racine, les rapports restant immobiles pendant que le simulateur de viewport bouge.

Quand l’interligne mérite-t-il son propre clamp ?

Quand un style doit changer de caractère au fil du glissement, et pas seulement de taille. Le cas classique est le texte d’affichage : un titre héros qui passe de 28px sur téléphone à 48px sur ordinateur veut sans doute que son interligne se resserre à mesure qu’il grandit — le grand caractère se lit comme une forme, et les formes veulent moins d’air. Un clamp par valeur exprime cela : la taille glisse de 28→48px pendant que l’interligne glisse de 32→52px,

h1 {
  font-size: clamp(1.75rem, 1.2609rem + 2.1739vw, 3rem);     /* 28 → 48px */
  line-height: clamp(2rem, 1.5109rem + 2.1739vw, 3.25rem);   /* 32 → 52px */
}

et le rapport diminue au fil du glissement, à dessein : 32/28 ≈ 1,14 à l’extrémité étroite, 52/48 ≈ 1,08 à l’extrémité large (les deux expressions vérifiées aux deux extrémités). Ce rapport décroissant est hors de portée des valeurs sans unité ou des multiples de la ligne de base — celles-ci maintiennent les rapports ; cette courbe en infléchit un.

Le coût est le coût habituel du par-valeur : deux clamps par style à garder cohérents, et un interligne qui ne retombe plus sur la ligne de base partagée. Le conseil honnête : réservez-le aux un ou deux styles d’affichage où le changement de caractère est le but, et laissez la mécanique à rapport verrouillé porter tout le reste.

Quel mécanisme pour quel texte ?

• Texte courant et texte d’interface — multiples de la ligne de base en rem (rapports verrouillés, rythme partagé) ou valeurs sans unité par niveau si le rythme n’est pas un objectif. L’un comme l’autre glisse correctement ; la voie du rem maintient en plus la grille de ligne de base en vie.
• Titres — multiples de la ligne de base, avec les rapports plus serrés par niveau que l’échelle typographique attribue déjà. Le glissement préserve la courbe que vous avez fixée, quelle qu’elle soit.
• Affichage — le seul candidat à son propre clamp d’interligne, lorsqu’un rapport qui s’infléchit au fil du glissement est réellement souhaité.

Vérifiez vos propres rapports au fil du glissement

Le mode de défaillance que cet article existe pour prévenir est silencieux : un interligne qui dérive pendant que tout le monde regarde les tailles de police. Ouvrez le système fluide et lisez le rapport à trois largeurs — faites glisser le simulateur de viewport jusqu’au minimum, au point médian et au maximum, et vérifiez que le rapport taille/interligne de chaque niveau est bien celui que vous avez choisi. Si un rapport bouge et que vous n’avez pas conçu ce mouvement, c’est l’unité — pas la valeur — qu’il faut corriger.