Manifeste pour un interlignage minimum syndical pour les blogs !

Rigueur. Et passion !

Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ?

Le blog de l'intégrateur web

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 ;-)

Articles sur le même sujet

PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car
Il n'y pas d'amour, il n'y a que des preuves d'amour (Jean Cocteau) ;) Merci d'avance.



28 commentaires pour “Manifeste pour un interlignage minimum syndical pour les blogs !”

  1. Xu dit :

    Je vote pour, 2 fois même !

  2. Rick Hunter dit :

    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.

  3. Darklg dit :

    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 ;)

  4. Ek0 dit :

    Euh moi je préfère carrément quand c’est plus serré !

  5. SuperDevy dit :

    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é …

  6. Bruno Bichet dit :

    @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.

  7. 1loup dit :

    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é…

  8. redpeppers dit :

    Rhaaa ! Tu m’a grillé mon billet ! :D 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 ;)

  9. Bouctoubou dit :

    @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!

  10. Article de salubrité publique qui devrait être reconnu par le Ministère de la Santé ainsi que par la fédération des ophtalmos !!

  11. Bruno Bichet dit :

    @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à ;)

  12. Jérémy dit :

    Je signe aussi, c’est plus clair en effet :)

    J’en tiendrais compte dans mes feuilles de style dorénavant :) Merci :)

  13. Darklg dit :

    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 … ;) )

  14. Bruno Bichet dit :

    @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

  15. Jérémy dit :

    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 :)

  16. redpeppers dit :

    @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 ..

  17. Thoams dit :

    Encore un bonne idée ! Merci Bruno :)

  18. […] 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 […]

  19. daria dit :

    Conseil judicieux :) appliqué…

  20. […] Manifeste pour un interlignage pour les blogs ! […]

  21. jisee dit :

    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

  22. gabyu dit :

    je propose également de limiter la largeur de la colonne principale des blogs. L’interlignage est une donnée relative à la largeur du texte.

  23. […] N’hésitez pas à faire tourner ce manifeste, en espérant qu’il aura plus de succès que mon Manifeste pour un interlignage minimum syndical pour les blogs ! […]

  24. Bruno Bichet dit :

    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 ;)

  25. Nico dit :

    Un très bon rappel sans aucun doute !

  26. […] mise en page modulaire avec le nombre d’Or est une bonne occasion pour mettre en pratique le manifeste pour un interlignage minimum syndical et les cinq règles pour améliorer l’affichage de vos textes. L’objectif est de […]

  27. […] Lire Manifeste pour un interlignage minimum syndical pour les blogs ! […]



Colophon

CSS & Webdesign est une publication irrégulomadaire à tendance hebdomadaire
éditée par Bruno Bichet qui carbure à WordPress et au café équitable.
Tous droits réservés © 2006 - 2011.

Contactez l'auteur du site