Comment choisir la typo de mon site Web 

La typographie est un élément auquel il faut prêter une attention toute particulière lors de la conception d’un site web. Pas seulement pour améliorer le design mais aussi pour hiérarchiser le contenu de la page afin de guider l’internaute et lui offrir une lecture agréable. Nous allons parler de l’art subtil de choisir une police et de la mettre en page. Car il ne s’agit pas seulement de trouver une typo qui vous plaise. Il faut qu’elle soit compatible avec le concept du site et qu’elle se fonde dans le décor.

Tout d’abord quelques notions de base

Avant d’entrer dans le vif du sujet, commençons par définir quelques termes de base en typographie. Non seulement vous comprendrez mieux la suite de l’article mais cela pourrait grandement améliorer la communication entre vous et le graphiste de votre entreprise. Il faut tout d’abord faire la différence entre une police et une fonte. Une police désigne la représentation de l’ensemble des caractères d’une même famille indépendamment de la taille et de la graisse utilisées. Les fontes sont les différentes variantes d’une police. Par exemple, Garamond est une police tandis que Garamond 14 points gras est une fonte.

Il y a différentes manières de classer les polices mais le plus couramment on parle de serif, sans-serif, script, mécanes, décoratives et à chasse fixe. Les polices serif ont ce qu’on appelle un empattement. Cela désigne cette petite extension qui termine la lettre. Times, Baskervile ou encore la Garamond sont des polices avec empattement.

On fait aussi une différence entre les polices dites linéales ou à fort contraste. Une police linéale présente des traits d’une épaisseur homogène, l’Helvetica en fait partie. En revanche, la Bodoni présente un fort contraste c’est-à-dire que l’épaisseur des traits qui composent le caractère varie fortement.

classification02

Établissez un système typographique

Lors de la conception de votre page web, établir un système typographique va vous servir à hiérarchiser le contenu. Cela permettra au lecteur de saisir plus facilement le lien entre les différents éléments et leur fonction. Il sera à même d’identifier ce qu’il regarde et de naviguer sur le site de manière intuitive.

Pour établir une hiérarchie entre différents éléments il faut créer un contraste. Pour cela vous pouvez vous servir de la taille, de la couleur et du positionnement. Commencez par définir les éléments qui constituent votre page tels que les titres, sous-titres, paragraphes et citations et attribuez-leur à chacun un style propre. C’est entre ces éléments d’importance différente que le contraste doit être visible. Ne vous amusez pas à donner des styles différents à vos sous-titres, le lecteur n’y comprendra plus rien et il aura des difficultés à se repérer dans le texte.

Quels styles choisir ?

Pour les paragraphes il est préférable de choisir une police confortable, uniforme et sans trop d’ornements. Inutile d’essayer d’en mettre plein la vue au lecteur avec une typo super originale. Il risque juste de décrocher au milieu du texte car cela rendra la lecture fatigante. Les polices telles que Chaparral et Georgia sont agréables à lire parce qu’elles sont discrètes, elles laissent l’importance au texte et rendent la lecture fluide. La grande mode ces dernières années est d’utiliser la version Light d’une fonte. Mais si vous utilisez ce genre de fonte pour vos paragraphes cela risque de rendre la lecture un peu pénible. En effet l’utilisation d’une police linéale et très fine peut être difficile à lire sur de longs textes. La largeur des traits étant homogène, la différenciation entre les caractères se fait plus difficilement et la lecture demande plus d’attention.

Au niveau de la taille, si l’on part du principe que le lecteur se tient entre 45 et 65 cm de l’écran (un peu moins lorsqu’il est sur un appareil mobile) cela veut dire qu’il est plus éloigné que lorsqu’il lit sur un support papier. Donc prévoyez une taille de police plus grande que lorsque vous écrivez pour un document destiné à l’impression, entre 16 et 18 px soit 1 à 1.2 ems. Pour la largeur de vos paragraphes, avoir entre 55 et 75 caractères par ligne est une bonne moyenne.

A contrario, pour les titres, choisissez une fonte qu’on remarque, qui se distingue du reste du texte. Pour la taille doublez voire triplez-la par rapport à celle des paragraphes. Le lecteur va les parcourir pour savoir si le contenu de la page l’intéresse et s’il veut aller plus loin dans sa lecture. C’est votre accroche alors il faut que votre titre interpelle ! Vous pouvez jouer avec son épaisseur, sa couleur et son emplacement, laissez parler l’artiste qui est en vous et soyez créatif !

