Magazine Blog

Typographie sur le web – Nous ne sommes pas tous des pharmaciens

Publié le 27 juin 2013 par We Are The Words Waw @wearethewords

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.

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

    Capture d’écran 2013-06-26 à 11.51.01

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

            

Capture d’écran 2013-06-26 à 11.47.21

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

  

Capture d’écran 2013-06-26 à 11.52.07
             

            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 !


Retour à La Une de Logo Paperblog

A propos de l’auteur


We Are The Words Waw 2129 partages Voir son profil
Voir son blog