Le bon usage de la bonne typographie

La réflexion concernant l’utilisation d’une typographie adaptée est une partie trop souvent oubliée dans une bonne démarche « ergonomique ». (EB Garamond 12)

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 (impression). Cette attitude est d’autant plus confortable qu’il s’agit d’un univers bien connu et bien maîtrisé. (EB Garamond 08)

Après tout que représentent 30 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. (Adobe Garamond regular)

 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 ou au donneur d’ordre.

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.

 Il existe par ailleurs une différence « technique » 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.

Avoir des réflexions sur la typographie, permet de se rapprocher de ce qui fait la différence entre un beau produit et un bon produit...

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. Dans cet article je me focalise uniquement sur la forme des caractères et non pas sur le contenu et le 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 ».

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

Une classification fondée sur la forme des empattements

L’empattement est le « pied » de la lettre, la partie basse sur laquelle « s’appuie » le caractère. On l’appelle aussi le serif.

 Si l’empattement est triangulaire, c’est une police Elzévir (exemple : Times, Garamond).

Elzevirs – empattement (serif) triangulaire

 Si l’empattement est filiforme, c’est une police Didot (exemple : Bodoni).

Didots - empattement très fin

 Si l’empattement est quadrangulaire, c’est une police Égyptienne (exemple : Glypha, Courrier).

Égyptiennes - empattement même épaisseur que le fût

 Si l’empattement est absent, c’est une police Bâton ou Antique (exemple : Arial, Verdana, Futura).

Bâton ou Antique - pas d’empattement

Thibaudeau complète sa classification par l’ajout de 5 autres catégories pour des usages plus spécifiques

 Les Scripts qui imitent une écriture manuscrite.

Script - “Écritures manuscrites”

 Les Anglaises avec des "pleins" et des "déliés".

Anglaises - “Pleins et déliés”

 Les Gothiques qui imitent une écriture calligraphiée.

Gothiques

 Les Vignettes qui ne sont pas des lettres mais des symboles (exemple : Windings).

Vignettes – DingBats

 Les Fantaisies qui véhiculent ou renforcent - par leur forme - un message particulier.

Fantaisies

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 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 (l’Express par exemple) 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 Elzévir comme un Times ou un Garamond. Nos romans sont toujours imprimés avec des caractères Elzévir.

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.

 Usage et caractéristiques pour les documents imprimés

• Polices avec empattements (on dit aussi serifs) adaptées pour les textes longs.

  • Elzévir - chaleureuse, romantique, classique, élégante.

  • Didot - rationnelle, sophistiquée mais assez froide.

  • Égyptienne - pratique, lisible mais plus vulgaire.

• Polices sans empattements adaptées pour les titres

  • Bâton - antique - peu contrastée, moderne mais monotone à lire.

 Les autres

• Script - écriture calligraphique en général peu lisible. A réserver pour des textes cours, composés en minuscules.

• Anglaise - romantique - spécifique.

• Gothique - dessin peu lisible - spécifique, à composer en minuscule.

• Vignette - caractères symboles destinés à agrémenter un texte.

• Fantaisie - caractères dont la forme renforce le message.

 En résumé et en schématisant :

• Information destinée à être vue (un titre), pas d’empattement qui permet au caractère de jaillir du papier.

• Information destinée à être lue (un texte), empattement triangulaire qui permet au caractère de s’étaler sur le papier.

Regardez un journal ou un magazine, les titres sont en Bâton, les textes en Elzévir.
Il est à noter que la tendance actuelle pour des brochures commerciales est plutôt d’utiliser des caractères bâtons dans l’ensemble du document.

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 - pour une force de corps (taille de caractère) petite - il y a plus de petits détails qui ont tendance à se “noyer” dans l’écran voire « rentrer » dedans.

• 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, une publicité ou un titre). Voir plus bas.

 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 meilleur lisibilité qu’un texte noir. Pour un titre, un Arial gras fait bien ressortir le message.

Il est indispensable de bien expliquer ça au "client" s’il désire “translater” sa charte graphique papier - telle quelle - sur écran.

Quelle typographie utiliser ?

Il est bien de passer un peu de temps à étudier et tester : polices de caractères, taille, interlignage, couleur des caractères et de fond. Prendre une typographie bâton qui correspond bien au polices de caractères « embarquées » dans l’OS.
Exemple pour Windows : Arial, Verdana, Tahoma, Trebuchet MS
L’équivalent de l’Arial sur Macintosh est l’Helvetica.

 Taille des caractères

Base : 100%

Attention : en dessous de 0.71em le texte devient illisible en affichage des caractères – plus petites - sur Internet Explorer

Conseil (?) pour de bons résultats

