Webdesign, lisibilité, typographie et rédaction web

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

Webdesign, lisibilité, typographie et rédaction web

Une grande partie des notions relatives à la lisibilité des contenus sur les écrans date des débuts du web. En 1997, Jakob Nielsen déclarait que la lecture sur écran était 25% plus lente que sur le papier. Depuis cette époque, la technologie n’a cessé d’évoluer et la qualité des écrans et des polices de caractères va dans le bon sens. Il est temps de se poser des questions sur la lisibilité des caractères, le sens de lecture d’une page, les valeurs optimales pour le corps des textes et leur interlignage, le nombre de fontes que l’on peut utiliser dans une page et la rédaction pour le web.

Lisibilité des caractères
Les caractères avec des empattements sont réputés pour offrir une lisibilité supérieure à ceux qui n’en possèdent pas. Les empattement guideraient l’œil. Pourtant dans le même temps, on entend souvent dire que l’on ne déchiffre pas les mots lettre à lettre mais que l’on reconnait la forme globale des mots. Il manque donc un paramètre pour démontrer la supériorité des caractères possédant des empattements.

Il faut savoir qu’au début du XXe siècle, il y avait effectivement une différence notable entre la lecture des caractères serifs et sans-serif : ces derniers faisaient tout juste leur apparition. En matière de lisibilité, les habitudes sont un critère important.

→ Lire Le petit journal permanent de la TypOgrApHiE !

Lecture en «F» ou en «Z» ?
Certaines études utilisant l’eye-tracking ont démontré que les résultats issus de la page du moteur de recherche Google étaient pour ainsi dire «scannés» par l’œil selon un parcours en «F». Pour autant, vos pages doivent-elles se contenter d’un seul sens de lecture ? Non ! Le parcours en «Z» d’une page imprimée est sans doute encore d’actualité sur le web. La question étant plutôt de placer les éléments importants de votre communication au-dessus du fold plutôt qu’au-dessous.

→ Lire 10 principes pour un design web efficace et Les habitudes de scrolling à la loupe (Eyetracking).

Interlignage à 120% ou 150% ?
Dans l’imprimé, on utilise couramment des valeurs d’interlignage comprises entre 100% et 120% de la taille des caractères pour les pavés de textes destinés à la lecture continue. A l’écran, ces valeurs sont trop faibles. En raison des contraintes de la lecture à l’écran (définition, contraste, luminosité, distance de lecture), il est préférable d’utiliser un interlignage compris entre 140% et 150% par rapport au corps de la fonte utilisée.

A moduler évidemment selon l’œil, la hauteur d’«x» des caractères, la largeur des pavés de textes, le nombre de mots et la difficulté intrinsèque des concepts abordés. Un nombre de caractères compris entre 60 et 66 par ligne est idéal pour la lisibilité et l’intelligibilité des textes. On peut aussi estimer la largeur des pavés à environ 40 fois la taille du caractère qui le compose (soit 640 pixels pour un corps de 16 pixels).

→ Lire Manifeste pour un interlignage minimum syndical pour les blogs !

Taille des caractères
La distance qui nous sépare du support de lecture est un élément essentiel qui est rarement évoqué pour expliquer la différence qu’il y a entre lire à l’écran et sur le papier. C’est pourtant cette distance qui a été retenue pour définir la taille par défaut des polices utilisées par les navigateurs : les 16 pixels que certains trouvent trop importants à l’écran ne sont finalement que l’équivalent des 12 points sur le papier, si l’on tient compte que l’œil n’est pas à la même distance dans les deux cas.

→ Lire 5 règles simples pour améliorer l’affichage de vos textes.

Nombre de fontes par page
Au-delà de trois fontes, il est généralement admis qu’une page web ou imprimée manque de… de quoi au juste ? De classes ? De lisibilité ? D’intelligibilité ? Bref, on ne sait pas trop. Mon conseil : utilisez autant de fontes que nécessaire, selon votre projet. Ne vous limitez pas à-priori. Expérimentez : il en restera toujours quelque chose ! Il sera toujours temps de faire le ménage dans un deuxième temps. Notez que c’est la même chose pour l’utilisation des couleurs.

