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é
Une fois la déclaration line-height: 1.6; ajouté au body, mes yeux me disent «merci»…
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 😉
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é…
J’ai appliqué toute de suite ce conseil en lisant l’article et c’est vrai que c’est plus agréable à lire. Du coup j’ai aussi augmenter le police de 8pt à 9.
avant
http://img39.imageshack.us/img39/6306/screenshot002p.png
après
http://img136.imageshack.us/img136/4996/screenshot001weo.png
je propose également de limiter la largeur de la colonne principale des blogs. L’interlignage est une donnée relative à la largeur du texte.
gabyu — Le nombre de mots par ligne est effectivement une donnée essentielle pour assurer la lisibilité d’un texte et ça fera l’objet d’un autre manifeste ! Merci 😉
Un très bon rappel sans aucun doute !