• 8 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 03/07/2024

Rendez vos textes lisibles

La lecture est une activité quotidienne. Mais, souvenez-vous, il faut plusieurs années de pratique pour maîtriser la lecture. C’est une activité complexe : il faut identifier les lettres, les lier à des sons, comprendre l’assemblage des lettres et des sons, etc.

En bref, c’est donc un processus cognitif complexe.

L’œil et la lecture sur écran

Vision fovéale et vision périphérique

Les images que nous percevons du monde extérieur se fixent sur la rétine. Celle-ci contient deux zones distinctes : la fovéa et la périphérie.

  • La fovéa correspond à une toute petite zone de la rétine au fond de l’œil : 0,4 mm de diamètre. C’est elle qui permet de voir de façon nette, selon un angle visuel de 2 à 4 degrés. C’est donc cette fovéa qui nous permet de lire, de percevoir les détails d’un objet ou d’une personne.

  • La périphérie se situe tout autour de la fovéa, elle renvoie une vision floue. Mais la vision périphérique permet de prendre conscience de son environnement et de réagir à celui-ci. La vision périphérique est notamment très sensible aux couleurs, aux mouvements et à la luminosité.

    • Faîtes le test : placez vos mains à une trentaine de centimètres de votre tête sur les côtés. Si vous les maintenez fixes, vous ne les verrez pas, mais dès que vous les bougez, vous les apercevrez. Cela s’explique par le fait que notre vision périphérique est très sensible aux mouvements.

Comme la vision périphérique est très sensible aux mouvements et à la couleur, la lecture peut être gênée par des images en mouvements ou très colorées aux bordures de l’écran. Un slider par exemple, est très gênant pour se concentrer sur des informations à lire.

Mais vous pouvez également vous servir de la vision périphérique pour attirer l’œil de votre participant. Des notifications colorées sont par exemple souvent utilisées pour alerter l’utilisateur, comme ici sur YouTube :

Copie d'écran : barre de notification Youtube, en haut à droite de l’écran.
Copie d'écran : barre de notification Youtube, en haut à droite de l’écran.

Ces notifications ne s’offrent pas à la vue des utilisateurs en apparaissant en plein centre, mais en bordure de l’écran. La couleur rouge est faite pour attirer le regard de l’utilisateur grâce à sa vision périphérique.

Saccades et fixations

Lorsque nous lisons, nos yeux alternent saccades et fixations. Tout cela se situe au niveau de la fovéa.

  • Les saccades correspondent aux mouvements des yeux qui permettent de fixer un mot au centre de la fovéa. Elles sont très rapides, c’est pour cela que nous n’en avons pas conscience :

    • 20 millisecondes pour passer d’un mot à l’autre,

    • et 80 millisecondes lorsque l’on change de ligne.

  • Les fixations sont les arrêts des yeux sur les mots, elles permettent la prise d’information. Les fixations sont plus longues, de l’ordre du quart de seconde. Il est ainsi possible d’effectuer 1 000 prises d’information par heure. Ce sont ces fixations qui vous permettent de lire un texte en identifiant les lettres affichées.

Gardez ça en tête quand vous mettez du texte sur une page, surtout quand vous devez calibrer la longueur des lignes.

Spécificités de la lecture sur écran

Tous les rédacteurs Web le savent, on n’écrit pas pour le Web, comme on écrirait pour un magazine papier. Les usages, mais également la facilité à identifier les lettres sont différents. Nous lisons 25 % moins vite sur écran et cette lecture entraîne une fatigue visuelle bien plus rapide que sur papier.

Voici quelques conseils de conception pour éviter la fatigue visuelle de vos utilisateur, selon l’INRS (Institut National de Recherche et de Sécurité) :

“Un affichage sur fond clair est à privilégier car :

  • il est moins fatigant pour la vue qu’un affichage sur fond sombre

  • les reflets sont peu visibles

  • la couleur de fond est la même que celle des documents papier

Avec un écran brillant d’ordinateur portable, un affichage sur fond clair est impératif.

Pour la plupart des tâches en bureautique, il convient de ne pas utiliser plus de 2 ou 3 couleurs en plus de celle du fond. La couleur bleu est à éviter pour les caractères de petites polices et pour le curseur car elle est la moins bien perçue lorsque le regard se fixe ou avec l’avancée en âge. Par ailleurs, il faut veiller à ce que le contraste entre les caractères et le fond soit suffisant.”

