Choisir le meilleur style de police pour votre site web peut faire une énorme différence. Non seulement les polices affectent la lisibilité de votre contenu, mais elles peuvent également avoir un impact psychologique puissant sur vos visiteurs. 

Comme pour le choix du logo ou des couleurs, la typographie est déterminante pour vous distinguer. 

La typographie reflète votre image et vous permettra d’affirmer votre identité. 

Votre typographie ne sera pas la même en fonction de votre activité. Il est évident que si vous tenez un restaurant de Cupcakes vous n’allez pas utiliser la même typographie qu’un organisme de formation. 

Le choix d’une bonne typographie est essentielle pour convaincre les visiteurs.

N’oubliez pas, il ne faut que 0,5 secondes pour se faire une opinion sur un site Web, et 94% de ce jugement est lié au design.

Les polices sont donc cruciales pour créer une expérience utilisateur impressionnante et transmettre les valeurs de votre marque. 

Sans plus de blabla, voici tout ce que vous devez savoir pour choisir la typographie qui vous fera briller auprès de vos prospects.

  1. Les 5 catégories de typographies : signification et exemples 
  2. Comment choisir sa typographie ? 
  3. Les plus belles polices pour le web 
  4. Les outils pour choisir une police 

Les 5 catégories de typographie : signification et exemples 

Afin de vous guider au mieux dans la jungle de la typographie, il faut tout d’abord que vous compreniez les 5 catégories de typographies qui existent. 

Chaque catégorie de typographie à une signification et il est important que vous les connaissiez avant de choisir celle ou celles qui conviendra à votre entreprise. 

  1. Serif : polices avec empattements

Serif (ou empattement) est une ligne ajoutée à chaque extrémité des caractères. C'est un empattement au bout de chaque lettre.

Cette arrondie à la fin de chaque lettre permet de lire plus facilement un corps de texte. 

Ce style de typographie est en général utilisé pour les journaux et les livres. 

Les plus connus comme le journal du New york Times ou le Monde c'est le style Serif à son extrême. 

Elle peut être également utilisée sur le web, mais il faut faire attention à la lisibilité lors du choix de la police. 

Exemples de polices Serif : Times New Roman, Baskerville, Georgia Italic, Merriweather. 
  1. Sans Serif : les polices avec empattements

À l’inverse, une police sans serif (ou police sans empattement) n’a pas d'empattement de part et d'autre des lettres. 

Sans Serif  est considéré comme simple mais élégant, tandis que les empattements sont lourds et décoratifs.

En raison de sa simplicité et de sa grande lisibilité, on retrouve très souvent ce type d’écriture sur le web.

Ce type de fond est parfait pour les design minimaliste et moderne. 

Exemples de polices Sans Serif : Arial, Open Sans, Montserrat, Nunito Sans, Roboto
  1. Script : les polices manuscrites

Les polices dites “Script” se rapprochent de l’écriture manuscrite. Elle sont qualifiées d'élégantes et féminines. 

Par contre, attention à l’utilisation de cette typographie en termes de lisibilité sur le web.  

Il vaut mieux l’utiliser par parcimonie ! 

Exemples de polices Script : Parisienne, Elegant, Retro. 
  1. Monospace 

Les polices dites “Monospace ” donnent un sentiment de robustesse et de stabilité.

Comme la catégorie “Script”, ces polices perdent de leur effet si elles sont utilisées dans tout un corps de texte. 

Elles vont plutôt être utilisées dans un logo, des en-têtes ou encore des citations. 

Associez- les par exemple avec Open Sans. L’important est de ne pas interférer dans la lisibilité. 

Exemples de polices Monospace : IBM Plex, Space Mono

  1. Display 

Les polices dites “Display” sont pour ceux qui souhaitent créer une identité de marque unique. Elle requiert beaucoup de compétences en design et un œil expert. 

A moins que vous ne soyez designer, nous ne vous conseillons pas cette catégorie. 

Exemples de font Display : Lobster, Poiret one 


Connaître la signification de chaque famille de typographie est très intéressante dans la création de votre identité visuelle. 

Les gens jugent vos polices avant de lire votre contenu – assurez-vous que votre police correspond à votre identité de marque !

Comment choisir sa typographie ?

Maintenant, que vous connaissez la signification des catégories de polices, vous pouvez vous lancer dans le choix de votre typographie. 

Etape 1 : Commencer avec votre marque 

C'est une bonne idée de commencer d'abord votre marque, puis de trouver une police qui correspond à la personnalité de votre marque.

Votre typographie doit vous ressembler et véhiculer vos propos et les valeurs de votre entreprise. 

Il est évident qu’un cabinet d’avocat n’utilisera pas la même typographie qu’un restaurant.

Vous devez connaître votre marque mais surtout vos prospects. 

Quel sentiment souhaitez-vous qu’il ressente en arrivant sur votre site ?  

Cela peut être du confort, du professionnalisme ou encore du sérieux. 

Typographie : étape 1


Pour vous aider, vous pouvez déjà regarder ce que font vos concurrents mais aussi vous inspirer avec les sites Awwards ou Lapa Ninja qui vous permettront de voir d'autres typographies. 

Après avoir sélectionné la typographie, il faut s’assurer qu’elle soit lisible. 

Etape 2 : La lisibilité

Clairement, l’un des points le plus importants, choisir une police non lisible est le carton rouge à éviter.

Il y a beaucoup de polices qui sont très belles mais aussi illisibles. 

Par ailleurs, il faut penser à tous vos lecteurs par exemples, les polices sans empattement (ou « sans serif ») telles Arial, Comic sans MS, Tahoma ou Verdana sont plus faciles à lire pour les dyslexiques, qui confondent le « d » et le « p » ou le « m » et le « n ».

