fbpx

Comment bien choisir ses typographies pour son site internet avec Google Font

Comment choisir les polices adaptées pour son site web et rendre la lecture de son contenu agréable et attrayant ?

Voici quelques clés pour mieux comprendre toutes les subtilités d’une typographie et faire un choix adapté.

Votre site internet est un support de communication à ne pas sous estimer, c’est une importante vitrine virtuelle qui reflète l’identité de votre entreprise et votre professionnalisme. Il est donc primordial de soigner ses éléments graphiques, à commencer par le choix des typographies !

1 – Où rechercher la typographie idéale pour son site internet ?

Chercher la bonne police : oui, mais où ?
Pour un projet web, il existe une référence incontournable : Google Font

Google font c’est :

  • un catalogue de 915 familles de polices (actuellement en 2019)
  • des polices disponibles en 135 langues
  • des polices 100% gratuites et Open Source
  • des polices faciles à installer et les plus rapides au chargement
  • des polices compatibles avec tous les navigateurs et appareils

Des polices complètes, optimisées pour le web, mises à jour, gratuites et faciles à installer… pourquoi chercher plus compliqué ? Tout est déjà prêt et google propose un catalogue de plus en plus varié, avec une interface de recherche intuitive et dynamique.

2 – Comment rechercher sur Google Font + quelques définitions

Alors que trouve-t-on sur Google Font ? Vous trouverez sur la première page les différentes polices organisées selon leurs FAMILLES ainsi qu’une barre proposant différents filtres de recherche sur la droite, dont les CATÉGORIES.

Comment rechercher sur Google Font

Voici quelques définitions pour mieux s’y retrouver :

Les Familles de polices (Font families)
Les polices sont classées par familles, elles comportent donc un “nom de famille”.
Par exemple “Roboto”, “Open Sans”, “Lato”, etc. Chacune de ces familles pourront contenir différentes catégories et différents styles.

Les Catégories de polices (Categories)
Les familles de polices sont classées selon différentes catégories (voir barre latérale) :

Serif : typographie avec empattements, les caractères ont des “extensions” ou “barres” aux extrémités.

Sans Serif : typographie sans empattements, avec des caractères à “bâton”.

Display : catégorie de polices destinée à être “affichée”, elle sont souvent utilisées pour des titrages. Ces polices sont intéressantes lorsqu’elle sont affichées en assez grande taille.

Handwritting : ce sont des polices proches d’un style d’écriture manuscrite. Il existe beaucoup d’effets différents, proche de la calligraphie à la plume, au pinceau, feutre, stylo, rond, penché, etc.

Monospace : les caractères des polices monospace occupent tous exactement la même largeur sur l’écran. Par exemple, le A aura la même largeur que le L. C’est le même principe que les polices utilisées autrefois sur les machines à écrire ou sur les montres digitales.

Ces différents éléments constituent les critères de base pour filtrer et trouver ce que l’on cherche.
Sur google font, il existe d’autres filtres de tri pour plus de précisions :

Sorting : trier les polices selon les tendances, la popularité, les ajouts récents ou par ordre alphabétique.

Languages : sélectionner une langue avec des caractères non latins.

Number of styles : trier les polices en fonction du nombres de styles qu’elles proposent (voir partie 3).

Thickness : régler la finesse de la typographie (du plus fin au plus gras).

Slant : définir l’inclinaison d’une typographie (du plus droit au plus penché).

Width : trier les polices selon la largeur des caractères (du plus condensé au plus large).

3 – Comment comparer et tester une police ?

Lorsque vous arrivez sur la fiche d’une police, vous pouvez y retrouver la liste des différents caractères qu’elle comporte, ainsi que les styles disponibles.

Pour un site en langue française, il est évidemment conseillé de choisir une typographie qui dispose des caractères avec accents aigu, grave, circonflexe, etc.

Une police peut exister en différents styles (light, regular, bold, etc). Ces styles définissent simplement les différentes versions d’une police : du caractère le plus fin au plus gras.

Si vous souhaitez utiliser certains mots en gras dans vos textes, privilégiez une police avec au moins deux styles : regular et bold. Si vous souhaitez disposer de plus d’effets de style et jouer sur les contrastes, vous pourrez jongler entre le light, le medium, le regular, le bold, etc.

Pour vous décider sur une typographie, rien de plus simple avec Google Font : remplissez la case “type here to preview text” avec le titre de votre site par exemple et voyez le résultat en direct. Vous pouvez aussi régler la taille de police pour vous donner une idée de la taille rendue à l’écran.

Mon astuce : ouvrir dans différents onglets les polices qui m’inspirent, tester la même phrase pour chacune, puis comparer et procéder par élimination.

Comment associer les polices & hiérarchiser ses informations

4 – Comment associer les polices & hiérarchiser ses informations

Commençons par une règle, selon moi, fondamentale : n’utilisez pas plus de 3 polices différentes, sinon la lisibilité de votre site internet risque d’être affecté et la compréhension seras beaucoup plus laborieuse, sans parler du temps de chargement supplémentaire.

Google en recommande même plutôt 2 et comme Google Font à été conçu pour nous faciliter la vie, il nous propose directement un comparateur d’associations de polices.
Vous pourrez trouver quelques suggestions pour choisir une deuxième police adaptée à la typographie premièrement sélectionnée. C’est un outil pratique, qui permet de trouver en un coup d’oeil les combinaisons populaires et ainsi éviter les grosses erreurs de style.

Comment comparer et tester une police

Google propose un outil très intéressant mais je vous conseille de ne pas vous limiter uniquement à ces suggestions. N’hésitez pas à comparer par vous même d’autres combinaisons. Une typo manuscrite pour les titres par exemple et une typo plus classique et lisible en petite taille pour les paragraphes.
Rien n’empêche non plus de n’utiliser qu’une seule police pour son site web. Il suffira alors de jouer sur les tailles et les styles pour hiérarchiser son contenu.

La combinaison que vous choisirez doit avant tout matcher avec votre contenu et votre identité.

Par exemple, privilégiez la clarté et des caractères aérés pour un style minimaliste. Choisissez une police manuscrite ou sérif pour un style plus traditionnel, etc.

Osez les contrastes entre les titres et les paragraphes pour donner un caractère graphique à vos textes mis en avant. Utilisez une police facile à lire, avec des caractères simples, pas trop condensés ni trop gras pour vos paragraphes plus longs.

Il est surtout question de logique et de déduction : essayez une police aux caractères type comics pour parler de services ou produits haut de gamme et voyez l’incohérence … testez une police au style calligraphique en 12px, vous verrez que ce n’est pas l’idéal pour lire un texte de 300 mots …

Pour partager cet article

Partager sur facebook
Partager sur linkedin
Partager sur twitter
Partager sur email

pour Épingler cet article sur pinterest

comment trouver et choisir-les bonnes typographies pour son site
comment bien choisir ses typographies pour son site internet

Découvrez nos autres articles

rejoignez notre newsletter

Ne loupez pas nos prochains conseils marketing, tutos & nouveautés pour votre business !