CSS : line-height - Web Formation

Description

La propriété line-height définit l’interligne, c’est-à-dire l’espace vertical entre les lignes de texte.

Elle influence directement la lisibilité d’un texte : un interligne trop serré gêne la lecture, tandis qu’un interligne trop large casse le rythme visuel.

line-height peut être défini avec différentes unités ou sans unité, ce qui modifie son comportement.

Valeurs possible

Voici les valeurs les plus courantes :

Type	Exemples	Description
Sans unité (recommandé)	`line-height: 1.4;`	Valeur multiplicative basée sur la taille de police. Très pratique car les éléments enfants héritent d’un rapport cohérent.
Unités fixes	`18px`, `1.2rem`	Interligne fixe en hauteur. Peut poser des problèmes avec des tailles de police variables.
Pourcentage	`140%`	Équivalent à une valeur sans unité (ex. 140% = 1.4).
Normal	`line-height: normal;`	Valeur par défaut, dépend de la police (~1.0 à 1.2). Peut être trop serré pour les textes longs.

Exemple

Démonstration interactive : line-height

Choisissez une valeur

Aperçu

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi pretium vestibulum pharetra. Mauris ipsum felis, maximus eget ornare non, iaculis in leo. Suspendisse nec luctus odio, a aliquam sem. Curabitur ullamcorper a lectus eu tristique. Nullam ut aliquam ex. In et elit ut odio finibus porttitor.

Code HTML & CSS

<p class="demo">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi pretium vestibulum pharetra. Mauris ipsum felis, maximus eget ornare non, iaculis in leo. Suspendisse nec luctus odio, a aliquam sem. Curabitur ullamcorper a lectus eu tristique. Nullam ut aliquam ex. In et elit ut odio finibus porttitor. </p>
<p class="demo">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi pretium vestibulum pharetra. Mauris ipsum felis, maximus eget ornare non, iaculis in leo. Suspendisse nec luctus odio, a aliquam sem. Curabitur ullamcorper a lectus eu tristique. Nullam ut aliquam ex. In et elit ut odio finibus porttitor. </p>

<p class="demo">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi pretium vestibulum pharetra. Mauris ipsum felis, maximus eget ornare non, iaculis in leo. Suspendisse nec luctus odio, a aliquam sem. Curabitur ullamcorper a lectus eu tristique. Nullam ut aliquam ex. In et elit ut odio finibus porttitor. </p><p class="demo">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi pretium vestibulum pharetra. Mauris ipsum felis, maximus eget ornare non, iaculis in leo. Suspendisse nec luctus odio, a aliquam sem. Curabitur ullamcorper a lectus eu tristique. Nullam ut aliquam ex. In et elit ut odio finibus porttitor. </p>

.demo { 
    font-size: 0.95rem;
    line-height: 1.2
}

.demo {     font-size: 0.95rem;    line-height: 1.2}

.demo { 
    font-size: 0.95rem;
    line-height: 1.5
}

.demo {     font-size: 0.95rem;    line-height: 1.5}

.demo { 
    font-size: 0.95rem;
    line-height: 1
}

.demo {     font-size: 0.95rem;    line-height: 1}

.demo { 
    font-size: 0.95rem;
    line-height: 2
}

.demo {     font-size: 0.95rem;    line-height: 2}

Remarques

Une valeur sans unité (1.4, 1.6) est considérée comme la meilleure pratique moderne.
Pour un texte long, un interligne entre 1.4 et 1.7 améliore nettement la lecture.
Des valeurs fixes en px peuvent causer des chevauchements si la taille du texte varie.