Calculatrice de Hauteur de Ligne
Calculez la hauteur de ligne optimale pour n'importe quelle taille de police. Valeurs sans unité, px, em et rem avec aperçu en direct et recommandations WCAG.
WCAG recommande au moins 1,5 pour le corps du texte.
Préréglages
WCAG 1.4.12 exige que la hauteur de ligne soit au moins 1,5× la taille de police. Votre rapport actuel 1.5 ✓ passes WCAG 1.4.12.
Résultats
Rapport sans unité
1.5
Pixels
24px
Em
1.5em
Rem
1.5rem
Propriété CSS
line-height: 1.5;
Aperçu en direct
Le vif renard brun saute par-dessus le chien paresseux. La typographie compte — une bonne hauteur de ligne rend le texte plus lisible et plus accessible pour tous les utilisateurs.
font-size: 16px; line-height: 1.5;
Table des matières
Qu'est-ce que la hauteur de ligne ?
La hauteur de ligne (également appelée interlignage en typographie imprimée) est la distance verticale entre les lignes de texte, mesurée d'une ligne de base à la suivante. Elle a un impact majeur sur la lisibilité : trop serrée et le texte paraît étouffé ; trop espacée et l'œil perd le fil.
En CSS, la propriété line-height accepte un nombre sans unité (ex. 1,5), une valeur en pixels (24px), une valeur em ou rem (1,5em), ou un pourcentage. La valeur sans unité est généralement préférée car elle s'adapte automatiquement à la taille de police de chaque élément.
Comment calculer la hauteur de ligne
- Choisissez votre taille de police en pixels (ex. 16px pour le corps du texte).
- Choisissez un rapport — 1,5 est un bon point de départ pour le corps, 1,1–1,2 pour les titres.
- Multipliez taille de police × rapport pour obtenir la valeur en pixels (ex. 16 × 1,5 = 24px).
- Utilisez le rapport sans unité directement en CSS pour une meilleure évolutivité.
- Copiez le résultat dans l'unité qui convient à votre feuille de style.
Bonnes pratiques
- Utilisez un rapport sans unité (ex. 1,5) plutôt qu'une valeur px fixe pour que la hauteur de ligne s'adapte.
- Corps du texte : visez 1,4–1,6. WCAG 1.4.12 exige au moins 1,5 pour l'accessibilité.
- Titres et texte d'affichage : utilisez un rapport plus serré de 1,1–1,3.
- Petit texte (moins de 14px) : augmentez légèrement le rapport pour maintenir la lisibilité.
- Testez visuellement — de vrais paragraphes révèlent les problèmes plus clairement qu'une seule ligne.
Questions fréquentes
La plupart des typographes recommandent 1,4–1,6 pour le corps du texte. Le critère de succès WCAG 1.4.12 exige un minimum de 1,5× la taille de police.
Un rapport sans unité (ex. 1,5) hérite de la taille de police de l'élément et se redimensionne correctement. Une valeur px fixe ne s'ajuste pas, ce qui peut provoquer un chevauchement si la taille de police est modifiée.
L'interlignage est un terme de typographie imprimée pour l'espace vertical entre les lignes. En CSS, line-height contrôle la même mesure mais est répartie par défaut au-dessus et en dessous de chaque ligne.
Oui. Les grands titres ont généralement un meilleur rendu avec un rapport plus serré (1,1–1,2). Le corps du texte a besoin de plus d'espace (1,4–1,6) pour guider l'œil sur les lignes.