Un spectre hante le web : le spectre de l’interlignage par défaut des navigateurs. Trop de blogs et de sites web se contentent du minimum syndical pour gérer l’interlignage. Par défaut, les navigateurs web proposent 120% de la taille de la police.

Ce qui est dramatiquement insuffisant au regard de la faible résolution du texte à l’écran. Il suffit pourtant d’ajouter une ligne de déclaration CSS à la balise html ou body pour permettre à vos lecteurs de passer du déchiffrage laborieux à la Lecture pleine et entière. Essayez, vous serez surpris de voir à quel point vos pages web auront gagné en lisibilité.

Modifier l’interlignage par défaut avec line-height

Les valeurs à ajouter à la balise body ou html dépendent de la configuration de votre feuille de style. Voici trois exemple à tester pour obtenir un interlignage de 1,5 fois la taille de caractère :

• body { line-height: 1.5; }

  Plus d’information sur l’absence d’unité dans cette partie de l’article 5 Reset CSS à la loupe.

• body { line-height: 1.5em; }

• body { line-height: 150%; }

Une image vaut mille mots ?

Si vous avez des difficultés à vous représenter l’intérêt d’augmenter cet interlignage, voici une petite capture d’écran interactive assez significative, puisque l’auteur œuvre afin d’obtenir une visibilité efficace et pérenne sur internet…

Passez la souris sur l’image pour voir la différence avant après ou cliquez pour afficher les deux versions l’une sous l’autre.

5 règles pour faire un beau design web

Pour conclure : l’accessibilité du web passe aussi par un traitement typographique globale au niveau de la page : l’interlignage n’est pas le seul paramètre oublié. Pour se rafraichir la mémoire, révisons les 5 règles pour faire de belles mise en pages.

Faites tourner !