November 11, 2022

Les meilleures typographies pour ton site web

J’ai toujours admiré la beauté de certaines typographies. Comme les couleurs, je trouve qu’elles procurent des émotions et envoient des messages bien précis.

Mais si certaines d’entre elles sont très belles, elles ne sont pas forcément adaptées à un site web pour autant 💻

En effet, je te conseille d’adopter une typographie à la fois esthétique, équilibrée, régulière mais surtout lisible et intéressante pour ton public ciblé.

Car ton choix de polices de caractères est tout aussi important que ton choix de coloris. Les typographies sont une composante essentielle de ton identité visuelle et participent au même titre que ta palette de couleurs à ton image de marque.

Dans cet article, j'ai souhaité te transmettre quelques conseils afin que tu puisses décider en toute connaissance de cause quelles seront les typographies à mettre en avant sur ton site web et plus largement sur tous tes outils de communication. 

Qu’est-ce qu’une typographie : les bases

Pour commencer, il est plus juste de faire la distinction entre typographies et polices de caractère. 

Les polices de caractères désignent un ensemble de caractères typographiques qui ont toutes un design bien précis. Il peut s’agir de lettres, de chiffres, de signes particuliers … et donc pas uniquement de mots ✍️

La typographie est, elle, un terme plus générique qui désigne l'art d'agencer les caractères ou de les dessiner.


Je vais ainsi davantage te conseiller des polices de caractères plutôt que des typographies même si ce terme est finalement bien plus complet. La typographie étant, pour résumer, l’utilisation que tu fais de ta police et les paramètres que tu vas lui imposer (la taille, les espaces, la grosseur du trait…)


En design, on a tendance à regrouper les polices de caractères en familles 💡

Voici les principales :


  • Les polices Serif : les polices dites “Serif” sont des polices à empattement, c’est-à-dire une ligne ajoutée à chaque extrémité des caractères.
    Exemple de polices serif très connues: Baskerville et Times News Roman.


  • Les polices Sans Serif : à l’inverse, les polices Sans Serif se caractérisent par l’absence d’empattement. Elles renvoient un look plus moderne et plus minimaliste.
    Exemple de polices sans serifs connues : Avenir et Open Sans.

  • Les polices Cursives : on les appelle également “polices manuscrites”. Elles cherchent à suggérer une information sur l’auteur du message, en plus du contenu en lui-même. La lisibilité passe souvent au second plan. Elles ont souvent plus de personnalité.
    Exemple de polices cursives : Pacifico et Dancing Script.


  • Les polices Display : les polices display sont principalement utilisées pour décorer. La lisibilité passe également au second plan. Elles sont généralement davantage utilisées pour des logos ou des titres décoratifs.
    Exemple de polices Display : Lobster, Bebas Neue.


  • Les polices Monospace : c’est une police qui fait généralement penser aux machines à écrire et à la programmation informatique. Idéal pour un style clairsemé et minimal.
    Exemple de polices Monospace: Space Mono, Roboto

Aujourd’hui nous ne sommes heureusement plus limitées à des polices de caractères trop classiques, comme celles que l’on peut trouver dans Word par exemple. Il en existe des tonnes désormais.

Certaines sont déjà installées sur ton ordinateur. D’autres sont proposées par Google, et d’autres encore sont crées par des graphistes talentueux 🙌

Mais justement, face à ce choix gigantesque il est parfois difficile de prendre une décision. 


Bien sûr, certaines d’entre elles sont illisibles, inintéressantes ou carrément loin des modes actuelles (oui oui, il existe bien des modes en typographie comme en graphisme ou en peinture).

Mais si la plupart sont très belles, elles ne sont pas toujours adaptées à une utilisation sur le digital 🚨

typographie

La bonne typographie pour la bonne cause

Indépendamment de toute autre considération, ta priorité absolue au moment de choisir ta typographie doit être sa lisibilité. En effet, parmi les quelque 500 000 polices disponibles, seulement une 500aine conviennent véritablement pour du texte 😲

Le critère fonctionnel doit donc passer avant le critère esthétique. 

Il faut à cette étape que tu fasses abstraction de tes goûts personnels au profit de la fonctionnalité de la police. C’est hyper important. Cela te permettra en plus d’en éliminer déjà un bon nombre. Tu pourras ensuite te concentrer sur celles qui te plaisent et qui ont des chances d’attirer l’œil de ton utilisateur  👁


Enfin, tout aussi important : ta police doit être exploitable sur un site web. Comparé à l’impression, les écrans ont une faible résolution et ne peuvent afficher qu’un certain nombre de détails

Aussi, pour un titre de grande taille, tu peux te permettre de choisir une police avec empattement légèrement décorative. En revanche, pour le corps du texte et les liens de navigation, il vaut mieux utiliser une police simple sans empattements. La police doit rester intacte quand elle est petite et avec une graisse de trait uniforme. Tu peux bien entendu t’aider également de couleurs contrastées, de sur lignage ou de graisse des traits pour faciliter la lecture. Mais la police de caractère doit rester « web-friendly » 💡


Par ailleurs, je te le disais plus haut, les polices expriment des émotions et des messages. Tu dois ainsi faire en sorte de trouver une typographie qui exprime un « ton juste ». 
Le choix d ‘une police exprimant l’atmosphère ou l’humeur voulue n’est pas chose aisée, c’est sûr. Mais je te conseille tout de même de tenter cet exploit et de faire appel à ton intuition pour t’y aider 😉


Voici quelques recommandations :