→ Lire Des ensembles de polices cohérents pour le web et La typothèque idéale par Smashing Magazine

Rédaction web
La lecture à l’écran n’est pas si différente que sur le papier. Loin d’être des sœurs ennemies, ces deux lectures sont plutôt des sœurs jumelles dizygotes. En conséquence, il n’y au aucune raison pour que l’écriture pour le web soit si différente que celle destinée au papier. Si vous maitrisez l’enchainement des idées, la grammaire et l’orthographe, votre prose sera lisible sur tout les supports !

→ Lire Bien rédiger [ pour le web ] [ tout court ]

Justification des textes
L’alignement des textes au «fer à gauche» garantit un espacement constant entre les mots, ce qui améliore la lisibilité. Les textes justifiés offrent quant à eux l’avantage de produire des marges régulières à droite et à gauche, donnant au bloc de texte la forme d’un rectangle très net. HTML n’offre aucun mécanisme pour gérer les césures (je ne parle même pas des veuves et les orphelines.) ce qui entraine souvent des pavés de texte plein de trous (lézardes)…

→ Pour y remédier, jetez un œil sur Hyphenator — Gérer les césures avec Javascript.

Sortez du cadre !

Entre les idées toutes faites et les idées reçues, il reste de la place pour exprimer sa créativité : mélangez les polices de caractères et les couleurs, osez les structures de phrases alambiquées et l’imparfait du subjonctif (juste ce qu’il faut, hein ?). Jouez avec le sens de lecture pour maintenir l’attention de vos lecteurs et sortez du cadre (attention à la tête). Bref, soyez vous-même. Enfin, là, demandez quand même autour de vous, si c’est judicieux :-D

A suivre…

Linkographie

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.