Utiliser une police bâton
Dans la CSS :
font-family : Trebuchet MS, Verdana, Arial, Helvetica, sans-serif ;
font-size : 0.77em ; (12 px) cette taille est très élégante
line-height : 1.4em ; permet « d’ouvrir » l’interlignage pour une lecture plus harmonieuse et plus confortable.
color : #505050 ; une couleur gris très foncé donne de meilleurs résultats qu’un noir franc.
background-color : #f0f0f0 ; une couleur gris très clair pour le fond, réduit ce que l’on appelle le « noir typographique » qui est un effet disgracieux et rétinien produisant des effets grisés entre les lignes d’un texte.

L’Arial est un peu “vulgaire” et peut-être un peu trop vu.
Le Tahoma peut produire, à certaines tailles de caractères, des serrements de caractères un peu disgracieux.
Le Verdana est bien adapté au web, cela est dû à l’aspect « carré » des caractères.
Le Trebuchet MS est plus typé, mais les caractères sont plus travaillés que le Verdana.

Une police assez moderne et "classieuse" : le Lucida
Lucida Sans Unicode pour Windows, Lucida Grande pour Macintosh
Dans la CSS :
font-family : Lucida Sans Unicode, Lucida Grande, Verdana, Trebuchet MS, Arial, Helvetica, sans-serif ;

C’est d’ailleurs la police que vous avez sous les yeux (font-size : 0.82em ; line-height : 1.4em ; color : #222222 ;)

Pour les textes de grande taille

Dans le cas de bannières – par exemple – une certaine licence est possible dans le choix des caractères et en particulier l’usage d’empattements ou pas.

 Schématiquement

Un caractère sans empattement sera plutôt adapté pour faire ressortir la modernité, l’aspect technologique d’un site.
Très bonne alternative dans le cas de caractère Bâton : le Century

Police Century

Un caractère avec empattement sera plutôt adapté pour faire ressortir la stabilité et le côté sérieux d’un site.
Très bonne alternative dans le cas de caractère Elzévir : le Garamond

Police Garamond

 Et pour les titres ?

Au dessus de 16 ou 18 points de taille de caractères, les caractères avec empattement peuvent être utilisés.

C’est d’ailleurs "à la mode". Regardez certains sites de journaux, comme Le Monde ou Libération) les caractères du texte sont sans empattement, les titres sont avec. La police utilisée est souvent du Georgia.
Il est ainsi intéressant de constater que la "règle (?)" de l’impression :

• Information à voir (un titre) = pas d’empattement

• Information à lire (un texte) = empattement

Cette règle s’inverse complétement sur le web. Je pense que cette "mode" a pris source lors de l’expansion des blogs qui ont quelque peu bousculé la typographie d’un site web.

Pour compléter sur les styles

• 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.

• 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.

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

Alignement

• À gauche (fer à gauche), le plus facile à lire, il produit un effet d’ouverture et de clarté

• À droite (fer à droite), informel, difficile à lire , il demande des efforts au lecteur

• Centré, formel, idéal pour des invitations ou annonces mais plus fatiguant, à utiliser pour des textes courts

Majuscules / Minuscules

Les majuscules sont plus difficile à lire (elles ralentissent la lecture). Il est préférable d’utiliser les minuscules. Comparer ainsi :

Et :

Si les majuscules sont utilisées ( par exemple pour une barre de navigation ) accentuer les lettres.
Ainsi comparer :
LE MINISTRE CHAHUTE A LA CHAMBRE
Et :
LE MINISTRE CHAHUTÉ À LA CHAMBRE

ou bien :
LE PROJET A ÉTÉ DESIGNÉ COMME IL CONVENAIT
Ou :
LE PROJET A ETE DESIGNE COMME IL CONVENAIT
Et :
LE PROJET A ÉTÉ DÉSIGNÉ COMME IL CONVENAIT

S’agit-il de "design" ou de "désignation" ?

Voulez-vous en savoir plus ?

Site de polices:
www.dafont.com
www.planete-typographie.com

Et en bonus

 Un générateur de "faux-texte" : www.lipsum.com, lire la description, c’est édifiant et instructif.

On appelle ce genre de texte du "bolo bolo".

• Et cela pour "frimer" :

  • « Mais c’est quoi ce texte en latin ? Ben quoi ? c’est pas du latin c’est du bolo bolo... »

Il existe même une extension pour Firefox (voir Firefox Addon).
Installer l’extension et menu Outil / Dummy lipsum.

À noter que le texte descriptif existe en une grande variété de langues. Pour un site multi-lingue c’est assez pratique. Lorsque je fais un site en arabe ou en russe (je ne suis ni arabophone ni russophone), je puis utiliser le texte de la description du site lipsum.com dans cette langue. Je sais parfaitement quelle est la traduction du texte que je place en "bolo bolo". Je ne risque donc pas de faire un impair ou une incivilité.

C’est tout de même mieux que d’aller chercher un texte inconnu sur le site de l’Ambassade de France au Caire ou à Moscou non ?

Source : http://www.p-interactif.com/spip.php?article2