Lisibilité des textes sur le web : 10 erreurs à éviter

• 1. Justifier le texte (ou pire, les titres). Acrimed est rendu à moitié illisible par cette erreur. Sinon on se retrouve avec des textes éclatés par de gros blancs entre les mots, surtout sur téléphone mobile. Sur le web, comme on ne maîtrise ni le support de lecture ni la césure, on évite de justifier. Laissons couler le texte…

• 2. Limiter le contraste entre les lettres et le fond. Pratique rarement rencontrée heureusement aujourd’hui. On la trouve sur l’Humanité dont le texte est en gris léger et la typo plutôt fine. Sur les questions de contraste, super synthèse sur OpenWeb.

• 3. Une taille de texte trop petite ou trop grosse. Aussi intéressants soient leurs articles, les 13 px de CQFD Journal sont bien insuffisants pour lire leurs papiers avec plaisir sur le web. Un encouragement pour s’abonner au papier certainement ! A l’inverse, la Merriweather utilisée par Acrimed a une hauteur d’œil élevée, équivalente à un corps 18 de Georgia. En 19,6 pt, ça oblige à se reculer par rapport à l’écran. Ou à baisser la taille de la typo, une action compliquée sur téléphone où il faut être motivé pour lire notre site préféré de critique des médias !

Pour la même taille de corps, Merriweather (à g.) paraît bien plus grosse que Georgia (à dr.)

• 4. Une longueur de ligne trop longue. Au bout d’un certain nombre de caractères, l’œil se fatigue. Surtout il retrouve difficilement la ligne suivante au sein d’un paragraphe. L’optimum se situe autour de 70 signes par ligne (on compte aussi les espaces) pour la lecture sur ordinateur, et de 30-40 pour les smartphones. Il faut à tout prix éviter les lignes supérieures à 100 caractères, comme sur Rebellyon. Esthétiquement c’est aussi une cata.

• 5. Des blocs sans fin de texte tout gris. Sur papier, on peut marquer le début ou la fin des paragraphes de plein de manières différentes. Au Moyen-Âge, on n’allait même pas à la ligne. Un ¶, aussi appelé pied-de-mouche, suffisait. Le papier permettait aussi de varier la maquette de chaque page.
  

Aujourd’hui, avec la monotonie du web et les maquettes d’articles générées automatiquement, c’est pas mal de proposer des respirations aux lecteur·ices. Sauter une ligne entre chaque paragraphe est nécessaire [1]. À l’intérieur des paragraphes, il est important de rythmer le texte, avec du gras, de l’italique. À l’inverse, on évitera aussi de séparer chaque phrase d’un saut de ligne ou de tout mettre en gras.

• 6. Jouer avec l’interlettrage des caractères. Les polices typographiques sont conçues de manière extrêmement précise, y compris dans les espaces entre les mots ou les lettres. S’il est possible de s’amuser pour concevoir un logo ou même l’affichage lds titres, il vaut mieux respecter le travail de la personne qui a conçu la fonte pour le corps de texte. Médiacités, il y a quelques semaines encore, affichait un interlettrage négatif sur son corps de texte. La lisibilité en était réduite. Un petit message et ça a été réglé. N’hésitez pas à signaler (gentiment) des soucis de lisibilité ou d’accessibilité aux gens qui animent des sites. On n’a pas tous et toutes derrière nous des armées d’ingénieurs ergonomes comme Facebook, on peut tous et toutes se planter, etc.

• 7. Utiliser une linéale pour les textes longs. Il existe plein de systèmes de classements de polices de caractères. Pour simplifier vite fait, on utilise pour le texte des caractères de labeur, soit des linéales soit des « sérifs », ou polices à empattements. L’objectif de ces petits compléments sur les caractères est de faciliter la lecture par groupes de lettres. L’ajout d’informations permet d’identifier chaque lettre plus rapidement. Si l’amélioration est très relative sur les textes courts où on peut sans problème utiliser une linéale, elle est très nette sur les textes de plusieurs milliers de signes [2]. Surtout dans une langue comme le français dont les mots sont plus longs que l’anglais.

