Dans deux semaines, précisement, ce site aura deux ans. Sa maquette aussi. Et nous nous demandons légitimement comment améliorer le confort de lecture d'un site où les articles sont longs et les lecteurs exigeant. Nombre d'entre vous lancent d'ailleurs des suggestions: justifier les textes, graisser les caractères, utiliser des caractères sans empattement, proposer l'inversion vidéo (caractère blanc sur fond noir), pour n'en citer que quelques uns. Toutes remarques qui sont souvent contradictoires entre elles.
«Par lisibilité, nous entendons l'aptitude à lire le plus efficacement un texte placé à une distance optimale et éclairé normalement; par visibilité l'aptitude à déchiffrer des signes placés à des distances maximales et éclairées au minimum», écrit François Richaudeau dans La Lisibilité. Ce que nous cherchons à améliorer, c'est donc la lisibilité. Encore faudrait-il définir l'efficacité postulée par Richaudeau. On entend généralement par là vitesse de lecture, ce qui permet d'obtenir une mesure chiffrée de cette lisibilité, donc de comparer les «performances» respectives de deux corps, de deux interlignages, de deux polices.
Les recherches menées au XXe montrent clairement que l'on lit moins vite un texte composé en capitales (majuscules d'imprimerie) qu'un texte en bas-de-casse (minuscules), que l'italique est aussi lisible que le romain (le non-italique) sur des textes courts (mais que cela se dégrade avec la longueur du texte), qu'il n'y a pas de différence entre les caractères gras et maigres ni entre les polices à empattement (type Times) et les caractères bâton (type Helvetica). De même que tous les caractères «de labeur» (par opposition à fantaisie) sont aussi lisible. Car il existe néanmoins une nuance culturelle: on lit plus facilement les caractères que l'on a l'habitude de lire. On peut donc soutenir que, le nombre de polices de caractère différentes auxquelles nous sommes exposés augmentant, nous sommes de plus en plus tolérant vis-à-vis des formes fantaisies et que ces polices deviennent lisibles pour nous alors qu'elles ne l'étaient pas pour nos parents.
Cette hypothèse n'est pourtant pas tout à fait juste sur Internet. L'apparence des pages Web ne dépend pas totalement des polices choisies par le maquettiste du site, mais plutôt de celles qui sont installées sur votre ordinateur. Et entre deux systèmes d'exploitation, navigateurs, configurations, la différence peut être très importante. Qui pis est, si le maquettiste a choisi une police qui n'existe pas chez vous, elle sera remplacée par un second choix, voire par la police configurée par défaut pour votre navigateur. Aussi la plupart des sites se contentent-ils généralement de piocher parmi cinq polices dont on pense qu'elles équipent plus de 95% des ordinateurs: Arial, Verdana et Trebuchet (parfois le Lucida) pour les polices sans empattement, Times et Georgia pour celles qui en comportent.
Une étude réalisée en 2009 par Smashing Magazine sur 50 sites d'information montre que la police la plus utilisée pour le texte courant est le Georgia (32%) suivi de l'Arial (28%) et du Verdana (20%). Le Times New Roman, utilisé par Mediapart, n'est utilisé pour le texte que par un seul site étudié, celui du New Yorker. Ce désamour pour un caractère pourtant courant vient de ce qu'il a été dessiné pour les besoins de la presse papier (gagner de la place) qui n'ont pas grand sens sur le Web, et qu'il ne dispose pas des caractéristiques qui améliorent la lisibilité sur écran: des contreformes (les «trous» dans les lettres comme le a, le e...) très larges pour rester ouvertes dans les petits corps, des empattements marqués lorsqu'ils existent (s'ils sont trop fins, ils peuvent disparaitre dans certaines tailles) et une grande hauteur d'œil (la partie centrale du caractère). Dans la titraille, Georgia et Arial arrivent à égalité (28% chacun), mais l'Helvetica (qui à quelques détails près est identique à l'Arial) représente 20%. Le Verdana, très large et peu détaillé, tombe à 8% d'utilisation dans les titres.
On pourrait citer aussi les 6 polices ClearType qui pourraient devenir progressivement des «standards» typographiques: le Constantia à empattements cunéiformes, très élégant malgré une œil un peu petit, le Cambria destiné à remplacer le Times dans Word ; pour les polices sans empattement, le Corbel, simple et efficace et le Candara, plus élaboré qui doit faire merveille en titre; et pour les polices à chasse fixe (type machine à écrire), le Calibri et le Consolas.
Pour ce qui est de la taille des caractères, l'étude Smashing montre que le corps de texte le plus utilisé (38%) est de 13 pixels (Mediapart utilise un corps de 16 pixels qui n'est employé selon ce recensement que dans 2 cas sur 50). Le corps des titres est généralement compris entre 18 et 29 pixels, et le plus souvent, il équivaut à deux fois le corps du texte (ce qui une différence de taille plutôt faible). L'interlignage moyen est de 1,5 fois le corps, ce qui serait énorme sur papier, mais permet sur écran de passer plus facilement d'une ligne à l'autre. Il existe généralement un espacement de trois quarts de lignes entre deux paragraphes. L'étude constate également que les lignes comprennent en moyenne 89 caractères, soit bien plus que l'optimum généralement admis de 55 à 75 signes par ligne (70/75 dans le cas d'un article de Mediapart).
On découvre également que 96% des sites ne justifient pas leur texte, ce qui se comprend parfaitement: en l'absence de césure dans les mots en fin de ligne (il faudrait les recalculer à chaque fois que l'on redimensionne l'écran, ce qui allongerait démesurément l'affichage des pages), une justification des textes créeraient des blancs parasites entre les mots (des «lézardes») qui perturbent considérablement la lecture. La pratique quasi-généralisée est donc d'aligner le texte à gauche et de le laisser flotter à droite. Ou encore que seuls 46% des sites soulignent leurs liens hypertextes alors qu'il s'agit du code graphique historique pour marquer leur présence (bleu souligné), les autres ayant recours au gras et/ou à la couleur.
A ce propos, il faut insister sur le fait que selon les normes d'accessibilité, la couleur ne peut pas être utilisée comme code distinctif, car une personne sur douze souffre de troubles de perception des couleurs (ce site permet de constater la perception des couleurs selon le trouble et celui-ci de voir Mediapart en gris). Il ne s'agit pas là d'une lubie: la loi du 11 février 2005 fait obligation aux services de communication publics de garantir l'accessibilité des sites Web aux personnes handicapées. Le World Wide Web a émis des recommandations allant dans ce sens, parmi lesquelles on trouve le fait de fournir des équivalents textuels des contenus audio et vidéo (et plus généralement proposer des descriptions de remplacement pour tous les éléments non textuels).
Tout autant que les handicaps physiques, il faut bien sûr considérer l'équipement informatique des lecteurs. Vous utilisez majoritairement Firefox (36%) et Internet Explorer (30%). Safari représente 17%. A 99% vous laissez Javascript activé et à 93% vous acceptez les cookies. En majorité (relative) vous utilisez une résolution de 1280x800 pixels. Vous ne voyez donc, généralement, en arrivant sur Mediapart que le premier sujet. Mais vous déroulez visiblement assez facilement la page jusqu'aux liens de la revue de Web et au classement des articles les plus lus du journal.
Tout cela, bien sûr, ne dit rien des évolutions que va connaître la page d'accueil du site, mais cela donne quelques indications du sens dans lequel il nous faut travailler.
De nombreuses informations de ce billet proviennent de Lisibilité des sites Web de M.-V. Blond, O. Marcellin et M. Zerbib, publié aux éditions Eyrolles en 2009.