Communication écrite, typographies et ergonomie

Cinq siècles de typographie et de texte imprimé ont modelé notre approche de la lecture. Trop souvent une direction de communication en entreprise pense qu'un écran web n'est que la translation de l'information papier ou du « print ». Cette attitude est d'autant plus confortable qu'il s'agit d'un univers bien connu et bien maîtrisé. Après tout que représentent 20 ans d'informatique éditoriale en comparaison avec 500 ans de tradition d'imprimerie ?

Les chefs/directeurs de projet, les développeurs, les graphistes ont une vision très technologique du développement. Ils manquent parfois de recul. La conséquence est souvent un manque d'argumentaires pour justifier des développements ou des choix auprès des clients. C'est dommage car des approches ou des démarches éprouvées, étudiées et testées existent.

L'objectif de cet article est de soumettre quelques bons principes pour savoir ce qui fonctionne ou pas, et surtout être capable de l'expliquer au client. Des études de comportement ont montré que les techniques de lecture, de recherche et de navigation d'un internaute ne sont pas les mêmes sur un écran que sur le papier. Les techniques "d'écriture" doivent être donc repensées.

Etalement ou éblouissement ?
Il existe par ailleurs une différence « technologique » de taille entre l'encre qui s'étale sur un papier et un triple faisceau lumineux qui excite des particules luminescentes placées derrière notre écran. Cette différence entraîne un comportement particulier de notre perception rétinienne. Mais n'anticipons pas - qu'est ce que la typographie ?

La typographie est l'art de bien choisir et de bien utiliser les caractères. Il est important de réfléchir à la forme des caractères et non pas sulement au contenu et au message qu'ils véhiculent.

Concernant un site internet, « utilisable » et « utile » sont les termes consacrés du discours ergonomique classique. Le discours typographique est un peu identique : « beau », « bien », « utile ». Le grand typographe Jean-Baptiste Bodoni disait, il y a près de 300 ans : «L'idée du beau ne doit certes pas être confondue avec celle du bien et de l'utile. Ces trois idées n'en sont pas moins comme les trois aspects divers d'une seule et même chose considérée de trois côtés différents ».

Quelle est ta famille ?
Chaque police de caractères appartient à une famille adaptée à un usage particulier. Cette classification des caractères date de la fin du 19° siècle. Elle est due à un imprimeur parisien, Francis Thibaudeau et elle s'appuie sur l'expérience des premiers imprimeurs de la Renaissance. Cette classification est fondée sur la forme des empattements des lettres.

L'empattement est le « pied », la partie basse sur laquelle « s'appuie » le caractère. Si l'empattement est triangulaire, c'est une police Elzévir (exemple : Times). Si l'empattement est filiforme, on parle d’une police Didot (exemple : Bodoni). Si l'empattement est quadrangulaire, place à une police Egyptienne (exemple : Glypha, Courrier). Si l'empattement est absent, c'est une police Antique (exemple : Arial, Verdana), très fréquente sur le Net.

Thibaudeau complète sa classification par l'ajout de cinq autres catégories pour des usages plus spécifiques :
1/ Les Scripts qui imitent une écriture manuscripte.
2/ Les Anglaises avec des pleins et des déliés.
3/ Les Gothiques qui imitent une écriture calligraphiée.
4/ Les Vignettes qui ne sont pas des lettres mais des symboles (exemple : Windings).
5/ Les Fantaisies qui véhiculent par leur forme un message particulier.

500 ans de culture typographique pour le document imprimé
Pour les documents imprimés, on distingue deux types d'informations : celle qui est destinée à être vu, un titre par exemple, et celle destinée à être lu, le texte qui est aussi le contenu. En règle générale, on utilise une police sans empattement pour voir ; et une police avec empattement triangulaire, pour lire. Il suffit, pour s'en convaincre, de regarder un magazine. Prenons par exemple, Le Nouvel Observateur, ou un journal, Libération. Les titres sont en caractères Antique (on dit aussi Bâton), comme un Helvetica ou un Futura. Le texte est en caractères Elzevir, comme un Times ou un Garamond. Nos romans sont toujours imprimés avec des caractères Elzevir.

Un caractère avec empattement triangulaire « s'étale » bien sur le papier et le « recouvre » correctement. Les polices de cette catégorie sont adaptées pour des textes longs car elles ont peu de personnalité et ont tendance à s'effacer derrière le message. C'est d'ailleurs ce qu'on leur demande.