Il est intéressant de choisir une police avec un style bien différent de votre texte. Par exemple, si vous avez utilisé une police avec empattement pour les paragraphes, prenez-en une sans serif pour vos titres afin d’amplifier le contraste. Pour les titres, les polices linéales sont appréciées parce qu’il y a peu d’espacement entre les caractères, on peut donc mettre plus de texte sur la même ligne et choisir une taille plus grande qu’avec une police à empattement. Évitez tout de même d’utiliser plus de 2 polices dans un même texte, il risque de manquer de cohérence (et de bon goût).

sacre-caractere

L’avis du typographe : Soyez lisible !

Étant la filleule d’un typographe, j’en ai profité pour lui poser quelques questions sur la manière de choisir une typo. Parce que même si entre le print et le web il y a de grandes différences, le processus de recherche d’une police reste quasiment le même. Donc voilà ce qui est ressorti de cet entretien avec Jean-Renaud Dagon, à l’atelier typographique Le Cadratin:

L’important c’est ce qu’on vend. Que ce soit du salami, des montres ou de l’information, la typographie est là pour servir un but. Ce n’est pas le caractère qui se met en avant. La typo doit être au service de votre site. La lisibilité avant tout,  donc choisissez une police telle que l’Helvetica, Garamond, Times ou Calson qui favorisent la clarté du texte.

Cela ne sert à rien d’utiliser trop de polices. Si vous en prenez une avec différents styles vous pourrez jouer avec les graisses, medium, italique et les tailles. Cela vous permet de rester simple et cohérent dans votre texte. On peut aussi varier entre une serif pour le texte et une police Bâton (sans serif) pour les titres, c’est un contraste qui marche bien.

Si vous voulez utiliser une typo plus originale pour vos titres ou votre logo, pensez à ce qu’elle renvoie comme message. Les polices ont toutes une histoire, elles évoquent une culture et une esthétique. Il est important de savoir ce qui y est rattaché puisqu’elle va servir à transmettre votre propre message et vous ne voudriez pas que son sens soit déformé par les connotations dues à la typo.

Le meilleur moyen d’arriver au résultat souhaité est de faire des essais. Choisissez des fontes et tentez différents arrangements. Expérimentez les mises en page vous aidera à trouver ce qui convient le mieux à votre site et ce qui correspondra à l’image que vous voulez lui donner.

Évitez de faire des paragraphes trop larges. Les écrans sont de plus en plus grands mais on n’a pas envie de les parcourir dans toute leur largeur pour la lecture d’un texte. Pensez aussi aux blancs entre les lignes, aérez vos paragraphes en les espaçant.

Attention aux polices gratuites

On n’a pas toujours le budget pour acheter une belle police, donc il arrive qu’on se tourne vers celles qui sont gratuites. Dans ces cas-là, il faut penser que l’ensemble des caractères peut être incomplet. Il arrive qu’il manque de la ponctuation, les petites majuscules ou certaines minuscules. Il peut aussi y avoir quelques problèmes de cohérence technique ou esthétique. Pour finir on ne trouve pas toujours la police dans différents styles (gras, italique, light), ce qui peut poser quelques soucis quand vous avez besoin de varier l’apparence de la typo suivant le rôle qu’elle joue dans le texte.

Où aller trouver des polices

Myfonts : https://www.myfonts.com

Typekit : https://typekit.com

Google fonte : https://fonts.google.com

Font Squirrel : https://www.fontsquirrel.com

Trouver le nom d’une fonte d’après une image

What font is : https://www.whatfontis.com

Tester des fontes

Typecast : http://typecast.com

Webtype swapper : http://www.webtype.com/tools/swapper

Webfonter fontshop : https://webfonter.fontshop.com

Quelques outils si vous avez besoin d’inspiration

Le Tinder des fontes : http://app.fontflame.com

Typedia : http://typedia.com

En savoir plus sur la typographie web

Jason Santa Maria, On Web Typography ,  A Book Apart, 2014

Typographic Design Patterns And Current Practices

Sacrés caractères, une web série de France Culture 

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion /  Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion /  Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion /  Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion /  Changer )

Connexion à %s