Neutre ou stylisée une police peut donner une impression de rapidité ou de lenteur, de lourdeur ou de légèreté, de douceur ou de rudesse. Les détails des dessins peuvent également évoquer des expériences physiques et naturelles. Essayes donc de noter à côté de chaque typographie quels sont les mots qui te viennent naturellement à l’esprit. Quelles sensations ressens-tu en voyant cette police de caractère ?


Pour choisir ta police, tu peux également t’inspirer des images illustrant le texte ou d’objets et lieux en rapport avec le thème du texte.

D’ailleurs, je te conseille aussi de réaliser un moodboard si ce n’est pas déjà fait 🎨



L’objectif ultime est donc de trouver une typographie qui t’interpelle toi, qui est compatible avec l’usage numérique, qui a de fortes possibilités de plaire à ton lecteur et de lui procurer une émotion bien déterminée mais également de trouver des associations de typos judicieuses.

typographie web

Les règles pour un mariage réussi 

Une règle dit qu’il ne faut pas utiliser plus de deux polices dans un même projet, et notamment sur un site web. Pour une raison simple : c’est moins « casse-gueule » et cela définit une hiérarchie bien claire. 

En fait, plus tu utilises des typographies différentes, plus ton lecteur aura du mal à identifier les priorités de lecture et la signification des différentes informations. Cette règle est aussi valable pour maintenir l’unité esthétique du design visuel 🚨


Bien entendu cette règle est de temps en temps transgressée par des web-designers chevronnés. Si la complexité ou l’expressivité d’un projet nécessite sept ou huit polices de caractère pour assurer une bonne communication, c’est tout à fait louable. Louable mais pas facile. Je te conseille donc de suivre cette règle et d’en ajouter une supplémentaire uniquement si tu en ressens vraiment le besoin. Trois grand maximum donc 👌


Aussi, l’idéal (et le plus simple) est de trouver des typographies avec un contraste franc. Par exemple une police avec empattement et une police sans empattement. En effet, en combinant deux polices appartenant à une même catégorie, on a tendance à créer une confusion stylistique. Les deux polices ne seront pas suffisamment différentes pour que leur différence soit perçue. 

Tu peux également jouer avec du gras, de l’italique ou des majuscules ⚡

Mes conseils pour définir tes typographies

Quand utiliser des polices à empattement

Les polices à empattements donnent un côté plutôt formel et sérieux aux marques 🤓


Prends donc bien soin de déterminer au préalable ton univers de marque avant de choisir ta typographie.

Ces polices fonctionnent ainsi davantage avec des identités de marque raisonnables, appliquées, studieuses, réfléchies. Elles fonctionnent moins bien pour des marques informelles et décontractées. 

Elles évoquent également la sophistication et l’élégance et sont souvent utilisées pour des marques de luxe 🤑
Enfin, elles rappellent les temps anciens, l’histoire et les traditions. 


Bien entendu, il s’agit de conventions et tu peux tout à fait décider de mettre un coup de pied dans la fourmilière en utilisant une police avec empattement tout en ayant une marque jeune, accessible et fun.

Mais rappelle toi à quel point nous sommes conditionné.es par notre culture et nos habitudes. A moins d’avoir fait appel à un graphiste et de bénéficier d’une police 100% personnalisée, je te conseille donc de suivre ces quelques préconisations. 

Voici des polices à empattements qui fonctionnent très bien sur le web:


  • Cambria
  • Courier
  • Apparel
  • Libre Bodoni
  • Garamond
  • Playfair display
  • Argesta
  • Crimson Text
  • Bogart
  • Didot

Quand utiliser des polices sans empattement

Sans surprise, les polices sans empattement représentent l’exact opposé.

Elles sont idéales pour les marques qui souhaitent se montrer chaleureuses, décontractées, modernes, audacieuses 🔆


Ces polices semblent plus droites, plus simples et plus fluides. Elles sont souvent utilisées pour les textes informels et complémentaires : les textes de navigation, les légendes de photos ou d’illustrations, les signatures … Mais elles sont également idéales pour le corps du texte.

Voici des polices sans empattements qui fonctionnent très bien sur le web:


  • Muli
  • Calibri
  • Arial
  • Montserrat
  • Helvetica
  • Geneva
  • Pt sans
  • Lato
  • Sofia pro
  • Poppins
  • Source sans
  • Dejavu Sans

Quand utiliser des polices décoratives

Quand je parle de polices décoratives, j’entends plus précisément les polices cursives et les polices display. Ces polices, bien que digitales, imitent le trait de crayon sur le papier. 


Elles plaisent de par leur personnalité forte ✌️ Chacun a une écriture qui lui est propre et ces polices de caractère permettent de s’approprier une écriture qui fait un peu rêver. Par ailleurs, elles attirent l’attention car elles sont généralement artistiques et stylisées. 


Mais attention car elles peuvent être difficiles à lire sur de longues phrases, surtout sur le web. C’est donc une merveilleuse option pour tes titres et tes en-tête, mais pas pour ton corps de texte. 

L’idéal serait d’associer une police de caractère décorative et une police avec ou sans empattement plus sobre 🌟


Voici des polices décoratives qui fonctionnent très bien sur le web:


  • Nickainley 
  • Medula One
  • Admara
  • Nicole
  • Bradley Hand
  • Glass Hantica
  • August Script 
  • Danielle Signature
  • Warton
  • Beautiful Heart
  • Sinthya
  • Monatta
  • Grand Hotel

Ces polices sont pour la plupart disponible sur « Google Fonts ». Tu peux en retrouver également sur Créative market.