Pour tester la lisibilité, vous pouvez utiliser l’outil Fonts in Use, qui vous montre la police choisie sur différents supports et par catégories métiers.  

Etape 3 : Tester les tailles 

Votre police est top en 16 pixels. Mais qu’en est-il lorsque vous augmentez la taille ou vous la diminuez ? 

Challenger votre choix, il y a un outil top, Type Scale qui est un "visual calculator". 

Prenons par exemple, la typographie Parisienne. Elle est très bien lorsque nous choisissons une taille de 40px, mais elle difficilement lisible lorsque nous sommes en dessous de 20px. 

Etape 4 : Le choix de plusieurs polices 

Sur votre site web vous pouvez choisir une ou plusieurs polices. 

La règle importante est de ne jamais choisir plus de trois polices pour votre site Web. 

Les polices sont réparties comme suit :

  • Une police pour les en-têtes et les titres de page
  • Une police pour les zones de contenu principales
  • Une police pour les citations ou les sous-titres (facultatif)

Trois c’est le maximum, sinon votre conception de sites Web peut commencer à être encombrée et déroutante - et vous bousillerai cette identité de marque sur laquelle vous avez travaillé si dur !


PS: Ikea a choisit qu’une police pour ces titres et contenu (Noto Sans) . 

Les 10 plus belles typographies pour votre site web 

Il y aurait plus de 550 000 typographies !

Assez compliqué de faire son choix, j'en conviens. C'est pour cela que nous vous avons listé les 10 polices qui fonctionnent parfaitement sur le web :

  1. Roboto

Roboto est une police Sans Serif. 

Clairement, l'une des polices les plus utilisés sur le web pour le corps de texte. 

Très facile à lire, elle améliore l'expérience utilisateur. 

Inspiration : Le site 7 Eleven utilise Roboto en texte et Right Grotesk Compact Dark pour le menu navigation. 


  1. Merriweather

Merriweather est une police Serif. 

Merriweather a été conçu pour être lu sur des écrans, ce qui en fait l'un des meilleurs choix pour la lisibilité. C'est une police à empattement qui propose de nombreux styles.

Inspiration : Le site Embodied utilise Merriweather pour les inter titres  et Open Sans pour le menu navigation.

  1. Dosis

Dosis est une police Sans Serif

Légèrement futuriste est idéale pour les sites web du domaine de la science et de la technologie.

Inspiration : Notre site Aleada.fr, nous utilisons Dosis pour les titres et le menu de navigation et Roboto pour le texte. 

  1. Montserrat

Monserrat est une police Sans Serif.

Peut être utilisé pour les titres et le corps de texte. 

Inspiration : Le site Bradia utilise Montserrat pour les titres et le texte. 

  1. Karla

Karla est une police sans Serif.

Elle donne de la personnalité à votre design. 

Inspiration : Le site Le Kanoun utilise le Karla pour le texte et Oswald pour le menu de navigation. 

  1. Poppins

Poppins est une police sans Serif. 

L'utilisation de courbes par Poppins dans sa mise en forme lui donne une sensation ouverte et amicale. 

Il propose un choix de 18 styles différents, allant des designs très fins et subtils aux designs lourds et audacieux.

Notre préféré est Extra-bold 800, qui fera vraiment ressortir vos titres !

Inspiration : Le site Increaseo utilise Poppins pour le menu de navigation et PlayfairDisplay pour le texte . 

  1. Lato 

Lato est une police sans serif. 

Elle est décrite par le créateur comme “Féminine et masculine, sérieuse mais aussi amicale. Avec un sentiment d’été”. 

Inspiration : Le site Glossarie utilise Canela text pour les titres et Lato pour le texte.

  1. PT Serif

PT Serif est une police de caractères à empattement.

Classique et parfaite pour un site web. 

Inspiration : Le site Bellroy utilise PT Serif pour les titres et Lato pour le texte.


9. Raleway 

Raleway est une police Sans serif. 

Raleway est une police élégante avec un poids fin - le « W » unique la fait vraiment ressortir.

Inspiration : L'application Bark utilise uniquement Raleway

Les outils pour vous aider à choisir une typographie

Faire le choix d'une typographie est difficile mais voici les outils qui pourront vous aider. 

L'outil qui vous aidera à choisir une typographie


www.fontpair.com


Qui  propose les typographies populaires et les combinaisons possibles !

L'outil qui vous aidera à combiner une typographie


www.fontjoy.com


Génère des combinaisons de typographies titres, sous-titres et corps de texte


L'outil qui vous aidera à tester la taille d'une typographie


www.type-scale.com


Affiche la typographie sous différentes tailles, idéale pour tester la lisibilité. 


L'outil qui vous aidera à vous projeter

https://fontsinuse.com/

L'outil t'affiche les typographies sur différents supports. Ici c’est la typographie Poppins

Fonts In Use

Petit plus : Si vous aimez jouer à la loterie

www.mixfont.com


Combinaison de typographies aléatoires

Conclusion

Les polices sont importantes. Ils véhiculent du sens et peuvent faire ou défaire votre identité de marque.

Les gens jugent vos polices avant d'avoir lu un seul mot de votre contenu, il est donc essentiel de choisir le meilleur style de police pour faire cette première impression vitale.

Maintenant que vous savez pourquoi les polices sont importantes et lesquelles conviennent le mieux à votre marque, vous êtes prêt à commencer à choisir vos propres styles de police ! Nous sommes disponibles pour vous aider, n'hésitez pas à nous contacter. 

Go top
Travailler avec nous

Vous avez un projet ?