Design & Graphisme

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. Dès 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 leurs interlignages, 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 classe ? 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 maîtrisez l’enchaînement 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 entraîne 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 😀

A suivre…

Linkographie

Publié le par Bruno Bichet