line-height en CSS : le multiplicateur qui évite les lignes trop serrées

Un texte peut être écrit dans la bonne police, à la bonne taille, et rester malgré tout pénible à lire si ses lignes sont trop serrées ou trop espacées. L'espace vertical entre les lignes pèse autant sur la lisibilité que la taille des caractères eux-mêmes, et c'est line-height qui le règle.

Cette propriété a une particularité que peu de propriétés CSS partagent : selon la façon dont on écrit sa valeur, elle se transmet par Héritage CSS de deux manières complètement différentes vers les éléments enfants. Ignorer cette différence est l'une des sources de bugs visuels les plus discrètes du CSS.

Définition

line-height fixe la hauteur de chaque ligne de texte, c'est-à-dire l'espace vertical total qu'elle occupe, texte compris. Elle accepte un nombre sans unité, une valeur en pixels ou en rem, ou un pourcentage.

p {
  font-size: 16px;
  line-height: 1.5; /* 1.5 fois la taille de police, soit 24px ici */
}

Valeur sans unité contre valeur fixe

Une valeur sans unité comme 1.5 n'est pas une hauteur en soi, c'est un multiplicateur. Chaque élément qui hérite de cette valeur la recalcule avec sa propre font-size : un enfant à 16 pixels obtient 24 pixels de hauteur de ligne, un enfant à 32 pixels obtient 48 pixels, dans les deux cas la proportion reste 1.5.

Une valeur fixe en pixels, elle, hérite telle quelle, sans aucun recalcul. Un enfant qui a une taille de texte différente du parent reçoit exactement le même nombre de pixels de hauteur de ligne, ce qui casse la proportion prévue.

Un exemple concret du décalage

Imaginez un article dont le texte courant utilise 16 pixels de font-size, et à l'intérieur duquel une citation passe à 24 pixels pour se démarquer visuellement. Si line-height est fixé en pixels sur le parent, la citation hérite de la même hauteur de ligne que le texte courant, trop serrée pour sa taille de police plus grande, et les lignes de la citation paraissent comprimées.

article {
  font-size: 16px;
  line-height: 24px; /* fixe : hérite tel quel */
}

article blockquote {
  font-size: 24px;
  /* hérite de 24px de hauteur de ligne pour un texte de 24px : trop serré */
}

En remplaçant 24px par 1.5 sur le parent, la citation recalcule sa propre hauteur de ligne à partir de ses 24 pixels de police, soit 36 pixels, et retrouve un espacement proportionné.

L'impact sur la lisibilité

Une hauteur de ligne trop faible, proche de 1, colle les lignes les unes aux autres et fatigue l'œil qui peine à retrouver le début de la ligne suivante. Une hauteur trop élevée, au-delà de 2, délite le texte en bandes qui semblent sans lien entre elles. Pour un texte courant, une valeur entre 1.4 et 1.6 convient à la plupart des cas. Les titres, plus courts et déjà plus gros, tolèrent une valeur plus resserrée, souvent entre 1.1 et 1.3, sans perdre en confort de lecture.

Questions fréquentes

Une valeur sans unité entre 1.4 et 1.6 posée sur body convient à la grande majorité des sites, puis chaque élément hérite et recalcule automatiquement sa propre hauteur de ligne selon sa taille de police.

C'est souvent le signe qu'ils héritent d'une hauteur de ligne pensée pour un texte plus petit. Avec une valeur sans unité, un titre à grande taille de police recalcule une hauteur de ligne en pixels bien supérieure à celle du texte courant, ce qui peut sembler excessif visuellement même si le calcul est correct.

Oui, et son comportement à l'héritage se rapproche de la valeur sans unité : 150% se comporte presque comme 1.5. La différence est subtile et concerne surtout des cas avancés d'héritage imbriqué, ce qui explique pourquoi la valeur sans unité reste la recommandation la plus répandue.

Oui, la hauteur de ligne fait partie de la hauteur de contenu de l'élément, au même titre que le texte lui-même. Une hauteur de ligne trop généreuse sur un petit composant, comme un bouton, peut l'agrandir plus que prévu même si sa taille de police reste modeste.