Sur Internet, 95% du contenu est du texte. Partant de ce constat, on comprend vite que, dans la création de sites Web, il est essentiel d’accorder une grande attention à la lisibilité du texte, c’est-à-dire à sa capacité à être compris par le lecteur.
La lisibilité dépend de plusieurs facteurs complémentaires : le choix de la ou des polices de caractères, la mise en forme des textes, la structuration des contenus dans la page et du site dans son ensemble, la rédaction. Sur un support imprimé, le respect de règles pour chacun de ces facteurs peut garantir une bonne lisibilité. Sur le Web, des obstacles se rajoutent : l’aspect du texte se modifie en fonction du système d’exploitation, du navigateur et de la résolution de l’écran du lecteur, ainsi que des polices disponibles sur son poste. De plus, non seulement le support informatique transforme le texte, mais la lecture elle-même change. Alors que la lecture sur papier procède par séquence, du haut au bas de la page, sur l’écran, on effectue un scan de la page à la recherche de points de repère. L’œil passe rapidement d’un contenu à l’autre, d’une page à l’autre, en fonction de l’information recherchée. La capacité à lire des textes longs diminue et l’on privilégie des textes courts.
Autant de changements affaiblissent la lisibilité d’un texte sur écran par rapport à celle d’un texte imprimé. Même s’il a été démontré qu’avec le progrès technologique, l’écart de vitesse se réduit, la lecture sur le Web demeure plus pénible et fatigante.
Que faire?
Ces obstacles imposent une révision des critères de la lisibilité. C’est pourquoi, lors de la conception de sites web, il essentiel de maîtriser correctement l’art de se servir des caractères pour conférer à l’information une forme écrite, en d’autres mots : la typographie. Son but est de rendre un document intelligible et lisible, tout en soignant l’esthétique de la page dans son ensemble, et son efficacité influence directement la rapidité d’acquisition du lecteur. « Le design n’est pas inhérent à l’aspect. Il est inhérent au fonctionnement », avait d’ailleurs affirmé Steve Jobs, le fondateur d’Apple.
De quoi faut-il donc tenir compte pour qu’un texte soit agréable à lire? Comment l’organiser dans un page pour qu’il donne envie au lecteur de le suivre, en évitant tant que possible la fatigue visuelle? Voici les bonnes pratiques et les conseils techniques à suivre.
D’abord : le choix des polices
Une étape primordiale de la conception graphique d’un site est le choix des polices. En théorie on peut utiliser n’importe quel caractère, mais il faut veiller à ce qu’il soit disponible sur le poste de l’internaute et qu’il soit lisible à l’écran.
Les polices se divisent en « serif » ou « sans serif ». Dans une police avec empattements (serif), on distingue des petites pattes qui prolongent la fin des traits d’un caractère, qui sont censées guider l’œil dans la lecture. Une police sans serif présente des caractères tracés uniquement par des lignes et des barres basiques.
On a longtemps considéré que seules les polices sans serif permettaient la lecture sur écran. En effet, sur un vieil écran avec une résolution médiocre de 600 x 400 pixels, lire une police avec serif était presque impossible. Les caractères étaient mal définis et les empattements pixélisées. On a donc longtemps privilégié des polices sans serif (Verdana, Arial, Helvetica, Tahoma, etc.) ou avec serif optimisées pour les écrans (Georgia). Aujourd’hui, le problème des empattements n’existe presque plus, parce que les écrans ont des résolutions plus performantes.
Pour avoir la certitude d’utiliser une police installée par tous les navigateurs, il convient d’en choisir une « web-safe », comme Arial, Times New Roman, Verdana, Georgia, Lucida, Courier New, etc. Mais cela ne suffit pas. En effet, grâce à Css (ou feuille de style en cascade, un langage informatique qui définit la présentation des pages HTML), le développeur demande à l’ordinateur de sélectionner une suite de fontes (une famille) de la plus spécifique à la plus générique. Le navigateur va donc tenter d’afficher les pages avec la police souhaitée ; sinon, il essayera les autres de la famille, jusqu’à ce qu’une soit disponible.
Il est donc important de bien choisir la famille de polices. Voici quelques exemples[1] :
Polices à empattements (serif)
font-family: « Times New Roman », Times, « Liberation Serif », FreeSerif, serif;
font-family: Georgia, « DejaVu Serif », Norasi, serif;
Polices sans empattements (sans-serif)
font-family: Arial, Helvetica, « Liberation Sans », FreeSans, sans-serif;
font-family: « Trebuchet MS », Arial, Helvetica, sans-serif;
font-family: « Lucida Sans », « Lucida Grande », « Lucida Sans Unicode », « Luxi Sans », sans-serif;
font-family: Tahoma, Geneva, Kalimati, sans-serif;
font-family: Verdana, « DejaVu Sans », « Bitstream Vera Sans », Geneva, sans-serif;
font-family: Impact, « Arial Black », sans-serif;
Polices à chasse fixe (ou monospace, désignant la largeur fixe des caractères ; utilisées par les développeurs pour l’affichage de codes)
font-family: « Courier New », Courier, « Liberation Mono », monospace;
font-family: Monaco, « DejaVu Sans Mono », « Lucida Console », « Andale Mono », monospace;
D’après la même source, la composition d’une famille de polices doit, au-delà de proposer des fontes web-safe, rassembler des caractères proches non seulement par leur style, mais aussi par leur taille, la largeur relative des caractères, etc. Ainsi, placer Arial et Verdana dans une même collection est une erreur: Verdana est plus haute et beaucoup plus large. En revanche, on substitue facilement Arial à Trebuchet, bien que le style d’Arial soit sensiblement différent.
La contrainte de la disponibilité des caractères va néanmoins peser de moins en moins. Grâce à une nouvelle commande Css, le @font-face, le développeur peut désormais demander à l’ordinateur d’envoyer une police spécifique à tous les postes, et cela indépendamment du fait qu’elle soit disponible ou pas sur le système de l’internaute.
Le corps (ou taille) du texte devrait se situer entre 12 et 16 pixels (px), avec une exception pour les notes, dont la taille peut descendre à 10px. Une valeur de 16px peut paraître très grande, mais elle correspond à peu près à un corps de 11 points sur papier, qui garantit une bonne lisibilité. Il faut donc faire attention à ne pas diminuer systématiquement la taille, cela ayant pour conséquence une perte de lisibilité.
Quelle que soit la police choisie, pour garantir une bonne lisibilité il faut s’assurer qu’elle a une hauteur d’x confortable. La x indique la hauteur du tracé d’un caractère en minuscules, sans hampe ni jambage, tel qu’il est imprimé. Les polices sans serif et celles qui sont optimisées pour les écrans ont une hauteur suffisamment grande.
On peut définir la taille des caractères en valeur absolue. Mais il existe aussi une définition en taille relative, ou em. Celle-ci permet l’adaptation des caractères aux résolutions et aux paramètres de l’utilisateur, en évitant le risque que les lignes se chevauchent. Cela facilite l’accessibilité aux pages.
L’utilisation de polices distinctes pour différencier les contenus (titre, chapô, texte, intertitres, légendes, encadrés, liens, etc.) est très recommandée. La lecture sur écran, du fait qu’elle procède par scan, requiert des points de repère bien visibles : la mise en évidence des différents niveaux de lecture favorisera une bonne lisibilité. Par le contraste entre caractères, le lecteur trouvera plus facilement l’information recherchée.
Ensuite : la mise en page du texte
La mise en page du texte ne peut se passer d’un élément essentiel: le rythme vertical. Il s’agit de l’organisation de l’espace et de l’arrangement du texte dans la page. On parle de rythme parce qu’il confère harmonie et stabilité à la page. Cela améliore la lisibilité en facilitant le suivi du texte et apporte une certaine cohérence stylistique.
Concrètement, le texte doit s’aligner dans une grille de référence qui met en étroite relation la hauteur de ligne et celle du corps du texte : la hauteur de ligne de n’importe quel élément devra être un multiple de la hauteur de base pour que le rythme soit respecté. Les marges entre les paragraphes doivent eux aussi s’adapter à ce rythme.
L’interlignage, la distance qui sépare les lignes de base de deux lignes de texte, est un élément capital du rythme vertical. Pour qu’un paragraphe soit lisible, il faut que le texte respire, que l’on distingue bien les lignes. La hauteur de ligne va influer sur « l’aération » du texte. Le graphiste Peter Gabor explique justement que « serrée, la composition se densifie ; lâche, elle se clarifie et devient aérienne ». On peut considérer qu’un bon interlignage est compris entre 140% et 150% par rapport au corps de la fonte utilisée. Le texte peut être ultérieurement aéré en plaçant des espaces blancs sur chacun de ses côtés.
Il faut aussi éviter les lignes trop longues. Une justification de 65 signes par ligne semble correcte. Si la justification est trop importante, le lecteur aura du mal à repérer la ligne suivante à chaque saut de ligne. De fastidieux « couloirs » de blanc pourraient également se former dans le paragraphe. Pour trouver le bon compromis, il existe une méthode simple, celle du typographe Robert Bringhurst, qui consiste à multiplier la taille de la fonte par 30. Par exemple, si corps de texte est en 14px, la justification sera de 420px.
Le contraste des couleurs joue aussi un rôle important. Il faudra éviter les contrastes trop nets, comme du texte noir sur un fond blanc, qui brouille légèrement la vue. Des contrastes moins forts favoriseront une bonne lisibilité, à condition que les couleurs choisis ne se ressemblent pas trop.
Adaptation aux différents contextes de lecture
La problématique de la lisibilité se complique sensiblement par la multiplication des supports. L’interface d’un site (son organisation visuelle) doit en effet pouvoir s’adapter aux différents terminaux : ordinateurs de bureau, ordinateurs portables, iPad et autres tablettes, iPhone et autres smartphones.
Pour faire en sorte que le contenu soit lisible sur tous les supports, il est donc nécessaire de créer des feuilles Css pour chacun d’entre eux. La définition de feuilles Css pour les sites mobiles doit tenir compte de deux problèmes : une résolution moins importante et une connexion souvent moins rapide que sur PC. Un contenu simplifié et optimisé est donc indispensable, ainsi que des pages légères en chargement. La navigation tactile requiert d’avantage de simplicité dans la construction de la page : il faut éviter des colonnes multiples de contenus et afficher les contenus empilés dans une seule colonne facile à parcourir. Des gros caractères, larges et lisibles, sont à privilégier : même si l’écran est petit, les polices ne doivent pas l’être pour garantir une bonne lisibilité. Les fichiers Flash player sont à oublier pour des nombreux smartphones, et surtout pour l’iPhone, qui ne l’affiche pas du tout.
Cela dit, rien n’empêche un smartphone, par exemple, d’afficher le contenu défini par une feuille de style pensée pour un site Web mais, dans ce cas, l’affichage du contenu ne sera pas adapté aux dimensions de l’écran, pénalisant ainsi la lisibilité.
Francesca Motta pour Rampazzo & Associés
