Manifeste pour un interlignage minimum syndical pour les blogs !

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, alors qu’il suffit 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

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 deux captures d’écran significatives dans la mesure où elles ont été réalisées sur le site http://www.accessiweb.org/ dont le motto est La nature du web est son universalité. Il doit être accessible à toutes les personnes handicapées.

Il me semble que l’interlignage fait beaucoup pour la lisibilité d’une page web, et la lisibilité, pour une personne valide ou en situation de handicap, c’est le début de l’accessibilité. Et ça ne coûte vraiment pas cher de bien interligner !

Avec l’interligne par défaut (ajouté à la longueur des lignes), le site Accessiweb manque de lisibilité
Le site AccessiWeb avec les réglages par défaut.
Une fois la déclaration line-height: 1.6; ajouté au body, mes yeux me disent «merci»…
Le site AccessiWeb avec un interlignage augmenté d'un facteur 1,6

5 règles pour faire un beau design web

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

Envoyons paitre les mauvais interligneurs 😉