• 8. Un interlignage trop court ou trop grand. L’unité de base d’un texte, c’est le paragraphe. C’est ce qui permet de vérifier la lisibilité. Et L’un des éléments importants, souvent réglé à l’arrache, c’est l’interlignage. Il faut l’évaluer en fonction de la force de corps (la taille du texte), de la longueur de ligne et éventuellement de la typo. Sa valeur se situe en général entre 1,3 et 1,7 fois la taille du corps. Si les lignes sont un peu longues, il faut tendre vers 1,7, si elles sont courtes, vers 1,3. Le jeu cité ci-dessous permet d’exercer son œil.

• 9. Choisir des vieilles typos usées. Les premiers âges de l’informatique en général ont fait beaucoup de mal à nos yeux. On était jusque-là habitué·es à voir sur papier des centaines de typos différentes. Les systèmes d’exploitation de nos ordis ont limité leur nombre à une dizaine. Une typo fabuleuse comme le Times est aujourd’hui peu agréable à lire, on l’a trop vue. Pareil pour l’Arial (coucou La Brique), cette pâle copie de l’Helvetica, ou encore la Verdana (hello Cric-Grenoble). Il est aujourd’hui possible de choisir parmi des centaines de typos, sérifs ou linéales, adaptées au texte courant. Leur intégration sur les pages web a été considérablement améliorée. Aucune des typos imposées il y a quelques années ne devrait aujourd’hui être utilisée pour du texte.

• 10. Multiplier les typos à télécharger. Corollaire du point 9, on peut aujourd’hui utiliser plein de typos sur son site. Attention, ça devient vite lourd et long à afficher. Surtout si on demande aussi à l’utilisateurice de télécharger une ou deux autres typos pour les titres, les menus, etc. (pensez d’aileurs à « Optimiser les police web) ». Pour le texte, il faut les 4 styles de base (normal, gras, italique, et gras italique). On peut donc encore se contenter de la Georgia, seule vieille typo encore supportable, probablement plus pour longtemps. Mais elle remplit encore cette exigence : la meilleure des typos de texte, c’est celle qui ne choque pas nos yeux, celle qui se fait oublier au profit du contenu et n’alourdit pas trop le téléchargement de nos pages web ! Chaque système d’exploitation propose maintenant de très belles familles de caractère. Il faut donc accepter que le rendu soit différent selon les supports.

Ressources

Trouver des typos. Typ.io permet de voir des fontes en action à travers des exemples de sites, et leur combinaison avec d’autres typos. Le site donne aussi des conseils d’utilisation de chacune, et s’il mélange typos commerciales et libres, il signale où on peut les trouver quand elles sont gratuites (sur FontSquirrel.com et Google Fonts. Il propose aussi des tags qui permettent de trouver rapidement un peu d’inspiration, par exemple pour visualiser les typos utilisées par les sites d’infos, de The Intercept à Politico.

Se former en jouant. « Le triangle équilatéral du parfait paragraphe » est un excellent jeu en ligne pour exercer son œil. Il permet d’apprendre à régler le bon équilibre entre taille de texte, longueur de ligne et interlignage. Les explications et conseils de l’auteur sont disponibles en anglais. PCe site propose aussi deux autres jeux autour de la typographie, un memory et un quizz en anglais, How much do you know about web typography.

Changer la typo d’une page web. Il suffit de faire un clic droit sur le texte dans son navigateur, et d’aller jusqu’à "Inspecter" ou "Examiner". Dans la fenêtre qui s’affiche, si on connaît les deux-trois règles CSS correspondantes, on peut facilement changer la taille du texte, la longueur des lignes, l’interlettrage, la famille de caractères. Pratique pour faire des tests, ou réaliser des captures d’écran à destination des réseaux sociaux. Des plugins dédiés existent sur Chrome ou Firefox (CSS Peeper, Fontface Ninja…).

Lectures.

• un peu daté mais toujours intéressant : http://webtypographie.net/, traduction du site-ressource http://webtypography.net/ The Elements of Typographic Style Applied to the Web ;
• http://typographisme.net/, malheureusement plus mis à jour ;
• les cours de Formes Vives, les maquettistes géniaux d’Article 11 papier, regorgent d’infos, de petites infographies bien pensées. Les pages de ce cours de typographie sont une bonne introduction : 1, 2 ;
• sur le web, la plupart des ressources actualisées sont en anglais. Pour les maniaques de la typo le site Typewolf est incontournable, pour les autres on trouve beaucoup d’articles intéressants sur des sites sur le design web.

Avez-vous des avis différents ? D’autres ressources ou conseils de lecture ?

A.