Comment choisir la typographie de votre site web et trouver la bonne combinaison

Webdesign | Branding

Le choix de la typographie pour son site web est parfois compliqué, voir frustrant. C’est pourquoi, souvent, vous choisissez des polices d’écriture au hasard, ou simplement qui vous plaisent. Mais, pensez-vous stratégie et cohérence ?

Pourtant, le choix d’une police ou de vos couleurs  n’est pas forcément anodin. Cela peut avoir un impact sur vos lecteurs, voir même de les faire partir. Voyons ensemble comment bien choisir vos polices d’écritures et trouver les bonnes combinaisons.

Dans cette article, vous allez découvrir :

Police, Fonte ou Typographie ?
3 conseils pour choisir la bonne police d’écriture ?
Ressources pour trouver vos typographies
Comment choisir la bonne combinaison pour ses polices ?
Ressources pour vos combinaisons
Comment retrouver une police de caractère utilisée par un autre site web ?

Choisir-Typographie-site-web-Illustration

Police, Fonte ou Typographie ?

Démarrons par un peu de vocabulaire. Non, rien de trop technique ou rébarbatif, je vous rassure ! Juste comprendre les subtiles différences en : police, font et typographie.

En effet, plusieurs confusions sont fréquemment utilisées ici et là. Même moi, je me sentais perdue au début. Certains parlent de Typographie, d’autres de polices de caractères ou encore de fonte. Essayons de remettre un peu d’ordre dans tout cela.

La Typographie

La typographie provient du grec et signifie littéralement le type d’écriture. C’est en fait le type de polices. Il en existe plusieurs. Les quatre principaux groupes comportent :

  • Serif : Police avec Empattement. Observez simplement la fin des lettres. Elles possèdent de petites pattes. C’est la famille la plus utilisée et la plus classique;
Exemple d'une typographie avec Serif
  • Sans Serif : Police sans Empattement. C’est une famille plutôt moderne et plus adéquate pour la lecture sur le web
Exemple de Typographie Sans Serif
  • Manuscrite, Cursive ou Script : Police reproduit l’écriture calligraphique.
Exemple de Typographie Script ou Cursive
  • Display ou décorative : Police décoratives ou exotiques. À utiliser avec parcimonie dans vos textes car difficile à lire.
exemple de Typographie Display ou Décorative

Ainsi, Open Sans fait partie du groupe typographique sans serif ou sans empattement.

Police de caractères ou d’écriture

La police de caractères ou d’écriture, c’est en fait l’ensemble des fontes, c’est à dire des versions, d’une même famille peu importe la taille ou la graisse. En effet, on parle de typo, souvent à tort et par abus de langage..

Voici un exemple : Time New Roman est une police de Caractère.

Pardon, mais qu’est-ce que la graisse ? Oui, la graisse d’une police, c’est la grosseur de la ligne du dessin. On les trouve le plus souvent en anglais. Voici quelques exemples de graisses avec leur traduction :

  • Thin = Fin
  • Light = Léger
  • Regular = Normal
  • Bold = Gras
  • Extra Bold = Très gras
  • Black = Noir

Enfin, la fonte

Qu’en est-il d’une fonte alors ? Et bien, vous vous en doutez peut-être déjà maintenant. C’est l’ensemble des éléments caractéristiques (ou versions)  d’une même police d’une taille et d’une graisse. Autant dire qu’il peut en exister beaucoup pour chaque police, non ? Hum ?!! Voyons un exemple concret :

Roboto Bold (Gras) 10 Pt est une fonte. Roboto Thin (fin) 42 Pt est une autre fonte.

Anecdote : En anglais, le problème de vocabulaire se présente également. Police se traduira par Typeface et Fonte par Fonts. Néanmoins, vous trouverez beaucoup le terme font pour police. Je ne rentrerai pas plus dans les détails.

En effet, la typographie est une matière (et un art) qui mériterait que l’on s’y intéresse de plus près. Néanmoins, ce n’est pas le but de cet article :). Si le sujet vous intéresse, voici trois sites que vous pouvez consulter pour aller plus loin.

Résumons :

Old Standard TT  est une police d’écriture de la famille typographique Serif (Avec Empattement) 
Old Standard Extra Bold 12 pt est une fonte