33 commentaires pour “Webdesign, lisibilité, typographie et rédaction web”

  1. William dit :

    Cela m’a l’air bien croustillant, j’entame le marathon ^^ Au passage, un article/tuto sur le même sujet (Typo) que j’ai récemment eu l’occasion de lire: http://spyrestudios.com/applying-a-clean-imageless-design-to-an-article-part-i/

  2. Nicolas Friedli dit :

    Le nombre de caractères devrait tourner autour de 60 par ligne. Pour les mots, ce serait plutôt entre 10 et 12.

    • br1o dit :

      Oui, bien sûr, sachant qu’en français, le nombre moyen de lettres par mot est de 6, ce qui sert d’ailleurs de base pour calculer l’encombrement d’un texte. Toutefois, le nombre de caractères évite de tomber dans les pièges posés par les contenus médicaux ou juridiques qui possèdent des mots plus longs que la moyenne.

  3. [...] This post was mentioned on Twitter by Bruno LesBonsTuyaux, Clément Roy, Colibr-e, Morgan Carles, Hype Hope and others. Hype Hope said: RT @L_Demontiers: Webdesign, lisibilité, typographie et rédaction web http://bit.ly/etuvNT [...]

  4. Glop! dit :

    très bon article, et bonne références, merci!

  5. Enfin un article clair pour les néophytes !!! allez, je le retweet !!

  6. [...] Webdesign, lisibilité, typographie et rédaction web Une grande partie des notions relatives à la lisibilité des contenus sur les écrans date des débuts du web. Source: css4design.com [...]

  7. Salutations du Québec! Mes 30 élèves de 17 ans auront le plaisir de découvrir cette note et vos nombreuses références sur l’ergonomie web. Je suis gestionnaire de projets et j’ai le plaisir d’enseigner la gestion de projet à un groupe, une heure par semaine.

    Au plaisir!

    Stéphanie Tremblay

  8. [...] Webdesign, lisibilité, typographie et rédaction web 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 ? [...]

  9. [...] Webdesign, lisibilité, typographie et rédaction web 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 ? Webdesign Programmation web design hebergement hébergement [+] Stratégie principes quelques hebergement recherche tutoriel serveur apache Inspiration drôles cloud réseau IP introduction new documents convertisseur astuces PHP light validation Chrome samples LaTex documentation HTML lovely newsletter html5 Business relation bonnes entreprise htaccess rename css déroulant htaccess etc. redirection control buddypress réseau html images flash gestion Algorithmique bienvenue mathématiques dessiner Ergonomie diagrams css xhtml html5 fonts beautiful blog web design photoshop create RESSOURCES (webdesign) space lighting Curiosité ingenuity clayton Icones packs search police windows Icones qualité chargement icônes Icons ultimate Menu navigation grungy images Icons silvestre Site ホームページ ネットマニア 素材共同組合 Menu build hover Icons minimalist photoshop useful Licence globale midem droit vente Liberté d'expression : futur et affontements livre ebook attaque Net Neutrality confirme Censure buisson matignon charte Censure, filtrage d'Internet Ici et ailleurs italie Gardez votre Liberté savoir storytelling facebook E-shop inspiration designer création graphisme/webdesign home • contact • blog • fb • twitter to experience pearltrees activate javascript. [...]

  10. [...] jQuery("#errors*").hide(); window.location= data.themeInternalUrl; } }); } css4design.com – Today, 11:02 [...]

  11. [...] background-position: 50% 0px; background-color:#222222; background-repeat : no-repeat; } css4design.com (via @fredocher) – Today, 8:52 [...]

  12. [...] background-position: 50% 0px; background-color:#222222; background-repeat : repeat; } css4design.com – Today, 9:33 [...]

  13. [...] background-position: 50% 0px; background-color:#222222; background-repeat : no-repeat; } css4design.com – Today, 10:00 [...]

  14. [...] background-position: 50% 0px; background-color:#222222; background-repeat : no-repeat; } css4design.com – Today, 9:12 [...]

  15. [...] background-position: 50% 0px; background-color:#222222; background-repeat : no-repeat; } css4design.com – Today, 8:56 [...]

  16. [...] background-position: 50% 0px; background-color:#222222; background-repeat : no-repeat; } css4design.com – Today, 7:56 [...]

  17. [...] background-color:#222222; background-repeat : repeat; } css.4design.tl (via @gRaphParis) – Today, 11:48 [...]

  18. [...] background-position: 50% 0px ; background-color:#222222; background-repeat : no-repeat; } css.4design.tl (via @gRaphParis) – Today, 2:16 [...]

  19. [...] background-position: 50% 0px ; background-color:#222222; background-repeat : no-repeat; } css.4design.tl – Today, 11:12 [...]

  20. [...] background-position: 50% 0px ; background-color:#222222; background-repeat : no-repeat; } css.4design.tl – Today, 4:03 [...]

  21. [...] } #themeHeader #titleAndDescription * { color: black; } css.4design.tl – Today, 4:21 [...]

  22. [...] } #themeHeader #titleAndDescription * { color: black; } css.4design.tl – Today, 9:38 [...]

  23. [...] : Webdesign, lisibilité, typographie et rédaction web Catégorie : Design / Graphisme, Trucs & astuces Mot-Clé : création, design [...]

  24. [...] Une grande partie des notions relatives à la lisibilité des contenus sur les écrans date des débuts du web.  [...]

  25. [...] Webdesign, lisibilité, typographie et rédaction web [...]

  26. [...] Une grande partie des notions relatives à la lisibilité des contenus sur les écrans date des débuts du web.  [...]

  27. Tancrède dit :

    Être accueilli sur une page avec en gros « FAITES UN DON » avant même de dire bonjour, m’horripile au plus au point !

    Pour moi c’est no way !

  28. Tancrède dit :

    « haut » ;)

Laissez un commentaire

Vous pouvez utiliser les balises HTML suivantes : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Les commentaires sont publiés sous votre pleine et entière responsabilité et ne doivent pas contrevenir aux lois et règlementations en vigueur. Les propos racistes ou antisémites, diffamatoire ou injurieux, divulguant des informations fausses, relatives à la vie privée d'une personne ou utilisant des oeuvres protégées par les droits d'auteurs ne sont pas les bienvenus et seront modérés sans modération.

Merci d'être constructif et n'oubliez pas : « sans la liberté de ramer il n'est point d'éloge flotteur ! »



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