Calculateur d'interligne : Trouvez l'interligne parfait pour n'importe quelle taille de police

L'interlignage est l'une des décisions typographiques les plus impactantes — et les plus négligées — que vous aurez à prendre. Trop serré, le texte paraît étouffant. Trop aéré, l'œil perd le fil entre les lignes. Le trouver juste fait la différence entre un texte qui vous invite à lire et un texte que vous peinez à suivre.

Le Tooladex Line Height Calculator vous aide à trouver la valeur adaptée à n'importe quelle taille de police et à l'obtenir dans l'unité CSS exacte dont vous avez besoin — ratio sans unité, px, em ou rem.

Qu'est-ce que le line height (et qu'est-ce que le leading) ?

Le line height est la distance verticale d'une ligne de base à la suivante — la hauteur totale allouée à chaque ligne de texte. En typographie imprimée, ce même concept s'appelle le leading (prononcé « ledding »), du nom des bandes de plomb que les typographes plaçaient entre les rangées de caractères métalliques.

En CSS, la propriété line-height contrôle cela directement. Une valeur de 1.5 sur une police de 16px signifie que chaque ligne occupe 24px d'espace vertical.

Sans unité, px, em ou rem — lequel utiliser ?

CSS vous offre plusieurs façons d'exprimer le line height :

Le ratio sans unité est presque toujours le bon choix pour le texte courant et les titres. Une valeur en pixels fixe sera cassée si un style parent ou une préférence utilisateur modifie la taille de police — le texte pourrait se chevaucher. Une valeur sans unité hérite et s'adapte avec souplesse.

WCAG 1.4.12 : le seuil d'accessibilité

Le critère de succès 1.4.12 des Web Content Accessibility Guidelines (WCAG) (Espacement du texte, niveau AA) exige que les utilisateurs puissent définir le line height du texte courant à au moins 1,5× la taille de police sans perte de contenu ni de fonctionnalité.

En pratique, l'approche la plus simple consiste à partir de 1.5 ou plus pour le texte courant, ce qui signifie que vous êtes conforme par défaut et que vous donnez à votre contenu l'espace dont il a besoin.

Line height recommandé selon le cas d'usage

Ce sont des points de départ. Testez toujours avec du contenu réel à la largeur de colonne cible — les colonnes étroites nécessitent souvent un ratio légèrement plus élevé.

Comment utiliser le calculateur

1. Saisissez votre taille de police en pixels (par ex. 16 pour le texte courant, 32 pour un H1).
2. Faites glisser le curseur de ratio ou choisissez un préréglage (Serré → Aéré).
3. Lisez les résultats — vous obtiendrez le ratio, la valeur en pixels, em, rem et une déclaration CSS prête à copier.
4. Vérifiez le badge WCAG — l'outil indique si votre ratio respecte WCAG 1.4.12 pour le texte courant.
5. Prévisualisez — observez le bloc de texte en direct se reformater instantanément à mesure que vous ajustez les valeurs.

/* Texte courant — conforme WCAG, sans unité (recommandé) */
body {
  font-size: 16px;
  line-height: 1.5;
}

/* Titre — leading plus serré */
h1 {
  font-size: 2rem;
  line-height: 1.2;
}

/* Petits caractères */
figcaption {
  font-size: 0.875rem;
  line-height: 1.6;
}