3 conseils pour choisir la bonne police d’écriture ?

Au tout début du web, le choix de typographie était très très limité. Heureusement, aujourd’hui, nous avons la possibilité de choisir des milliers de polices de caractère différentes. Mais comment choisir la bonne ? Voici quelques conseils pour vous aider.

Choisir une police d’écriture lisible

C’est un élément essentiel. N’hésitez pas à faire des tests en écrivant un petit paragraphe. De ce fait, on évite en général d’utiliser des polices décoratives pour écrire tout un texte. Cela fatiguera très vite votre lecteur. D’ailleurs, les polices sans serif sont plus facile à lire sur un écran. Expérimentez et choisissez !

Contrôler si votre police possède toutes les lettres

Ceci est primordial, pour nous qui écrivons principalement en français. En effet, nous utilisons les accents graves, aigus, circonflexes sur certaines lettres.   Il serait dommage que la police d’écriture que vous avez choisi ne les possèdent pas. Néanmoins, la plupart des polices disponibles sur le web possèdent ces caractéristiques.

Être stratégique

Chaque famille typographique exprime des sentiments différents. Aussi, chaque police aura traduira un sens particulier. Posez-vous la question suivante : que voulez-vous exprimer avec votre site web ? Voici quelques exemples afin de vous orienter :

  • Police Serif : Traditionnel, Classique, sérieux
  • Police Sans Serif : Moderne, minimaliste, épuré
  • Manuscrite ou Script :  Féminine, élégante et créative
  • Display ou Décorative : Amusante, Expressive

Par contre, quoiqu’il arrive, n’utilisez surtout pas la police la plus détestée de la planète : Comic Sans. Je vous laisse lire l’article du monde à ce sujet.

Conseil bonus : limiter vos choix

N’utilisez pas plus de deux ou trois polices différentes sur tout votre site web. Cela apportera une certaine cohérence et unité à l’ensemble de votre site. Par exemple, une police pour votre titre et sous-titre et une autre pour le corps de votre texte. Ensuite, pourquoi ne pas jouer sur la graisse et la taille (Hauteur et largeur) d’une même police ?

Ressources pour trouver vos typographies

Il existe des dizaines de sites où vous pourrez trouver la police de vos rêves. En choisissant vos polices, faites également bien attention aux droits d’auteur. En effet, pouvez-vous l’utiliser dans le cadre de votre site web et visuels réseaux sociaux ? Vous trouverez en général la licence dans le téléchargement de votre police.

Typographies gratuites :

Typographies payantes :

* L’astérisque signifie que ce lien est un lien affilié. Cela signifie que si vous achetez sur ce site une commission me sera reversée. Sachez que je ne conseille que des sites que j’utilise moi-même et dont je suis satisfaite.

Dernières ressources pour vous inspirer et trouver la police de vos rêves, le site Typement.

Le principe : Tapez votre mot et le site vous propose plusieurs polices. Ainsi, vous pouvez choisir entre Serif, Sans Serif ou Manuscrite. Avec son fond épuré, c’est parfait pour éviter les distractions. Prenez des notes et suivez votre instinct !

Comment choisir la bonne combinaison pour ses polices ?

Grâce à une bonne combinaison des polices de caractères, vous offrirez plus de variétés et de dynamisme à votre site web.

Comme dit précédemment, une ou deux polices de caractères suffisent généralement pour la plupart des site et va permettre de donner un peu de contraste. Rien de pire que de choisir des polices trop semblables.

Donnez du contraste et créez une hiérarchie

Si vous ne savez pas par où commencer, une bonne règle consiste à associer une police avec empattement (Sérif) et une police sans empattement (sans sérif).

Cela évite une certaine confusion visuelle. Ainsi, cela apporte plus de souplesse et une variation suffisante entre les deux. Elles sont intrinsèquement différentes.

Évidemment, cette méthode n’assure pas forcément un «bon» couplage, mais elle devrait vous aider à éviter les mauvaises.

Ci-dessous, un exemple de combinaison que vous pouvez utiliser.

Combinaison typographies

Si vous préférez utiliser une seule police, c’est possible. Pour apporter un peu de variété et créer une palette typographique riche, n’hésitez pas à jouer sur :

  • la taille;
  • l’espace entre les lettres
  • La graisse
  • les couleurs.