Quels facteurs facilitent la lisibilité sur écran ?

Contrastes

Tout d’abord, le contraste entre la couleur du fond et la couleur du texte est essentiel. Plus le contraste sera grand, plus la lecture sera facile (texte noir sur fond blanc).

Mais également, il est plus aisé de lire un texte écrit en noir sur fond blanc que l’inverse. Voyez par vous-même :

Contraste texte fond
Contraste entre le texte et le fond

Couleurs

Si les goûts et les couleurs ne se discutent pas, pour autant, certaines couleurs ou associations de couleurs sont moins bien perçues.

L’INRS suggère d’éviter le bleu pour des éléments à fixer type textes.

L’association de couleurs complémentaires est également à proscrire :

  • orange et bleu,

  • rouge et vert,

  • jaune et violet.

Contrastes texte fond
Contrastes entre le texte et le fond

Préférez donc un texte noir sur un fond blanc, surtout pour de petits caractères.

Police de caractère

La police de caractère détermine un certains nombre de facteurs qui peuvent faciliter, ou au contraire, rendre la lecture plus difficile :

  • espacement entre les lettres

  • hauteur des lettres

  • type de police : avec ou sans serif

Serif

Il existe deux types de polices : avec ou sans serif. Les polices dites, avec serif, sont celles qui présentent un empattement, par exemple Times New Roman. A contrario, les polices sans serif, comme Arial ou Calibri, sont plus minimalistes. Voici quelques exemples :

Police avec et sans serif
Polices avec et sans serif

Il est largement diffusé que les polices sans serif seraient plus lisibles sur écran. Or, les études montrent qu’il n’y a pas de différence. Utilisez donc une police lisible, c’est-à-dire où les lettres se détachent bien les unes des autres. Pour ne pas prendre de risques, choisissez une police classique comme Arial, Calibri ou Times.

Taille des caractères

La taille des caractères est évidemment également un facteur de lisibilité de vos textes. Il n’y a pas pour autant de règles d’or à ce sujet car la taille des caractères est perçue en fonction de la police choisie.

En effet, deux polices de même taille peuvent être plus ou moins grosses. En fait, il faut considérer la hauteur d’x. Cette hauteur correspond à la hauteur des petites lettres de la police : x, c, a…

Pour une même taille, en fonction de la police, le texte sera plus ou moins lisible. Gardez simplement en tête qu’avec l’âge, vos utilisateurs auront besoin d’une police suffisamment grande. Si vous hésitez entre deux tailles, préférez donc la plus grande, les caractères n’en seront que plus lisibles pour tout le monde.
En général, c’est l’espacement et la hauteur des lettres (hauteur d’x) plutôt que la typographie, qui permettent de mieux distinguer les lettres, et donc, facilitent la lecture, surtout sur des textes de petite taille.

Modifications typographiques

Quand à l’utilisation du gras et de l’italique : le gras reste lisible tandis que l'italique pose problème pour la lisibilité.

Gras et itamique
Gras et italique

Voilà, tout est dit ! :)

En résumé

Nous avons vu dans ce chapitre que plus vos textes sont courts et gros, plus vous avez de marge de liberté sur la police de caractère, les modifications typographiques (italique, gras) et la couleur. L’espacement et la hauteur des lettres permet de mieux les distinguer, et donc, facilite la lecture, surtout des textes de petite taille.

Plus la police sera petite, plus vous aurez besoin de respecter ces conseils. Il en est de même pour la longueur des textes. Plus un texte est long, plus vous aurez besoin de maximiser sa lisibilité, pour espérer être lu et compris.

Pour aller plus loin

    • Pour aller plus loin sur la physiologie de l’œil, je vous conseille cette vidéo sur la physiologie et le fonctionnement de l’œil publiée par l’INSERM : 

Et si vous obteniez un diplôme OpenClassrooms ?
  • Formations jusqu’à 100 % financées
  • Date de début flexible
  • Projets professionnalisants
  • Mentorat individuel
Trouvez la formation et le financement faits pour vous
Exemple de certificat de réussite
Exemple de certificat de réussite