Pour des question de lisibilité
line-height, lorsqu’elle est appliquée à un élément de niveau bloc, définit, comme son nom l’indique littéralement, la hauteur de chaque ligne. Il ne faut pas le confondre avec l’espacement des lignes (« interligne ») que l’on trouve dans la plupart des logiciels graphiques (comme Photoshop), qui détermine la quantité d’espace entre les lignes d’un paragraphe. Bien qu’ils aient tous deux le même objectif (espacement des lignes de texte), ils le font de différentes manières.La propriété
line-height utilise les unités suivantes :
pxem%- nombres sans unité, comme
1.5
Les valeurs sans unité agissent essentiellement comme des pourcentages. Donc, 150% est égal à 1.5. Ce dernier est juste plus compact et lisible.
Pourquoi la hauteur de ligne est importante
Le but de line-height est de définir un interligne lisible pour votre texte. La lisibilité dépendant de la taille du texte, il est recommandé d’utiliser une valeur dynamique relative à la taille du texte. L’utilisation de px n’est donc pas recommandée car elle définit une valeur statique.
Dans certains cas, utiliser le format px s’avère utile (lorsque vous souhaitez aligner le texte verticalement en fonction d’un autre élément et non en fonction de la taille de la police).
L’utilisation des % ou em peut avoir des valeurs inattendues, la méthode recommandée consiste à utiliser des nombres sans unité :
- pour le corps du texte, une hauteur de ligne de 1,5 fois la taille du texte est recommandée.
- pour les en-têtes, une hauteur de ligne de 1,2 est recommandée
body { font-size: 16px; line-height: 1.5;}La hauteur de ligne calculée sera donc 16 * 1,5 = 24px.
Héritage de hauteur de ligne
Etant donné que la propriété line-height est héritée par les éléments enfants, elle reste cohérente quelle que soit le font-size appliquée par la suite.
body { font-size: 16px; line-height:1.5;}
blockquote { font-size: 18px;}L’élément blockquote aura une hauteur de ligne de 27px.