Choisir sa typo pour sin site web

Étiquettes : , ,

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:

Choisir sa typo pour son site web

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.


Commentaires

  1. matipa dit :

    Merci pour l’article et les liens. J’aime utiliser les Google Fonts qui est un service d’ hébergement gratuit de polices d’écritures pour le Web. Et, les fontes que j’aime pour le web en ce moment sont Lato, Fira Sans de … Google Font.

  2. Djalal dit :

    Très intéressant ! merci pour cet article !
    ça fait écho aussi à un article de certains chercheurs sur le sujet que j’ai trouvé sur le net
    http://www.marketing-trends-congress.com/archives/2017/pages/PDF/047.pdf

  3. couyoumdjian dit :
    Votre commentaire est en attente de modération. Ceci est un aperçu, votre commentaire sera visible après sa validation.
    L’INSEEC recherche un formateur . Si ça peut intéresser quelqu’un ? ( posté il y a une semaine ) L’INSEEC MSc Mba (Paris) recherche des intervenants experts pour un programme spécialisé en Big Data ! N’hésitez pas à partager sans modération. #Statistiques #RGPD #Algorithmes #Stockage #Sécurité #BigData #DataScientist #DataAnalyse #BusinessAnalyse #INSEECU

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Devenez chroniqueur

Vous souhaitez devenir chroniqueur ou nous soumettre un article? Rien de plus simple.

Ça m'intéresse

#EPW sur Twitter

#EPW sur Facebook

À propos

Votre blog Écrire pour le web en chiffres
  • Plus de 25.000 sessions par mois
  • Plus de 35.000 pages vue chaque mois
  • 1500 abonnés à la newsletter
  • Créé en 2006
  • 1e position dans Google sur des expressions métier
En savoir plus