La lisibilité des contenus web
Cet article représente une réflexion qui a donnée lieu par la suite à la co-écriture de l’ouvrage Lisibilité des sites web. Des choix typographique au design d’information, paru en 2009 aux éditions Eyrolles.
« La grille typographique est un module pour la composition, les tableaux, les images, etc. La difficulté réside dans l’équilibre à trouver dans le respect maximal de la règle et la liberté maximale. En clair, le plus grand nombre possible de constantes et la variabilité la plus extrême. » Karl Gerstner, 1961 [1]
Plus de dix huit ans après l’invention de l’objet Web (adresses Web, HTTP, HTML, navigateur Web et éditeur Web) par Tim Berners-Lee au début des années 1990 en Suisse, la toile ne cesse de s’étendre, réduisant les frontières de notre monde à la seule rapidité d’accès du flux Internet, quasi instantané. Le secteur économique du Web est désormais bien établi, même s’il a longtemps été le seul apanage des informaticiens et du langage HTML, avant l’apparition de métiers créatifs qui lui sont désormais associés.
Le contenu du Web se doit d’être le plus lisible possible, et bien sûr, la rédaction de l’information émise, cela va de soi. Pourtant, on peut s’étonner du peu d’intérêt marqué pour le respect de la composition typographique sur les sites Internet.
Cela reste très surprenant dans un média aussi créatif, pour lequel il ne se passe pas trois mois sans l’apparition d’une nouveauté technique.
Il est fort à parier que la domination du « tout technologique », en dépit du design, à ralenti l’apparition d’outils performants sur ce point précis.
D’ailleurs, si l’on se retourne sur les avancées dans ce domaine, on s’aperçoit qu’il faut attendre 2002 pour voir apparaître la création d’une série de caractères dessinés spécifiquement pour le Web – La Microsoft ClearType Font Collection – comportant six polices de caractères, à l’initiative d’une collaboration entre des designers réputés mondialement et Microsoft. [2]
Ils sont désormais inclus dans le système d’exploitation Vista, dont le Corbel, qui est utilisé pour l’affichage de l’interface ; de même, ils sont présents dans la suite Office 2007. Bien sûr, des caractères dédiés au Web tels que le Verdana et le Georgia (Matthew Carter, Microsoft, 1996), ou encore le Lucida (Bigelow & Holmes Inc., 1985) qui est utilisé pour l’affichage du système d’exploitation Apple Mac OS X, avaient déjà été créés auparavant mais c’est le tout premier « pack » du genre. De même il faudra attendre 2009, date de sortie de la prochaine version du logiciel Adobe Flash CS4 qui comportera des avancées en terme de composition du texte (multi-colonnage, gestion des ligatures, etc.), alors que tous les logiciels de PAO possèdent déjà depuis une vingtaine d’années ces outils de composition…
De nombreuses réflexions existent sur les notions d’ergonomie et d’architecture de l’information, mais tout reste donc encore à faire du point de vue de la composition typographique et de la lisibilité pour des supports écrans qui tendent à se diversifier avec le Web mobile, l’Ebook et d’autres encore, parions le.
Les règles de base de composition typographique
C’est un fait, il est plus fatigant de lire sur un support écran que sur un imprimé, car la source réfléchissante de la dalle LCD à une influence directe sur la lisibilité ; de même si la définition des écrans actuels a fait de réel progrès, elle est encore bien loin des 300 dpi d’une impression laser couleur, et ce n’est de toute manière pas les seuls points à optimiser.
La combinaison entre le corps, la largeur de justification, l’interlignage et l’interlettrage sont les composantes essentielles d’une bonne lisibilité sur les supports écrans, tout comme les supports imprimés.
De même, l’utilisation d’espaces compatibles concernant l’interlignage doivent faire partie des bonnes pratiques à adopter pour améliorer la lisibilité de l’information, ceci, par l’utilisation de multiples de la valeur d’interlignage adoptée pour le texte courant. Deux caractéristiques influent de manière importante pour la lecture sur les écrans :
La longueur des lignes doit rester courte (45 à 65 signes au maximum, par lignes).
La composition au fer à gauche est à privilégier, plutôt que justifiée, car elle offre plus de lisibilité du fait de l’irrégularité de la longueur des lignes qui participent alors à leur identification, et donc au passage à la ligne suivante.
S’il doit y avoir l’emploi d’une composition justifiée, alors, il s’agit d’y associer un module permettant de générer automatiquement des césures. De nombreux articles donnent les détails techniques permettant de générer des césures automatiques pour le Web, et pourtant combien de sites Web aux textes justifiés comportent des césures ? (réponse : peu).
Pour aller plus loin :
http://www.mnn.ch/hyph/hyphenation1.html
http://code.google.com/p/hyphenator/
http://yellowgreen.de/hyphenation-in-web
http://www.paris-beyrouth.org/Le-plugin-de-cesure-HTML
Merci à Arnaud Martin et à Rahman Kalfane pour ces précisions sur des outils permettant de générer des césures.
Les grilles typographiques étendues au Web
Si l’on retrace l’histoire de l’imprimé, on tombe sur des recherches fixant les bonnes proportions des pages et des blocs de composition sous le terme de « canon d’Or de l’organisation médiévale des pages ». L’utilisation de grilles modulaires se retrouve à travers toute l’histoire graphique de l’imprimé, dès l’apparition des livres imprimés, puis tout au long des courants artistiques fondateurs : du Futurisme de Marinetti (1876-1944), du Bauhaus de Dessau en 1919, aux années 60 avec les détracteurs de l’école suisse, tels que Josef Müller-Brockmann, [3] ou encore, Emil Ruder.
Aujourd’hui, nos modes de conceptions numériques des imprimés sont indissociables de l’utilisation de la grille (tels que les journaux et les revues).
Alors pourquoi ne pas utiliser ce type de grille pour le Web puisqu’elles ont fait leur preuve dans l’imprimé ? En outre, cette méthodologie de conception à comme principaux avantages de positionner – tous – les éléments typographiques et graphiques sur des modules normés, facilitant le placement des éléments, et par conséquent, aidant à la clarification du contenu. De plus, l’architecture de l’information Web étant souvent complexe à mettre en place, cela permet d’organiser l’ensemble du site sur un plan unique – une trame commune à toutes les pages, en sommes. Il s’agit alors, comme pour l’imprimé, de partir d’une valeur d’interlignage idéale qui servira de « Pas » (cf. menus « Grille » ou « Incréments » des logiciels de PAO). Les valeurs comprises entre 18 et 22 pt concernant l’interlignage, en lien avec des corps situés entre 12 et 14 pt, sont les combinaisons idéales pour une bonne lisibilité du texte sur le Web. Il suffit alors de reprendre ces deux valeurs 18 ou 22 px pour en fixer la grille normative. En exemple, les couples 12/18 px, 13/20 px, 14/22 px. La limite à ne pas dépasser est de 10 px pour l’usage du Verdana. De même, 11 px avec le Lucida et 12 px avec le Georgia. À noter que le langage Web peut aussi utiliser les valeurs « em » pour la génération des feuilles CSS font-size, tandis que la conception graphique doit se faire en point ou bien en pixels (qui sont équivalents sur Illustrator).
Par ailleurs, et à la différence de l’imprimé, corps et interlignages ne sont pas fixes sur Internet : raison de plus pour établir des valeurs initiales corrects… De plus, le format du navigateur pouvant être modifié à loisir, la largeur de justification des pavés doit rester fixe. À noter que cette même grille peut être reproduite par le développeur au moment de la conception des feuilles de styles CSS, puis effacée par la suite, lors du final.
La page Web et l’écran
Comme pour l’imprimé, le format de document conditionne son contenu.
L’aventure du Web commence avec des standards liés au format de l’écran, 15, 17, 20 pouces et davantage ; aux formats 4/3, puis proches du format 16/9e.
La prise en compte des proportions de l’écran sont à établir en fonction des types de sites Internet qui peuvent êtres définis en deux principales catégories :
Ceux qui sont consultés en profondeur sur l’intégralité de la surface présente à l’écran, ce sont généralement les sites portails d’entreprises, les sites Internet culturels qui présentent du contenu multimédia (vidéos, animations).
Les blogs et les sites Internet informatifs qui sont consultés dans un coin d’écran, parmi d’autres logiciels ouverts en même temps et qui contiennent un contenu textuel important. La conception verticale est alors de mise, grâce au scrolling qui permet une lecture efficace, à la verticale. Étant donné la généralisation des formats panoramiques, il apparaît indispensable de penser le format sur ces mêmes proportions, puis d’en établir des dimensions intermédiaires et compatibles. Du format 800 par 600 px, nous passons ainsi progressivement au format 1024 par 768 px puis 1280 par 800 px, lui même compatible avec le format d’écran 1440 par 900 px (ces deux derniers formats sont spécifiques aux portables désormais les plus présents sur le marché).
[1] Ellen Lupton, « La grille comme programme » p. 125, Comprendre la typographie, éd. Pyramyd, Paris, 2007.
[2] Stéphane Darricau, « Les petits plats dans l’écran », p. 38-45, Étapes nº 156, mai 2008.
[3] Étienne Hervy, « Josef Müller-Brockmann, certitudes visuelles », p. 46-56, Étapes nº 157, juin 2008.
