Améliorer la lisibilité typographique

15 avril 2013,
par Romy Têtue

Mots-clefs associés à cet article :

La lisibilité du contenu à l’écran est capitale mais encore trop peu maîtrisée. Voici comment l’améliorer, en 7 points.

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é typographiques. 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.

Pouvoir zoomer le texte

La règle est de permettre le zoom du texte à 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é. 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. 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. Dans tous les cas, n’oubliez pas de prévoir des polices de substitution !

{#TITRE,#URL_ARTICLE,#INTRODUCTION}

Vos commentaires

  • Le 18 août 2013 à 21:25, par quote En réponse à : Améliorer la lisibilité typographique

    Voici un très intéressant retour d’expérience d’un développeur qui a amélioré la lisibilité de son blog :

    Nous nous trouvons sur un blog. Le boulot du blog est de publier de l’information. Le succès que nous cherchons ? Augmenter le taux de consultation, satisfaire les visiteurs avec du contenu de qualité.

    Ces objectifs ne seront clairement pas atteint en dessinant une belle interface. Non, la lisibilité, c’est ce qui nous intéresse et c’est à 95 % dans la typographie que nous allons trouver une solution.

    […]

    Les modifications réalisées m’ont pris environ 2 heures. Bien plus court que de créer une nouvelle interface. […] 2 heures d’investissement pour passer d’un blog difficilement lisible à quelque chose de beaucoup plus accessible, c’est bien peu de choses.

  • Le 5 octobre 2013 à 01:42, par quote En réponse à : Améliorer la lisibilité typographique

    Et un témoignage d’une utilisatrice dyslexique, Monique Brunel, en écho à ce sujet.

Répondre à cet article

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici
  • Raccourcis : {{gras}} {italique} -liste [bla->url] <q> <quote> <code>.

Suivre les commentaires : RSS 2.0 | Atom