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.

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;
  • Sans Serif : Police sans Empattement. C’est une famille plutôt moderne et plus adéquate pour la lecture sur le web
  • Manuscrite, Cursive ou Script : Police reproduit l’écriture calligraphique.
  • Display ou décorative : Police décoratives ou exotiques. À utiliser avec parcimonie dans vos textes car difficile à lire.

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.

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.

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.

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

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 n’est qu’un 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 ?  

Bienvenue, je suis Gaïa !

Je suis formatrice web pour (micro) entrepreneurs, TPE et indépendants.

Ici, sur le blog, j’aime partager mes conseils liés à WordPress, Webdesign, Organisation & Biz sans oublier Divi,  mon thème WordPress préféré.

felis fringilla at in porta. commodo justo id sem, Nullam
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!

1K Partages
Partagez
Tweetez
Enregistrer1K
Partagez
Email