Choisir sa typo pour son site web

Étiquettes : écriture web, lisibilité, webdesign

On ne lit pas sur internet comme sur papier. Dès lors, comment choisir une bonne typo pour son site web et faciliter la lecture de ses visiteurs?

Convaincre ses visiteurs de rester sur son site, c’est une chose. Ruser pour les inciter à lire tout votre contenu en est une autre. Telle est la dure loi du web.
Du coup, il est sans doute judicieux de s’attarder à son ou ses choix typographiques lorsque l’on définit le design de son site internet.

Peut-on utiliser n’importe quelle typo pour son site web?

En théorie oui, en pratique non. Car toutes les typo ne sont pas lisibles par toutes les machines, c’est la raison pour laquelle plusieurs noms de polices de caractères apparaissent dans votre CSS, de cette manière:

Grâce à ce dispositif, l’ordinateur de vos visiteurs aura le « choix » d’afficher votre contenu avec les typos installées sur son système. Dans ce cas-ci, il essayera d’abord de charger la Open Sans puis les suivantes, dans cet ordre précis, si la première n’est pas reconnue par le navigateur.

Mais comme dans la vie, il faut faire des concessions, il est sans doute préférable d’opter pour un nombre de typos restreint et de mettre de côté la fantaisie pour ne s’en tenir qu’aux grands classiques comme l’Arial, la Trebuchet MS, la Verdana, la Times New Roman, etc. Soit celles installées par défaut sur bon nombre de machines.

Comment choisir la typo idéale?

Si la typo d’un texte doit être discrète et efficace pour inciter le visiteur à se concentrer sur le contenu, celle des titres ou de votre logo doit pouvoir se démarquer facilement pour attirer le regard.
C’est la raison pour laquelle on utilise, de manière générale sur le web, des typos sans serif pour le corps de texte.

Gardez néanmoins à l’esprit qu’en tant que partie intégrante de votre web design, la typographie a du caractère. Selon ses empattements, ses pleins et ses déliés, elle va renvoyer une image à vos visiteurs… autant que ce soit une image positive pour votre site internet! Par exemple, la Times New Roman est une typo sérieuse et formelle. Tandis ce que la fameuse Comic Sans est plus fun et infantile (d’ailleurs, elle ne devrait être utilisée que pour les 11 ans et moins).

En somme, les ingrédients pour de bonnes typographie sont:

• lisibilité
• accessibilité (par tous les appareils)
• personnalité

Sur ce site, vous trouverez un petit tableau des typos utilisées par défaut par Windows et sous OSX, plutôt pratique.

La typographie et ses subtilités

Comme si choisir un typo pour son site web n’était pas assez compliqué, il faut encore déterminer sa mise en page.

La couleur. Dans la majorité des cas, votre texte sera plus lisible s’il est tapé dans une typo foncée sur fond clair. L’inverse est également possible mais attention aux contrastes trop violents, comme le blanc sur un fond noir. Avec un simple titre, ça passe. Mais avec un texte long, vous risquez de donner la migraine à vos visiteurs.
(ce qui, avouons-le, ne serait pas très sympa)

L’interlignage. C’est le nom donné à l’espacement vertical entre vos lignes de textes. On ne dirait pas comme ça mais il s’agit d’une donnée importante. Trop petit, votre texte prendra la forme d’un bloc compact et n’invitera sûrement pas à la lecture. Trop large, votre bloc de texte paraîtra flotter et lire votre contenu sera d’autant plus difficile. En général, on opte pour un interlignage de 2 à 5 points plus grands que la taille de la typo.

Le corps de texte. Tout comme l’interlignage, la lecture de votre contenu ne sera possible que si votre texte s’affiche dans une taille normale. Trop grand, on perd le visiteur. Trop petit, le texte devient illisible. Notez qu’aujourd’hui, on privilégie un corps de texte plus grand qu’avant, avec la présence des écrans rétina.
La taille de votre typo variera également selon s’il s’agit d’un titre, d’un sous-titre, d’une citation ou de lignes de texte.

Les outils

Puisque la tendance est aux outils, voici quelques sites qui pourront vous aider dans votre choix. Car en graphisme, tant qu’on a pas testé, on ne sait pas.

Tout d’abord, jetons un œil à Typetester. Ce outil en ligne vous permettra non seulement de visualiser votre texte dans la typo que vous voulez mais en plus de le comparer à d’autres. Son grand atout, c’est qu’il est aussi muni de nombreuses options (corps de texte, couleur de fond, interlignage, interlettrage, etc) qui vous permettent de personnaliser au maximum votre futur style typographique.

Typ.io est un outil très pratique pour analyser quelles polices de caractères sont les plus utilisées sur le web et sur quels types de sites. Et puisque toutes les typos ne vont pas ensemble, il répertorie également les meilleures combinaisons.

Et enfin, FontFace.ninja, une petite extension bien pratique qui vous permet de retrouver directement la police de caractères utilisées sur un site web depuis le code source!

Et vous, quelles typo utilisez-vous pour votre site web? Avez-vous d’autres astuces pour faire le bon choix?

Besoins de conseils pour adapter vos contenus au média et à l’écran? Participez aux formations de Wearethewords.com le 16 janvier 2015 à Paris et le 13 février à Bruxelles.

Par: Claire Jacques

Expérience Utilisateur

D'abord la pub puis le community management en passant par le graphisme, je plonge aujourd'hui dans le merveilleux monde de Wordpress. Et avec ça, ma mère ne comprend toujours pas ce que je fais. Je clame à qui veut l'entendre que j'ai un furet. Et comme je suis une web junkie, Twitter n'y coupe pas. À bon entendeur…