Un caractère sans empattement « sort » du papier. Les polices de cette catégorie sont adaptées pour des textes courts car elles ont de la personnalité et accompagnent le message.

Avec ou sans sérifs ?
Si on étudie l’usage et les caractéristiques de documents imprimés avec des polices avec empattements (on dit aussi sérifs). On aperçoit que ces polices sont adaptées pour les textes longs.

1/ Elzevir - chaleureuse, romantique, classique, élégante ;
2/ Didot - rationnelle, sophistiquée mais assez froide ;
3/ Egyptienne - pratique, lisible mais plus vulgaire ;
4/ Polices sans empattements adaptées pour les titres ;
5/ Baton - antique - peu contrastée, moderne mais monotone à lire.

Les autres polices peuvent encore se classer en cinq catégories :

1/ Scriptes : écriture calligraphique en général peu lisible. A réserver pour des textes cours, composés en minuscules. ;
2/ Anglaises : romantique et spécifique ;
3/ Gothiques : dessin peu lisible - spécifique, à composer en minuscule ;
4/ Vignettes : caractères symboles destinés à agrémenter un texte ;
5/ Fantaisies : caractères dont la forme renforce le message.

Faire voir ou faire lire, telle est la question !
Pour résumer et en schématiser, si on cherche à faire voir l’information (un titre), on opte pour l’absence d'empattement, qui permet au caractère de jaillir du papier. Pour l’information à lire (un texte), prime à l’empattement triangulaire qui permet au caractère de s'étaler sur le papier.

Et sur un écran, il se passe quoi ? Eh bien, pour l'écran c'est l'inverse. Les lettres avec empattements sont moins lisibles sur l'écran que celles sans empattements. Il y a deux raisons à cela : dans le cas d'un empattement, il y a plus de petits détails qui ont tendance à se "noyer" dans l'écran voire « rentrer » dans l'écran. La résolution d'un écran est beaucoup plus faible que celle du papier.

Un écran a une résolution de 72 pixels par pouce alors que la résolution papier peut aller de 300 points par pouce jusqu'à 2400. En conséquence un caractère avec empattement produit des « effets d'escalier » sur sa base. Il est possible d'anti-aliaser les caractères mais avec l'inconvénient de produire un effet de « flou » qui rend la lecture plus difficile. Dans le cas de caractères de grande taille, l'argument de la résolution ne joue plus. Il est ainsi possible d'utiliser n'importe qu'elle forme de caractère, en fonction du message à véhiculer. Par exemple, pour la page d'accueil, une bannière ou une publicité.

Soustraction ou addition ?
Pour aller plus loin, il serait intéressant de comparer les logiques de production de la lumière sur papier et sur écran. Sur papier, il s'agit d'une logique soustractive. La lumière émise correspond à la différence entre la couleur blanche et la couleur absorbée. Sur écran, il s'agit d'une logique additive. La couleur est la somme des trois couleurs émise par le tube de l'écran. Par ailleurs dans le cas du papier, la source de lumière est extérieure et au dessus. Pour un écran, la source de lumière est intérieure. Elle est située derrière l'écran - un peu comme un vitrail.

Pour résumer, sur écran, il vaut mieux utiliser des caractères sans empattements. Actuellement la plupart des sites « modernes » utilisent le Verdana pour le texte. Dans une feuille de style, un Verdana de taille 11 points et un interlignage de 15 points donne un excellent résultat à lire. Par ailleurs un texte de couleur grise très foncée donne une meilleure lisibilité qu'un texte noir. Pour un titre, un Arial gras fait bien ressortir le message.

Il est indispensable de bien expliquer ces paramètres au client s'il désire faire vivre sa charte graphique papier telle quelle sur écran.

Gras, souligné, italique, quand et comment ?
Pour compléter sur les styles, voici trois derniers conseils :

1/ Un caractère gras a tendance à agir sur la persistance rétinienne et n'est à utiliser que pour des titres ou des parties courtes d'un texte.

2/ Le souligné est à proscrire, il est réservé aux liens hypertextes.

3/ L'italique est moins lisible sur écran, il ralentit la lecture et produit généralement des effets d'escalier - il vaut mieux le remplacer par un changement de couleur ou, encore mieux, un retrait.