Interligne et longueur de ligne pour un texte lisible

L’interligne est la distance entre la ligne de base d’une ligne de texte et celle de la suivante, et la longueur de ligne (que les typographes appellent la justification ou la mesure) est le nombre de caractères qui tiennent sur une ligne. Pour le texte courant, un interligne d’environ 1,4 à 1,6 fois la taille de la police et une longueur de ligne d’environ 45 à 75 caractères forment la plage qui se lit confortablement avec la plupart des polices. Les titres veulent moins d’interligne, souvent 1,05 à 1,25. Ces deux réglages font plus pour la lisibilité que presque n’importe quel choix de police.

Ce guide explique pourquoi ces plages fonctionnent, comment les deux réglages s’influencent et comment les définir pour les pages web, les diapositives et les posts sociaux. Il s’inscrit dans le guide plus large les bases de la typographie, à côté de l’espacement des lettres.

Ce que contrôlent vraiment l’interligne et la longueur de ligne

Lire, c’est une suite de sauts. L’œil saisit quelques mots, saute le long de la ligne, puis fait un long balayage de retour vers la gauche pour trouver la ligne suivante. La longueur de ligne décide de la longueur de ce trajet. L’interligne décide de la facilité à atterrir sur la bonne ligne à la fin du balayage.

Trop serré, et les lignes s’entassent : les jambages touchent les hampes et le balayage de retour atterrit sur la mauvaise ligne. Trop lâche, et le paragraphe se défait en bandes. Des lignes trop longues font perdre l’œil au retour ; des lignes trop courtes rendent la lecture saccadée.

Choisir un interligne pour le texte courant

Partez de 1,5 et ajustez à l’œil. Trois éléments font monter ou descendre le chiffre.

• La hauteur d’x. Les polices à grande hauteur d’x (des minuscules grandes par rapport aux majuscules) paraissent plus denses : elles demandent plus d’interligne. Les polices à petite hauteur d’x peuvent se serrer davantage.
• La longueur de ligne. Les longues lignes demandent plus d’interligne pour que le balayage de retour ait une cible plus large. Les lignes courtes, comme une colonne étroite ou un écran de téléphone, peuvent en utiliser un peu moins.
• La graisse et la couleur. Un texte gras et un texte clair sur fond sombre paraissent tous deux plus lourds sur la page : ils gagnent à un peu plus d’espace entre les lignes.

Les recommandations d’accessibilité vont dans le même sens. Le critère de réussite sur l’espacement du texte du W3C demande que le contenu continue de fonctionner quand un lecteur porte l’interligne à 1,5 fois la taille de la police : toute mise en page construite autour de 1,5 passe donc déjà cette partie du test. Ne fixez jamais la hauteur d’une zone de texte si serrée qu’un interligne plus grand couperait les mots.

L’interligne des titres et des grands caractères

L’interligne est un ratio : l’espace qu’il crée grandit donc avec la taille de la police. À 16 px, un interligne de 1,5 ajoute 8 px d’espace. À 72 px, le même ratio ajoute 36 px, bien plus que ce dont un titre a besoin. C’est pourquoi les grands caractères paraissent lâches avec les réglages du texte courant et ont besoin d’être resserrés à mesure qu’ils grandissent.

Une échelle pratique : texte courant à 1,5, sous-titres à environ 1,3, titres de 1,1 à 1,2, et très grandes lignes d’affichage de 1,0 à 1,05. Vérifiez les réglages les plus serrés pour repérer les collisions : un jambage sur la première ligne (g, y, p) peut heurter un accent ou une hampe sur la deuxième. Si c’est le cas, ouvrez un peu l’interligne plutôt que de déplacer les lignes une à une.

Quelle longueur pour une ligne de texte

La plage établie depuis longtemps par la typographie du livre est de 45 à 75 caractères par ligne, en comptant lettres, espaces et ponctuation, avec autour de 60 à 70 pour la lecture continue la plus naturelle. Sur un site web, cela donne en général une colonne de texte d’environ 560 à 720 px de large avec une police de 16 à 18 px, mais tout dépend de la police : mesurez donc en caractères plutôt qu’en pixels.

Pour vérifier, comptez les caractères d’une ligne typique. Régulièrement plus de 80 signifie que la colonne est trop large ; moins de 40, qu’elle est trop étroite, avec des bords irréguliers et de petits mots isolés.

Trop large : 110 caractères

1100 × 180

Confortable : 65 caractères

650 × 260

Trop étroit : 30 caractères

300 × 480

Définir l’interligne et la longueur de ligne en CSS

Deux habitudes couvrent l’essentiel. Écrivez l’interligne comme un nombre sans unité, pour que chaque élément le calcule à partir de sa propre taille de police, et limitez la longueur de ligne avec l’unité ch, fondée sur la largeur du caractère zéro dans la police courante. La page MDN sur line-height explique pourquoi les valeurs sans unité s’héritent plus sûrement que les pixels ou les em.

:root {
  --measure: 65ch;
}

body {
  font-size: 1.0625rem; /* 17px */
  line-height: 1.55;
}

.prose {
  max-width: var(--measure);
  margin-inline: auto;
}

.prose p + p {
  margin-block-start: 1em;
}

h1, h2 {
  line-height: 1.12;
  text-wrap: balance;
}

h3 {
  line-height: 1.3;
}

.caption {
  font-size: 0.875rem;
  line-height: 1.45;
  max-width: 55ch;
}

L’interligne et la longueur de ligne sur les posts et les diapositives

Les posts sociaux et les diapositives se lisent en quelques secondes, souvent sur un téléphone : les règles changent donc. Les lignes sont courtes par nature et peu nombreuses. Gardez les titres serrés, autour de 1,05 à 1,2, et limitez toute ligne d’appui à une ou deux courtes lignes autour de 1,3. Si un post demande un paragraphe à l’interligne du texte courant, il lui faut probablement moins de mots.

Sur un post de 1080 par 1350, un titre de trois à six mots par ligne se lit bien à la taille d’un téléphone. Sur une diapositive de 1920 par 1080, le même principe vaut à travers une salle : lignes courtes, titres serrés, marges généreuses. Les guides sur les polices pour les réseaux sociaux et les arrière-plans de présentation traitent la question de la taille.

Un texte sur un arrière-plan chargé demande un peu plus de tout : plus d’interligne, une taille plus grande et une zone plus calme derrière lui. Le texte sur un dégradé couvre la méthode complète.

Une liste de contrôle rapide pour un espacement lisible

1. 1

   Réglez d’abord le texte courant

   Choisissez la taille, un interligne autour de 1,5 et une longueur de ligne de 60 à 70 caractères. Ajustez tout le reste à partir de là.

2. 2

   Resserrez à mesure que les caractères grandissent

   Faites descendre l’interligne des intertitres aux titres, et vérifiez les lignes les plus serrées pour repérer les collisions.

3. 3

   Mesurez en caractères

   Comptez une vraie ligne. Si elle sort de 45 à 75, corrigez le conteneur, pas la taille de police.

4. 4

   Laissez le lecteur le modifier

   Évitez les zones de texte de hauteur fixe, pour qu’un texte plus grand ou un espacement plus large ne coupe jamais vos mots.