5 outils pour bien choisir la typographie de son site internet

Trouvez la typographie idéale pour votre site web ! Voici 5 outils pour vous aider à identifier la famille de police qu'il vous faut pour votre projet : prévisualisation, associations de fonts, mise en situation des polices, plugin Figma, etc.

Publié le 
17/7/2022
Modifié le 
27/3/2023
5 min
Plusieurs noms de typographies écrits en noir sur fond blanc

La typographie est un élément essentiel d'un site et de votre communication.

Par sa forme, sa taille, sa couleur, la police transmet des émotions aux lecteurs, tout comme le ferait une image ou illustration. Chaque police est interprétée de manière unique et renvoie un message précis, notamment lié aux codes sociaux. Par exemple, nous associerons facilement un site noir et blanc avec une police sobre, épurée, droite à quelque chose de haut de gamme, de luxe, de mode. De la même manière, une police plus épaisse, en majuscule et en italique s'intégrera parfaitement dans un site sportif.

Les codes sociaux et habitudes web nous permettent donc aujourd'hui de facilement associer une police à un secteur, un produit, un service, un positionnement, ce qui rend d'autant plus important le choix de votre typographie.

Comment choisir sa police ?

Lorsque vous choisissez une police, vous vous intéresserez en réalité à une famille de polices. Une famille de typographie est un ensemble de polices ayant le même design, mais dont le style varie (gras, semi-gras, italique, romaine, etc.).

La première chose à faire est de s'interroger sur le nombre de police(s) dont vous aurez besoin pour votre site web.  Allez-vous utiliser une "superpolice" pour l'ensemble de votre projet ou allez-vous choisir plusieurs polices pour dissocier les titres, sous-titres, corps ?

Vous devrez ensuite prendre en compte plusieurs critère pour le choix de votre ou vos typographie(s) :

  • Textes en majuscule et minuscule
  • Ponctuations
  • Caractères spéciaux et glyphes
  • Richesse de la famille (plus ou moins de styles)
  • Lisibilité et accessibilité
  • Compatibilité avec d'autres polices
  • Cohérence avec votre image de marque

Autant de critères qui peuvent complexifier le choix d'une typographie adaptée. Voici 5 outils qui vous aideront à trouver une police optimale pour votre projet.

1. Adobe Fonts

interface adobe font avec plusieurs typographies et un système de filtrage avancé

Adobe Fonts est une véritable base de données qui regroupe des centaines de familles de polices différentes. Un système de filtrage très pertinent vous permettra de trouver une police selon des critères précis :

  • La langue,
  • le style,
  • la classification (Serif, Sans Serif, Égyptienne, Cursive, Mono, Main),
  • la largeur,
  • l'épaisseur,
  • l'œil,
  • le contraste,
  • etc.

En savoir plus sur Adobe Font

2. Fontjoy

interface fontjoy avec mise en situation de trois typographies en noir sur fond gris

Un outil simple et efficace pour faire correspondre plusieurs familles de polices entre elles. Fontjoy vous permet d'associer, soit aléatoirement soit de manière précise, plusieurs familles de polices. Les polices sont mises en évidence à trois niveaux : titre, sous-titre, corps de texte.

Si votre choix est déjà porté sur une typographie en particulier vous pourrez également la sectionner pour que l'outil vous propose des polices complémentaires de manière aléatoire.

En savoir plus sur Fontjoy

3. Fontpair

plugin figma fontpair dans un fichier figma avec des typographies mises en situation sur texte blanc et fond noir

Un outil très utile pour vous projeter ! L'outil Fontpair vous permet de trouver une police parmi des dizaines de polices gratuites, la plupart des Google Font. L'avantage de Fontpair, est qu'il vous permet également de trouver des associations de polices. Très utile si vous souhaitez utiliser des fonts différentes pour les titres et le corps de texte par exemple.

L'outil vous offre également des prévisualisations de polices, sur des sections de site web. Vous pourrez ainsi plus facilement vous projeter en associant des polices à des styles, à des couleurs, à des univers graphiques.

EN BONUS

Fontpair dispose d'une extension Google et d'une intégration Figma !

En savoir plus sur Fontpair

4. Google Fonts

interface google font avec plusieurs polices et un système de filtrage

Google Fonts regroupe l'ensemble des polices proposées et recommandées par Google. Ce sont toutes des polices gratuites, que vous pourrez directement télécharger depuis la plateforme.

Google Fonts propose plus de 1430 familles de typographies, dans des dizaines de langues différentes. Vous pourrez choisir vos polices selon des catégories et propriétés très simplifiées.

En savoir plus sur Google Font

5. Typespiration

interface typespiration avec plusieurs mises en situations de textes sur des sections de site web

Associez des couleurs à vos polices ! Typespiration est un outil gratuit qui, en plus de vous aider à trouver la typographie idéale, associe des couleurs aux fonts. Typespiration vous permet également de chercher des associations de polices de caractères pour marier titres et corps de texte. Directement inspirées de sites web, les mises en situations vous permettent de vous projeter par exemple pour mettre en forme les liens sur les textes, les couleurs de textes sur un bouton ou CTA, les couleurs de sublines, etc.

Cet outil vous aidera à faire de votre typographie un véritable élément de design pour votre site.

En savoir plus sur Typespiration

6. Bonus : Dafont

Dafont est une base de données de typographies très connue, notamment car l'outil propose des centaines de polices téléchargeables gratuitement. Entre thématiques, langues et styles, Dafont vous permet ainsi de filtrer, prévisualiser et télécharger de nombreuses polices pour votre site web.

En savoir plus sur Dafont

Apprenez à intégrer votre police dans Webflow

Prêt(e) à avoir un site qui convertit ?

Améliorer votre visibilité en ligne grâce à l’experience, l’excellence et la réactivité de Digidop !

Restez informés de l’actu Digidop !