Améliorer la lisibilité typographique

De nombreux sites sont difficiles à lire pour les internautes. N’êtes-vous pas souvent penché en avant sur votre chaise pour mieux lire à l’écran ? Il est pourtant assez simple et rapide d’améliorer cela. Voici quelques règles à connaître pour garantir une bonne lisibilité typographique. Celles-ci s’appuient, entre autres, sur les critères d’accessibilité.

Respecter les règles de la langue

Avant toute chose, il faut appliquer les règles de la langue dans laquelle on s’exprime, tant orthographiques que typographiques, pour éviter les erreurs de compréhension. N’oubliez donc pas d’accentuer les capitales et majuscules. Mais on évitera de composer des textes entiers en lettres capitales, car leur silhouette ne facilite pas la lecture (voir Des minuscules sinon rien, agence Graphèmes, 2010).

Pouvoir zoomer le texte

Le texte doit pouvoir être agrandi de 200 %. Pour cela, il faut techniquement exprimer les tailles de caractères en unités relatives (em, %), et veiller à ce que le texte reste lisible une fois zoomé. Celui-ci doit pouvoir s’écouler sur plus (ou moins) de lignes que prévu sans dégrader la composition. C’est trop rarement bien fait et les internautes s’en plaignent.

Le plus simple est encore de laisser le texte principal à 100 %, c’est-à-dire à la taille définie dans chaque terminal, ordinateur de bureau ou smartphone, dont les valeurs par défaut sont d’une bonne lisibilité (voir : Texte à 16px : trop grand ?). Physiquement 16px à l’écran de bureau équivalent à 11pt imprimé. Laissez donc le texte couler dans sa taille naturelle !

Ne pas justifier

Les études montrent qu’un texte en drapeau est plus lisible, quelque soit le support, web ou papier. Il ne faut pas justifier le texte sur le Web, où il est impossible de gérer correctement l’approche ni les césures, ce qui freine la lecture.

Augmenter l’interlignage

Un interlignage trop faible ralenti la lecture, or celui par défaut des navigateurs est trop faible. En augmentant la hauteur de ligne à 1,5 fois la taille du texte, au moins, les pages deviennent tout de suite plus lisibles. Espacez de même les paragraphes.

Largeur des lignes

Si les lignes sont trop longues, le lecteur a du mal à bien voir où une ligne commence et termine. La largeur de la colonne de texte est fonction de la largeur d’écran, particulièrement en responsive webdesign, mais on veillera à garder entre 60 et 80 caractères par ligne.

Toujours dans l’idée de faciliter la lecture et la concentration, laissez 25 à 50 % d’espace « blanc » sur chaque page. Regroupez et aérez.

Contraster

La lisibilité est aussi affaire de contraste. Celui-ci doit être suffisamment fort entre le texte et son arrière-plan, avec un rapport de contraste entre 3:1 et 4,5:1 (voir Contrastes de texte, OpenWeb). Pour les liens textuels, le plus simple est de les souligner par défaut.

Police de caractères

Le choix de la police de caractères est important. Évitez les polices trop exotiques, plus difficiles à déchiffrer. Privilégiez celles conçues pour l’écran, avec hauteur d’x élevé et contre-poinçon bien ouvert, comme Verdana, Geneva, New York, Georgia et Lucida Grande (mais Stop Arial 11px !). Dans tous les cas, n’oubliez pas de prévoir des polices de substitution !