Aussi disponible en : English · Español · Português · العربية
Calculateur d’interligne CSS
Calcule le line-height que chaque taille de police reçoit vraiment après héritage, en signalant les tailles où vos lignes commencent à se chevaucher.
Qu’est-ce que le line-height en CSS ?
L’interligne est la distance entre les lignes de base de deux lignes de texte consécutives. En CSS, vous pouvez l’écrire de quatre façons — un nombre nu comme 1.5, un pourcentage comme 150%, une longueur comme 24px, ou une unité relative à la police comme 1.5em — et sur l’élément où vous le déclarez, les quatre peuvent donner exactement le même résultat. Sur une racine de 16px, toutes donnent 24px.
Elles cessent d’être équivalentes dès que quelque chose en hérite, et la différence n’est pas une lubie des navigateurs : elle est inscrite dans la spécification. CSS 2.2 définit la valeur calculée de line-height comme la valeur spécifiée lorsqu’il s’agit d’un nombre, et comme la valeur absolue lorsqu’il s’agit d’une longueur ou d’un pourcentage. Un nombre est donc hérité en tant que nombre, chaque descendant le multipliant par sa propre taille, tandis que tout le reste est hérité comme une longueur figée qui ne change plus jamais.
Ce calculateur d’interligne rend la chose concrète. Donnez-lui votre taille racine, la déclaration que vous avez réellement écrite et les tailles de police de votre page, et il affiche ce que chacune obtient, à côté de ce qu’aurait donné l’équivalent sans unité.
Comment s’en servir
- Saisissez votre taille racine et l’interligne que vous avez écrit. La valeur et son unité sont deux commandes distinctes : vous pouvez donc garder le nombre et ne changer que l’unité. C’est le moyen le plus rapide de voir tout l’intérêt de la page.
- Listez les tailles de police présentes sur votre page. Titres, légendes, tout ce qui n’est pas à la taille racine. Les valeurs par défaut forment une échelle typographique classique : laissez-les telles quelles pour voir la forme du problème.
- Regardez la colonne du rapport, puis passez l’unité sur sans unité. Toute ligne signalée comme se touchant a une boîte de ligne qui ne dépasse pas son propre texte. En passant à un nombre nu, chaque ligne est recalculée sur sa propre taille et les signalements disparaissent.
Pourquoi 150% et 1.5 ne sont pas la même chose
Prenez les valeurs par défaut de la page : une racine de 16px avec line-height: 150%, et une échelle typographique de 16, 20, 25, 31, 39, 49 et 61 pixels. Le pourcentage se résout une seule fois, contre la racine, et donne 24px. Les sept tailles héritent alors de 24px — non pas de 150% d’elles-mêmes, mais de 24 pixels fixes.
À 16px cela fait un rapport de 1,5, soit ce que vous aviez demandé. À 25px c’est 0,96, et un rapport inférieur à 1 signifie que la boîte de ligne est plus basse que le texte qu’elle contient : les lignes successives se chevauchent réellement. À 61px le rapport tombe à 0,39 : le titre reçoit toujours 24 pixels de boîte de ligne pour un texte haut de 61 pixels. Cinq des sept tailles finissent à 1,0 ou en dessous, et six sur sept passent sous le 1,5 que le critère 1.4.12 des WCAG demande pour le texte de paragraphe.
Écrivez 1.5 sans unité et rien d’autre ne change : 16px reçoit 24px, 25px reçoit 37,5px et 61px reçoit 91,5px. Chaque ligne vaut 1,5. Rien ne se chevauche, parce que chaque élément fait sa propre multiplication.
Il existe un point exact où l’ennui commence, et il n’y a rien à mesurer. Le rapport hérité vaut la longueur calculée divisée par la taille de l’élément lui-même : il passe donc par 1 précisément lorsque la taille de police égale l’interligne calculé, et nulle part ailleurs. Quelle que soit la valeur en pixels de votre pourcentage, c’est la taille de police à laquelle vos lignes commencent à se heurter.
Ce qui permet à cela de passer une relecture de code, c’est que les deux déclarations sont véritablement indiscernables là où vous les avez écrites. Balayées sur toutes les tailles descendantes de 8px à 96px, 1.5 et 150% s’accordent sur une seule taille — la racine — et divergent sur les 176 autres. Le texte courant a l’air juste, donc la déclaration a l’air juste.
Limites assumées
L’unité em est une longueur : elle se comporte donc ici exactement comme un pourcentage, et rem est également une longueur. Elles ne diffèrent que par leur référence : em et pourcentage utilisent la taille de police de l’élément qui les déclare, tandis que rem se réfère toujours à la racine. Si vous déclarez sur la racine — ce qui est l’usage courant — les trois se confondent en un même nombre, et c’est précisément pourquoi la distinction échappe si facilement.
Cet outil modélise l’héritage, pas le rendu. La boîte de ligne réelle d’un navigateur dépend aussi des métriques propres à la police — ascendante, descendante et interligne intégré — de sorte que deux caractères de même taille et de même interligne ne produisent pas le même espacement. Les rapports affichés ici sont ceux que CSS calcule ; l’encre est une autre question, qui dépend du fichier de police.
Le chiffre de 1,5 vient du critère de succès 1.4.12 des WCAG 2.1, qui demande que l’utilisateur puisse porter l’interligne à au moins 1,5 fois la taille de police dans les blocs de texte. Il concerne les paragraphes et non les titres : un grand titre sous 1,5 n’est donc pas automatiquement un échec, et c’est pourquoi l’outil compte ces lignes séparément de celles où les lignes se touchent vraiment.
Enfin, un rapport supérieur à 1 n’est pas pour autant confortable. 1,05 passe le test du chevauchement et se lit tout aussi mal. Le repère de collision est un plancher, pas une recommandation.
Pourquoi est-ce gratuit ?
C’est de l’arithmétique, et elle s’exécute dans votre navigateur. Aucun serveur ne fait le travail : rien à facturer, aucun compte à créer.
Rien n’est envoyé et rien n’est conservé. Rechargez la page et elle aura oublié vos réglages.