Cela permet de donner une sensation de diversité sans réellement en avoir.

Typographie même combinaison

Ressources pour une choisir votre combinaison :

Bonus : Comment retrouver une police de caractère utilisée par un autre site web ? :

Avez-vous déjà visité un site et souhaité savoir quelle police était utilisée ? En tout cas, moi oui et vous sûrement aussi ! Je ne vous le cache pas, il y a quelques années, cette tâche n’était pas si simple.

Heureusement, aujourd’hui, rien de plus facile. Il existe deux outils gratuits qui vont vous permettre d’identifier la police de caractère utilisé sur un site web.

L’extension Whatfont pour google Chrome

WhatFont est une extension que j’utilise depuis quelques années déjà et que je trouve super utile et facile d’utilisation.

1. Dirigez-vous sur le webstore de Google  et recherchez WhatFont. Pour aller plus vite, voici le lien direct

2. Installer l’extension dans votre navigateur. Vous la retrouverez à côté de la barre de recherche en haut à droite.

Retrouver-une-police-de-caractere-avec-Whatfont

3. Allez sur le site dont vous souhaitez trouver la police et cliquez sur l’extension WhatFont;

4. Passez votre souris sur un mot et découvrez la police utilisée.

Retrouver-une-police-de-caractere-avec-Whatfont

Le site myfonts pour les images

Whatfont est utile pour trouver la police d’un site web, mais si la police se trouve sur une image ?

L’autre outil que vous pouvez alors utiliser est le site “Myfont.com”. Le site est en anglais mais nul besoin d’être bilingue pour l’utiliser 😉

1. Dirigez-vous sur le site Myfonts

2. Cliquez sur “Choisir un fichier” pour téléverser l’image que vous avez enregistré sur votre ordinateur

3. Le site va alors essayer de sélectionner plusieurs caractéristiques de votre image. Vous pourrez effectuer quelques ajustements en remplissant la lettre choisie. Cliquez ensuite sur “Continue

4. Ensuite, vous récupérez toutes les polices qui ressemblent de près ou de loin à celle de votre image. 😉

Bon, j’avoue avoir effectué plusieurs tests peu concluant. Néanmoins, cela vous permettra peut-être de trouver une police approchante, ce qui permettra de vous distinguer.


Conclusion

Voilà, Vous devez maintenant être plus confiant dans le choix de votre typographie pour votre site web. Comme vous l’avez vu, rien de bien compliqué, juste quelques bonnes pratiques à suivre pour obtenir un très bon résultat qui plaira à votre audience et à vous même.

N’hésitez pas à montrer votre personnalité grâce à un choix plus personnel que vous n’utiliserez qu’en “accent” sur vos visuels, ou sur votre logo.

Maintenant, la typographie et les polices d’écritures ne sont qu’une partie des outils qui composera la palette de votre identité visuelle. Elle doit être pensé et conçue en ayant en tête vos objectifs et votre audience.

Alors, quelles polices avez-vous choisies pour votre identité visuelle ?  

Comment choisir la typographie de votre site web
Comment choisir la typographie de votre site web

Vous aimerez également lire…

Comment retrouver son HEX et bien l’utiliser

Comment retrouver son HEX et bien l’utiliser

Avez-vous déjà entendu parler de votre Hex ? Si non, cet article est fait pour vous. Vous saurez tout sur le code couleur qui vous permettra de personnaliser votre site web en quelques secondes. Un guide pour vous aider à le choisir et l’utiliser et l’intégrer sans savoir coder.

lire plus

1 Commentaire

  1. Deltrey

    Hello
    Merci pour cet article très complet et pour les outils !

    Réponse

Soumettre un commentaire

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

Restons connectés !

Checklist Créer votre site web pro

La checklist de votre Site Pro

Toutes les étapes pour bien démarrer votre site web pro en 2019

Confirmez-votre inscription

You have Successfully Subscribed!

planifier-son-site-web-pro-roadmap

Planifier votre site web pro stratégiquement

Téléchargez gratuitement votre feuille de route

Confirmez-votre inscription

Un e-mail vient de vous être envoyé pour confirmer votre inscription et télécharger votre guide !

4K Partages
Partagez103
Tweetez
Enregistrer4K
Partagez