Docs CSS exécutables : Interligne CSS

Q: Faut-il mettre une unité à line-height ?

En général non. Une valeur sans unité comme 1.5 est multipliée par la taille de police de chaque élément, elle reste donc proportionnelle chez les enfants d'une autre taille. Une valeur avec unité est calculée une fois et héritée comme une longueur fixe.

Ce que fait line-height

line-height définit la hauteur de chaque ligne de texte. La différence entre cette hauteur et celle dont la police a besoin est coupée en deux et ajoutée au-dessus et en dessous des lettres : c'est ainsi que vous contrôlez l'espace entre les lignes.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Line height</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 16px; color: #111827; }
    .row { display: flex; gap: 16px; align-items: flex-start; }
    p { margin: 0; width: 200px; padding: 8px; background: #e5e7eb; }
    .tight { line-height: 1; }
    .comfy { line-height: 1.5; }
    .double { line-height: 2; }
  </style>
</head>
<body>
  <div class="row">
    <p class="tight">line-height: 1. Lines touch and long text is hard to follow.</p>
    <p class="comfy">line-height: 1.5. Comfortable spacing for a paragraph.</p>
    <p class="double">line-height: 2. Double spacing, like a draft.</p>
  </div>
</body>
</html>

Les trois paragraphes utilisent une police de 16px. Les lignes mesurent 16px, 24px et 32px de haut.

Les valeurs : sans unité, longueur, pourcentage, normal

Valeur	Exemple	Hauteur de ligne pour un texte de 16px	Héritée par les enfants sous forme de
Nombre	`1.5`	24px	Le nombre (1.5), recalculé pour chaque élément
Longueur	`24px`, `1.5em`, `1.5rem`	24px	La longueur calculée (24px)
Pourcentage	`150%`	24px	La longueur calculée (24px)
`normal`	`normal`	Selon la police, souvent environ 1.2	`normal`

Les deux premières lignes donnent le même résultat sur un élément. La différence n'apparaît que lorsqu'un enfant a une autre taille de police, ce que montre la section suivante.

Pourquoi sans unité est le bon choix par défaut

Un interligne de 1.5em ou 150% est converti en pixels sur le parent, et les enfants héritent de ces pixels. Un enfant avec une police plus grande obtient alors des lignes plus basses que ses lettres. Un 1.5 sans unité est hérité comme nombre et multiplié par la taille de police de chaque enfant.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Unitless vs em</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; color: #111827; }
    .box { width: 220px; padding: 8px; margin-bottom: 12px; background: #e5e7eb; }
    .em { line-height: 1.5em; }       /* 21px, inherited as 21px */
    .unitless { line-height: 1.5; }   /* inherited as 1.5 */
    h2 { font-size: 32px; margin: 0; }
  </style>
</head>
<body>
  <div class="box em">
    <!-- line-height: 1.5em -->
    <h2 id="em-h">A heading that wraps</h2>
  </div>
  <div class="box unitless">
    <h2 id="num-h">A heading that wraps</h2>
  </div>
  <p id="out"></p>
  <script>
    const lh = (id) => getComputedStyle(document.getElementById(id)).lineHeight;
    document.getElementById('out').textContent =
      'em box heading: ' + lh('em-h') + ', unitless box heading: ' + lh('num-h');
  </script>
</body>
</html>

Les deux titres passent sur deux lignes. Le premier hérite de lignes de 21px pour des lettres de 32px, et ses lignes se chevauchent. Le second obtient des lignes de 32 × 1,5 = 48px. Définissez line-height une fois sur body sous forme de nombre, et la plupart des pages n'en auront plus jamais besoin.

Essayez des valeurs

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Line height tester</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    #sample { width: 320px; margin-top: 12px; padding: 8px; background: #e5e7eb; }
  </style>
</head>
<body>
  <label>line-height: <input id="val" value="1.5" size="12"></label>
  <p id="sample">Line height changes the space between the lines of this paragraph. Type a number, a length or a percentage and watch the gaps change.</p>
  <p><code id="out"></code></p>
  <script>
    const sample = document.getElementById('sample');
    const input = document.getElementById('val');
    const show = () => {
      sample.style.lineHeight = input.value;
      document.getElementById('out').textContent =
        'computed: ' + getComputedStyle(sample).lineHeight;
    };
    input.addEventListener('input', show);
    show();
  </script>
</body>
</html>

Essayez 1, 2, 30px, 200% et normal. Chrome affiche normal tel quel plutôt qu'une valeur en pixels, car sa taille vient de la police.

De bonnes valeurs pour un texte lisible

Texte courant : 1.4 à 1.6. Les lignes longues demandent plus d'interligne pour que l'œil retrouve le début de la ligne suivante.
Titres : 1.1 à 1.3. Un grand texte avec un interligne de 1.5 ressemble à des lignes séparées plutôt qu'à un seul titre.
Boutons et étiquettes d'une ligne : 1 à 1.25, avec du padding pour la hauteur.

Pour l'accessibilité, le critère de succès 1.4.12 des WCAG exige qu'une page reste utilisable quand un lecteur règle l'interligne à 1,5 fois la taille de police : évitez donc les hauteurs fixes sur les boîtes de texte qui le couperaient.

Centrer verticalement une ligne de texte

Quand une boîte contient exactement une ligne, un line-height égal à la hauteur de la boîte place le texte au milieu verticalement, car l'espace en plus est réparti à parts égales au-dessus et en dessous :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Single line centering</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .badge {
      height: 40px;
      line-height: 40px;
      padding: 0 16px;
      width: max-content;
      background: #2563eb;
      color: white;
      border-radius: 20px;
    }
  </style>
</head>
<body>
  <div class="badge" id="badge">One line, centered</div>
</body>
</html>

Cela ne marche plus dès que le texte passe sur deux lignes, car chaque ligne fait alors 40px de haut. Pour tout ce qui peut passer à la ligne, centrez plutôt avec flexbox, comme sur la page pour centrer une div.

Le raccourci font

Le raccourci font définit la taille et l'interligne ensemble, séparés par une barre oblique :

body {
  font: 16px/1.5 system-ui, sans-serif; /* size 16px, line-height 1.5 */
}

Le raccourci remet à zéro toutes les propriétés de police qu'il ne mentionne pas (y compris line-height, qui revient à normal si vous omettez la partie après la barre oblique) : écrivez-le donc avant les règles font-* individuelles.

Erreurs courantes

Utiliser em ou % sur un conteneur. Les enfants héritent d'une longueur fixe. Utilisez un nombre sans unité.
Une height fixe sur une boîte de texte. Quand le texte passe à la ligne ou que le lecteur agrandit l'espacement, il déborde. Laissez le contenu définir la hauteur.
Un texte courant trop serré. line-height: 1 rend les paragraphes difficiles à lire. Commencez à 1.5.
Croire que line-height ajoute de l'espace entre les paragraphes. C'est le rôle de margin sur les paragraphes.
Compter sur normal. Il change d'une police à l'autre, et la mise en page bouge quand la police change.

Questions fréquentes

À quoi sert line-height en CSS ?

Il définit la hauteur de chaque boîte de ligne de texte. L'espace en plus de la hauteur propre de la police est réparti à parts égales au-dessus et en dessous des lettres, donc un line-height plus grand signifie plus d'espace entre les lignes.

Faut-il mettre une unité à line-height ?

En général non. Une valeur sans unité comme 1.5 est multipliée par la taille de police de chaque élément, elle reste donc proportionnelle chez les enfants d'une autre taille. Une valeur avec unité est calculée une fois et héritée comme une longueur fixe.

Quel interligne choisir pour le texte courant ?

Entre 1.4 et 1.6 pour les paragraphes, et autour de 1.1 à 1.3 pour les grands titres. Le niveau AAA des WCAG demande au moins 1.5 dans les paragraphes.

Que signifie line-height: normal ?

C'est la valeur par défaut. Le navigateur utilise une valeur tirée des métriques de la police, en général autour de 1.2 mais différente pour chaque police, donc imprévisible d'une police à l'autre.

Comment changer l'interligne en HTML ?

Le HTML n'a pas d'attribut d'interligne. Utilisez la propriété CSS, par exemple <p style="line-height: 2;"> pour un double interligne.

Concepts liés