blog

Vestiges d’un CSS Guru

Billet

Comprendre le line-height

Le line-height est une propriété de base très importante mais trop souvent mal utilisée. En fait, elle est très souvent ignorée, ou bien définie approximativement parce qu’elle concerne l’espace qu’occupe le texte. Et visuellement, le texte est difficile à mesurer. Néanmoins, le line-height est essentiel au confort de lecture ainsi qu’à l’équilibre spatial d’une page web.

Je vais essayer d’expliquer le peu qu’il y à comprendre en m’appuyant sur un élément que vous venez de lire : le titre de mon billet.

Le line-height a deux amours

Le line-height a principalement 2 objectifs, qui ne sont et ne doivent pas être contradictoires :

  1. Confort de lecture
  2. Alignement vertical

Alors que le confort de lecture s’établit pour un bloc de texte, l’alignement vertical s’établit pour une ligne de texte. 1

Le souci est que je vois souvent les intégrateurs négliger le confort de lecture, voire l’ignorer totalement lorsqu’il s’agit d’alignement vertical. Pourtant, il est facile de jouer sur les deux fronts.

Confort de lecture

En CSS, le line-height ne définit pas l’espacement des lignes mais plutôt la hauteur d’une ligne (ce qui, forcément, définit indirectement leur espacement, mais la nuance est importante). Ainsi, un paragraphe de 3 lignes, dont le line-height est de 16px fera 48px de hauteur. C’est évident à comprendre non ?

Relatif au font-size

L’erreur serait de considérer le font-size pour calculer la hauteur d’un paragraphe : si un paragraphe a un font-size de 20px, alors chaque ligne fait 20px de haut. FAUX. Le font-size n’entre pas directement en compte. Le font-size définit uniquement la taille des caractères d’une police. A vous de le définir à votre guise.

Le line-height sera néanmoins définit en fonction du font-size. Une règle simple est d’appliquer un line-height équivalent à 1,4x le font-size (environ). Prenez le paragraphe que vous êtes en train de lire : le font-size est de 15px (parce que c’est ce que je voulais tout simplement). Si on multiplie 15 par 1,4, on obtient 21. Mon line-height est en réalité de 22, ce qui est terriblement proche.

Cette règle peut légèrement varier selon la police utilisée (les polices avec serif apparaissent un peu plus grandes, du coup, un line-height légèrement plus grand est préférable). Mais au final, le confort de lecture se juge surtout à l’oeil : à vous de juger l’équilibre font-size/line-height.

Titre ≠ paragraphe

Les titres sont un cas particulier : en général, le line-height est plus petit, parce que les titres comportent beaucoup moins de lignes (1 seule très souvent, 2 régulièrement, 3 parfois, et rarement + de 3).

Du coup, le ratio line-height/font-size est très proche de 1.

Alignement vertical

L’alignement vertical s’effectue à 90% pour les éléments à une seule ligne de texte : boutons, titres, menus.. Il s’applique donc sur une seule ligne, ou bien la première ligne d’une série.

Reprenons mon titre de billet : je veux aligner verticalement le texte de mon titre avec le carré de gauche, qui s’avère être le format du post (article, lien, image, citation ou brève). Mon carré est placé en premier. C’est donc le titre qui doit s’adapter pour être aligné avec le carré.

Mon carré fait 40px de haut. La solution de facilité serait d’appliquer un line-height de 40px : chaque première ligne de mon titre serait alignée verticalement avec le carré, et ce, quel que soit le font-size appliqué. Cette solution serait correcte pour une seule ligne, mais on aurait des soucis dès l’apparition d’une deuxième ligne.

En effet, le font-size de mes titres varie selon le format du post. Du coup, même si un line-height de 40px peut passer pour un font-size de 36px, il sera ridicule pour mon format “Brève” qui a un font-size de 17px.

En fait, on aurait fait une erreur dans l’ordre de définition des propriétés : le line-height doit servir au confort de lecture, avant toute chose. La volonté s’aligner verticalement ne doit pas se faire au détriment du confort de lecture. Et ce confort de lecture n’apparaissant qu’à partir de la deuxième ligne, peut se voir être négligé si l’on ne travaille que sur une seule ligne.

Ordre de définition des propriétés

Voici dans quel ordre on doit choisir la valeur des propriétés :

font size -> line-height -> padding-top

A quoi correspond chaque propriété ?

  • Font size : la taille des caractères. Il s’établit selon des critères d’esthétique, d’équilibre. Il est défini indépendamment, en premier. A vous de le choisir, judicieusement.
  • Line-height : le confort de lecture (uniquement !). Ratio de 1,4 pour des paragraphes, 1 pour des titres.
  • Padding-top : c’est l’arme secrète qui va nous permettre d’aligner la première ligne sans compromettre le confort de lecture.

J’ai plusieurs formats de post. On va se focaliser sur 3 d’entre eux :

  • Articles : font-size 36px / line-height 36px
  • Liens : font-size 28px / line-height 28px
  • Brèves : font-size 17px / line-height 24px

Première chose : maintenant que les line-height ont été établis selon le font-size, on va oublier les font-size. Ils ne sont plus utiles. On va se focaliser sur les line-height qui, eux, rentrent en considération dans l’alignement vertical.

Articles

Mes titres d’articles ont un line-height de 36px, et je veux qu’ils s’alignent verticalement dans un espace de 40px. Puisqu’on ne peut plus toucher au line-height (sous peine de dégrader le confort de lecture), on va décaler le titre vers le bas en haut utilisant du padding-top. Mais de combien ? Et bien de la différence entre line-height et hauteur désignée, divisée par deux. Une image pour expliquer ça ?

Avec un titre qui occupe 36px de haut, il nous faut 2px en haut et 2px en bas pour l’aligner verticalement avec le carré de 40px.

Vous remarquerez qu’à ce stade, le padding-bottom est négligeable. Il pourrait être de 40px qu’il n’entrerait pas en compte dans l’alignement vertical. Du coup, vous pouvez le définir à votre guise. Par exemple, ayant un border-bottom de 1px, j’ai établi mon padding-bottom à 16px.

Qu’en est-il des autres formats ?

Liens

Les liens que je poste sont moins importants que mes articles. Du coup, leur font-size n’est qu’à 28px, et leur line-height aussi. Du coup, le calcul est : (40-28) / 2 = 6px de padding-top.

Brèves

La particularité de mes brèves est qu’il n’y a pas de titre (ou du moins, il n’est pas affiché sur mon site). Du coup, c’est un paragraphe, pas un titre. Le font-size de 17px a généré un line-height de 24px. Calcul rapide : (40-24) / 2 = 8px de padding-top.

Avec cette utilisation simple du padding-top, on aligne la première ligne sans compromettre le confort de lecture établi en amont.

  1. Ce qui ne signifie pas forcément qu’il n’y a qu’une seule ligne de texte, mais qu’il s’agit de la première ligne lorsqu’il y en a plusieurs.