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 !
18 Comments
Je vote pour, 2 fois même !
Tiens, tu as encore changé le design de ton site? Ca n’arrête pas
Pour l’interlignage, je suis aussi pour, on s’écorche moins les yeux. Je me demande si je ne vais pas l’augmenter encore un peu pour mon blog.
Ok, je suis convaincu. Mais n’oublie pas qu’à certains endroits ( formulaires tels que celui des commentaires ), c’est pas génial de prendre un écran au complet
Euh moi je préfère carrément quand c’est plus serré !
Personnellement, je trouve la lisibilité est la même avec l’interlignage de 1 ou de 1.5. Pour le texte de l’exemple, un interligne intermédiaire de 1.2 serait mieux adapté …
Ce qui est important, c’est la hauteur de ligne totale : texte + interligne. Ainsi, il me semble important de mettre un interligne lorsque le texte est écrit petit sur une grande largeur. Mais lorsqu’il est écrit gros sur une petite largeur, cela diminue la lisibilité …
@Xu: Merci, Camarade !
@Rick Hunter: Non, non, pour ton site ne change rien, c’est parfait ^^
@Darklg: C’est vrai, je viens de réduire la zone de saisie en hauteur, et de supprimer les exemples de Markdown qui prenaient trop de place, meeerci
@Ek0: C’est bizarre, parce que l’œil humain fonctionne à peu près de la même façon chez tout le monde
@SuperDevy: C’est vrai, tu as raison de souligner que l’interlignage doit s’adapter à la taille du texte, mais aussi à la longueur des lignes.
C’est bizarre alors, je dois avoir les même yeux qu’Ek0, je préfère de très loin quand c’est plus serré…
Rhaaa ! Tu m’a grillé mon billet !
abusé ^^’
Bon et bien je suis effectivement 100 pour 100 d’accord. Je dirais même que le minimum syndical DOIT être de 1.5em sans quoi beaucoup de personnes auront beaucoup de mal à lire. Et ça, c’est intolérable.
Je signe et resigne ce manifeste
@Ek0: J’aime beaucoup ton site/lien, très sympa pour faire chier le monde…
Et sinon, moi aussi je suis évidemment pour un minimum d’interlignage, beaucoup plus lisible!
Article de salubrité publique qui devrait être reconnu par le Ministère de la Santé ainsi que par la fédération des ophtalmos !!
@1loup : Je ne pense pas que tu n’ai pas de goût, donc je pencherais plutôt pour un manque d’habitude de voir des interlignages bien conçus
@redpeppers : Tu voulais faire un billet sur le même sujet ? N’hésites pas, il y a de la place pour tout le monde
@Bouctoubou : Oups, c’est donc le lien d’Eko qui a fait planter mon navigateur et qui m’a obligé à rebooter le PC… J’avais supprimé le lien de notre ami Rick Hunter (à cause de rick, quoi). Je l’ai remis et supprimé le lien de Ek0 ^^
@Jonathan Debauve : Tiens, tu me donnes une idée de partenariat publicitaire avec des ophtalmos sur ce coup-là
Je signe aussi, c’est plus clair en effet
J’en tiendrais compte dans mes feuilles de style dorénavant
Merci 
Mis en place sur MinURL =) Mine de rien, ça améliore beaucoup la lisibilité !
( Sinon, je trouve toujours que ta zone de commentaires est trop grande : les input alignés en face des labels, ça le ferait ptet mieux …
)
@Jérémy & @Darklg : Ce qui est assez curieux, c’est que cette “manie” de sous-estimer l’interlignage ou la taille des caractères est vraiment généralisée, même chez les graphistes (j’allais dire, surtout chez les graphistes) pour qui le texte est considéré comme quelque chose d’utilitaire qui ne mérite pas d’égards…
Encore plus curieux, se sont souvent les développeurs qui ont à cœur de prendre en compte les besoins des utilisateurs qui sont les premiers à changer leurs habitudes !
Camarades graphistes, ressaisissez-vous :p
Etant une buse en css, encore heureux que me donne cette astuce sinon je ne l’aurais jamais imaginée :p Surtout que ça simplifie la vie du lecteur
@Br1o : oui j’avais cette idée de billet depuis quelques temps, mais avec les vacances… ^^ Mais du coup j’en parlerais également par chez moi d’ici quelques temps puisque je suis totalement d’accord avec toi
Pour le reste cette “astuce” me semble tout bonnement indispensable à tout bon webdesigner. Je ne puis par ailleurs lire sans peine certain blogs bien connus et pourtant difficilement lisibles.. faut vraiment que je sois intéressé par les articles ..
Encore un bonne idée ! Merci Bruno
Conseil judicieux
appliqué…
2 Trackbacks
[...] Bichet manifeste pour un interlignage minimum sur les blogs et franchement il a bien raison, et j’en tiendrais compte dans mon prochain thème [...]
[...] Manifeste pour un interlignage pour les blogs ! [...]