La hauteur d'une ligne de texte est spécifiée par la propriété line-height dont la valeur est un nombre d'unités ou un nombre sans unité.

html { line-height: 13px; }
div { line-height: 1.6em; }
h1 { line-height: 160%; }
p { line-height: 1.8; }
li { line-height: 2rem; }

L'unité de taille est à choisir en fonction du dispositif d'affichage. Par exemple il ne faut pas utiliser des centimètres pour afficher sur un écran pour lequel on privilégiera le pixel CSS (px), le cadratin (em), le pourcentage (%) la référence à la racine du document (rem) ou un nombre sans unité.

La propriété line-height est héritée : elles est transmise automatiquement de l'élément parent à ses enfants, quelque soit le niveau de descendance.
On peut donc facilement gérer la hauteur des lignes d'une page en mettant la propriété line-height sur l'élément body, ou sur l'élément html.

L'exemple montre que la hauteur de ligne est importante pour la lisibilité du texte. Une hauteur trop failble rend le texte difficile à lire, tout comme une hauteur trop grande. La bonne hauteur de ligne se situe entre 1.3 et 1.6 fois la taille de la police.

Une utilisation détournée de la hauteur de ligne permet de centrer verticalement un texte de un ou quelques mots dans une boîte. C'est particulièrement utile pour des éléments d'interface comme des options de menu, des libellés de zones réactives ou des labels de boutons.
Pour centrer verticalement le texte, on définit la valeur la propriété line-height égale à celle de la propriété height de l'élément.