Typographie sur le web – Nous ne sommes pas tous des pharmaciens
Étiquettes : écriture web, lisibilité, typographie
Nous lisons, nous ne décryptons pas. N’est pas Champollion ou Indiana Jones qui veut. Voilà pourquoi votre site doit être « lisible » : je vous explique.
D’abord, cette assertion « nous lisons » n’est pas totalement vraie lorsque nous rentrons dans le champ du web. Nous scannons dans un premier temps le contenu, histoire de voir si celui-ci nous interpèle. Ensuite, si les mots repérés de-ci de-là nous ont sauté aux yeux comme de joyeux feux d’artifice du savoir, nous nous plongeons dans le détail : nous lisons.
Nous lisons des lettres. Nous sommes guidés par une « fonte », une « police d’écriture » que des graphistes typographes ont développé très justement pour faciliter le confort de lecture. Encore faut-il savoir utiliser cet outil à bon escient de votre lectorat.
[pullquote]Dites-vous qu’un fond neutre vaut mieux qu’un panorama fleuri. La lisibilité est un tout et ne concerne pas seulement les bons usages typographiques.[/pullquote]
Des dinosaures à Google Font
En effet, outre les considérations purement techniques (avec ou sans empattements ?), toutes les polices d’écriture ne sont pas bonnes à utiliser pour votre site web. On peut dégager quelques catégories bien distinctes :
- Celles à éviter sur le champ : un site internet ne pourra jamais crier de professionnalisme s’il utilise les typos qui sont sensées imiter l’écriture manuelle (un Comic sans MS est bon pour une présentation de cinquième primaire sur les dinosaures).
- Celles que vous venez de télécharger sur votre ordinateur : tout le monde n’a peut-être pas la même typo «Disney», «Tintin» ou «Sherlock Holmes» que vous. Si vous ne voulez pas que votre page ressemble à du chinois, usez plutôt des fontes qui étaient là, de base, sur votre ordinateur ou de celles proposées justement par votre éditeur de texte en ligne (le fantaisisme peut payer, mais ne vous y risquez pas si vous vous dites que « ça devrait aller »).
- Celles qui n’ont pas un « bagage » suffisant derrière elle : dans les bonnes moeurs typographiques, les majuscules ont toujours un accent (quand il en faut, soyons d’accord), les chiffres sont inclus et l’esperluette est taillée. Ce serait dommage de se retrouver avec un exemple comme ceci :
Vérifiez bien donc que votre typo est complète.
- Celles qui sont utilisables, partout, tout le temps : on peut les trouver sur « Google Font » (« A web with web fonts is more beautiful, readable, accessible and open« ) ou dans la liste des typos « web safe » (elles se trouvent sur quasi 90 % des machines de la planète): Verdana, Arial, Tahoma, Lucida, Trebuchet MS, Impact, Arial Narrow, Arial Black, Palatino, Georgia, Times New Roman, Courier New.
Avec cette dernière catégorie, vous êtes certain de ne pas faire de faux pas : votre contenu sera lisible par tous et aura en plus l’élégance d’être certes d’un style courant, mais raffiné.
Les autres erreurs à ne pas commettre
Après ce choix de typographie, vous avez accompli la moitié du chemin de la lisibilité. Il y a deux erreurs fondamentales à ne pas commettre, par la suite :
- un texte en taille « 18 » ne vous assurera aucunement plus de lisibilité (voire même le contraire) ; préférez une taille normale. Le lecteur peut de toute manière zoomer avec son navigateur, si besoin est ;
- ne soulignez pas du contenu que vous voulez mettre en avant ! Dans le langage du web, le contenu souligné équivaut à un lien hypertexte. Il n’y a rien de plus frustrant que de cliquer sur quelque chose qui n’est pas cliquable !
Pour assurer un maximum de lisibilité, pensez aussi à ce que je vous ai dit en haut : le lecteur scanne avant de lire. Il est toujours très utile ( et on le fait sur le blog, tout le temps ) de mettre en valeur les mots clés de vos sujets en gras. Ça permettra de cibler encore plus vite les thèmes du contenu et ça aère la disposition spatiale de votre texte. Comme d’habitude, n’abusez pas des bonnes choses, Google n’aime pas les « tricheurs ».
En parlant d’aération de contenu et de lisibilité, vous avez remarqué les inter-titres qui se glissent dans cet article ?
L’arc en ciel en niveaux de gris
Pour favoriser la lisibilité de votre contenu, ne jouez pas à l’aventurier avec votre typo. Utilisez-en une qui soit stable, peut être passe partout, mais qui ne nuira pas à votre image et à votre contenu. N’abusez pas de mots en gras ni t’intertitres, et ne vous basez pas de trop sur les couleurs : si tout le monde n’est pas pharmacien, il y a des gens, eux, qui peuvent être daltoniens
La structure, c’est ce qui importe pour bien écrire sur le web. Lisez cet article de Muriel qui le rappelle si bien !
Commentaires
Bien qu’ayant apprécié l’article, quelques remarques doivent tout de même être à mon sens faites.
« typos « web safe » (elles se trouvent sur quasi 90 % des machines de la planète) »
Web safe fonts are dead.
Avec les appareils mobiles, ces polices ne peuvent plus prétendre à un statut « web safe », clairement. Et cela va aller en empirant avec les produits préfixés « smart » (télé mais aussi frigo et autres joyeusetés).
Autre petite remarque : le rendu de certaines polices Google sous Windows est catastrophique (ce qui a beaucoup à voir avec la « technologie » ClearType qui n’est plus adaptée à la typo à l’heure actuelle). Attention donc à cela (le service TypeKit propose d’ailleurs des échantillons pour rassurer l’utilisateur à ce niveau).
« un texte en taille « 18 » »
Je sais que je suis pointilleux mais 18 quoi ? Points, pixels, em, % ?
C’est important car à l’heure des sites responsive, la typographie doit également le devenir, donc…
« préférez une taille normale »
N’est aucunement un conseil, d’autant que de plus en plus de sites utilisent une taille de corps de 16 pixels, qui tend donc à devenir une taille… Normale.
Et c’est également oublier la hauteur d’x… Qui varie d’une police à l’autre. Donc telle police à 18 px équivaudra en taille à telle autre à 15 px.
Enfin,
« Le lecteur peut de toute manière zoomer avec son navigateur »
Mais très peu le savent et plus rares sont ceux qui l’utilisent. Ne pas donc tabler trop là-dessus, d’autant que le zoom peut se révéler catastrophique par rapport à tout le reste (mise en page qui se casse, menus qui débordent, etc.)
Merci beaucoup d’avoir partagé votre avis dans ce « long » commentaire. Cet article se voulait plus comme une « mise au point », un b-a ba de l’utilisation des polices d’écriture sur le web. Ceci dit, vous donnez des pistes et des réflexions intéressantes, surtout lorsque vous dites « Web safe font are dead ».