Mettre en forme le texte pour plus de lisibilité.
Réussir la lisibilité d'un texte sur un site web demeure souvent un problème, quelle que soit la qualité d'un site. Les éléments essentiels d'une bonne conception visuelle sont le choix de la typographie et de couleurs adaptées.
Image de Mise en forme du texte
 |
Lire une page web, c'est lire sur un écran. L'écran est l'interface grâce à laquelle l'internaute perçoit les informations. Malheureusement, ce n'est pas le support le plus approprié pour lire, car déchiffrer les caractères, les assembler pour comprendre les mots n'est pas aussi rapide que sur un support papier.
La lecture répétée et prolongée sur écran entraine en général une fatigue visuelle plus importante. Il faut donc veiller à augmenter la lisibilité visuelle et optimiser la perception du texte à l'écran.
Pour faciliter la lecture d'une page web, voici quelques règles typographiques et recommandations utiles.
1. Choisir une typographie web adaptée.
La typographie joue un rôle très important dans l'image donnée par votre site.
Des polices fantaisistes ou sérieuses donnent immédiatement le ton. Le principal objectif d'un site est de véhiculer de l'information, d'être lu et de donner aux internautes l'envie d'y revenir. Choisir une typographie apte à faire passer le message n'est pas si aisé.
Texte principal : la règle des 10 points.
Il n'y a pas de règle absolue pour la taille des polices de caractères, mais il faut s'assurer que le texte principal soit au moins égal ou supérieur à 10 points. Il est admis que pour le public général, les adolescents et les adultes, la taille de la police peut varier de 10 à 12 points. Pour les séniors et les jeunes enfants, l'emploi d'une taille de police comprise entre 12 et 14 points est préférable.
Si le texte principal est important, rien ne sert de réduire la taille de la police car votre texte ne sera pas lu. Mieux vaut essayer de résumer le texte, de mettre les informations importantes au début et de reléguer le texte le moins important à la fin.
Une exception est faite pour les mentions légales et mentions de bas de page pour lesquelles une taille inférieure peut être utilisée.
Pour les textes de taille inférieure à 12 points, évitez d'utiliser le lissage appelé aussi anti-crénelage. Il permet de lisser les bords des caractères pour les rendre plus net, mais il a l'inconvénient de rendre l'ensemble du texte plus flou.
Choix des polices.
Mieux vaut maîtriser l'affichage du texte à l'écran. C'est pourquoi choisir sa police parmi les 10 polices les plus utilisées et livrées avec les systèmes d’exploitation de base - Times, Helvetica, Arial, Verdana, Georgia, etc. - c'est opter pour une police standard, c’est maîtriser l’affichage du texte à l’écran et offrir une meilleure lisibilité aux utilisateurs. C'est s'assurer que les polices choisies sont disponibles sur l'ordinateur de l'internaute.
Une même taille de police peut faire apparaître un texte plus grand ou plus petit en fonction de la police utilisée.
Polices de caractères homogènes.
Des règles typographiques doivent être définies et utilisées de manière cohérente dans le site.
Exemples :
Pour les titres de page :
- les titres de page de niveau 1 seront écrits en : « police n, corps n,… ».
- Les titres de page de niveau 2 seront écrits en : « police n, corps n,… ».
- Les titres de page de niveau 3 seront écrits en : « police n, corps n,… ».
Les textes de navigation seront écrits en : « police n, corps n,… ».
Les autres textes seront écrits en : « police n, corps n,… ».
Pour chaque titre, la taille des caractères sera proportionnelle à son niveau (exemple : un titre de niveau 3 ne devra pas être écrit plus gros qu’un titre de niveau 1).
Eviter d’utiliser plus de trois polices de caractères différentes dans une même page. Un trop grand nombre de polices nuit à la lisibilité d'un texte et donc à la compréhension de la page.
2. Créer un fort contraste entre le texte et l'arrière-plan web.
Couleur de police / couleur d'arrière-plan.
Pour améliorer le confort visuel, une attention toute particulière doit être portée sur le contraste de la couleur du texte et celle de l'arrière-plan (background) d'un site Internet.
Il est important de créer un fort contraste entre le texte et l'arrière-plan web. Des couleurs trop proches où ayant les mêmes valeurs de gris transformées en noir et blanc sont inconfortables pour la lecture.
Le meilleur contraste est obtenu avec du texte noir sur fond blanc ou très clair. Un arrière-plan noir ou foncé avec du texte blanc présente en théorie un contraste identique, mais l'oeil est moins habitué à lire des texte négatifs. La rapidité de la lecture du texte s'en trouve légèrement réduite.
Les couleurs d'arrière-plan unies où avec des motifs très légers sont à préférer car les motifs d'arrière-plan plus marqués interfèrent avec les caractères et rendent la lecture difficile.
A titre d'exemples, le texte rose sur fond vert ou le texte bleu sur fond jaune sont parfaitement illisibles.
3. Gérer l'espacement des lettres, des mots et des lignes.
Espacement des lettres.
L'espacement entre les caractères, les mots, les lignes influe sur la lisibilité.
Des caractères trop près les uns des autres sont difficiles à différencier et rendent la lecture moins bonne.
Des caractères trop espacés empêchent le regroupement des lettres pour former les mots. La lecture est ralentie.
Espacement des mots.
Si les mots sont trop près les uns des autres, ils se distinguent mal et la ligne de texte est difficile à parcourir pour l'oeil.
Lorsque les mots sont trop espacés, le lien entre les mots pour former la phrase s'avère difficile à faire.
Dans l'usage, l’espace entre les mots doit être inférieur à l’espace entre les lignes. Si l’espace entre les mots est plus important que l’espace entre les lignes, l’oeil a du mal à parcourir les lignes (horizontales) ; il a plutôt tendance à descendre vers le bas de la page (car l’espacement entre les lignes crée des « couloirs verticaux » qui attirent l’oeil).
Espacement des lignes.
L'espacement entre les lignes permet de donner de la cohérence dans les blocs de texte.
Si les lignes sont trop espacées les unes des autres, la continuité de la lecture s'arrête à chaque ligne. Il devient difficile de poursuivre à la ligne suivante.
Si l'espacement des lignes n'est pas suffisant, il devient alors difficile de passer d'une ligne à l'autre. L'effet de chevauchement rend difficile la poursuite de la lecture.
4. Préférer les minuscules aux majuscules.
L'utilisation des capitales pour écrire un texte est à proscrire.
La reconnaissance des caractères et de la forme des mots est rendue plus difficile car les lettres ont toute la même hauteur. La lecture s'en trouve ralentie.
Lorsque le texte est constitué de plusieurs mots, ne mettre en majuscule que la première lettre du groupe de mots, même s’il s’agit d’un titre de rubrique ou d’un titre de page.
5. Faire ressortir les éléments du texte.
Eviter d’écrire en italique.
Ce style est difficilement lisible, voire illisible à l’écran ; cependant, il peut parfois s'utiliser uniquement pour des textes courts.
Pour accrocher l'oeil, plusieurs moyens sont à notre disposition. Deux techniques sont particulièrement efficaces à condition de bien les utiliser : utiliser les listes à puces et mettre en gras les caractères.
La liste à puces.
La liste à puces permet de bien structurer le texte. Les informations sont mieux organisées, mieux hiérarchisées et plus simples à mémoriser.
Les listes à puces permettent d'accélérer la lecture, les puces jouant un rôle de balises visuelles guidant l'oeil dans le parcours de la page.
Mais son utilisation ne doit pas être systématique. La liste à puce n'est pas là pour remplacer des paragraphes ou pour servir à titre décoratif, mais bien pour présenter des informations organisées. Au delà de deux niveaux la liste devient difficile à interpréter.
Mettre en gras les caractères.
Le caractère gras permet de mettre en valeur et de rendre plus visibles certains mots importants. Il convient de ne pas en abuser car cette technique de mise en valeur perdrait toute son efficacité. Il est donc conseillé de ne pas mettre en gras plus de deux ou trois mot dans un paragraphe. Ces mots forment ainsi un ensemble lu dans le même temps. Au contraire, trop de mots mis en gras compliquent la lecture et la freinent.
Ne pas souligner les mots ou les textes.
Le soulignement est uniquement réservé pour les liens hypertextes. L’utiliser autrement que pour des liens est déroutant pour l’utilisateur : il ne sait plus ce qui est cliquable et ce qui ne l’est pas. Si du texte autre que des liens doit être mis en évidence, utiliser du gras.
