line-height

Syntaxe

Paramètres

Description

Cette propriété permet de spécifier l'espacement entre chacun des lignes du paragraphe. On appel aussi ce terme l'«Interligne».

Remarques

• Définition et rôle principal : La propriété line-height contrôle l'espacement vertical entre les lignes de texte. Elle joue un rôle crucial dans l'amélioration de la lisibilité en ajustant la densité visuelle des paragraphes. En augmentant la valeur de line-height, les lignes de texte apparaissent plus espacées, facilitant la lecture, surtout sur les écrans.
• Unités acceptées : line-height peut être défini avec différentes unités : un nombre sans unité (facteur multiplicateur), une valeur absolue (px, em, rem), ou une valeur relative (pourcentages). Lorsqu'elle est utilisée sans unité, elle multiplie la taille de la police de caractères actuelle pour définir la hauteur des lignes.
• Valeur sans unité : Utiliser une valeur sans unité (par exemple, 1.5) est recommandé, car elle garantit un comportement proportionnel et indépendant de la taille de la police de caractères des éléments imbriqués. Cela assure une meilleure cohérence dans des mises en page adaptatives (responsive design).
• Héritage et calcul automatique : La propriété line-height est héritée automatiquement par les enfants d'un élément. Toutefois, si la valeur est définie avec une unité (comme px), l'espacement des lignes des éléments enfants ne s'adapte pas automatiquement à la taille de leur propre police de caractères, ce qui peut casser la cohérence visuelle.
• Impact sur les blocs de contenu : line-height affecte non seulement l'espacement entre les lignes mais aussi l'espacement vertical entre plusieurs blocs de texte dans certains cas, notamment lorsque l'élément n'a pas de marges ou de padding explicites.
• Utilisation courante pour la typographie web : Une valeur de line-height comprise entre 1.4 et 1.6 est souvent recommandée pour les paragraphes, car elle améliore la lisibilité sur les écrans modernes. Les valeurs inférieures rendent le texte trop dense, tandis que les valeurs supérieures créent un effet de dispersion.
• Problèmes de compatibilité : Certains anciens navigateurs Web gèrent mal la combinaison de line-height et d'autres propriétés, comme vertical-align. Il est donc important de tester les effets dans plusieurs environnements pour éviter des comportements inattendus.
• Influence sur l'accessibilité : Une line-height bien définie est essentielle pour garantir une accessibilité optimale, notamment pour les lecteurs avec des troubles visuels ou cognitifs. Un espace vertical trop réduit peut fatiguer les yeux et compliquer la lecture des textes longs.