Trouver la police Google idéal pour ton site web

Google fonts propose une bibliothèque entière de polices web libres parmi lesquelles tu peux choisir. C’est formidable ! Mais que se passe-t-il lorsque tu fais réellement défiler cette liste de 650 options ? Les yeux se voilent, les polices commencent à se mélanger, et il se peut que tu choisisses une police commençant par “A” pour ne pas avoir à la faire défiler davantage (c’est peut-être ainsi que l’Arial est devenu si populaire…).

Mais ce n’est pas une fatalité. Le choix des polices de caractères peut être amusant plutôt qu’accablant. Cette astuce Jimdo passe en revue les idées de base derrière les combinaisons de polices réussies, et fournit également une liste de ressources où tu peux trouver les combinaisons de polices Google que tu aimes.

De combien de polices différentes ton site Web a-t-il besoin ?

Nous recommandons généralement de choisir 2 ou 3 polices :

Texte du corps/paragraphe

Tu ne peux pas te tromper avec une police sans empattement qui est très facile à lire, surtout dans les petites tailles. Évites les polices cursives ou tout en majuscules, qui deviennent difficiles à lire au-delà de quelques mots.

Titres

Ici, tu peux utiliser une police plus décorative ou amusante, car tu ne l’utilises que pour de courts morceaux de texte. Tu peux également utiliser une police tout en majuscules. Le choix d’une police unique peut contribuer à donner un peu de style à la conception de ton site Web.

Menus de navigation

Tu peux reprendre l’une de tes deux premières polices ou choisir une troisième police complémentaire. N’oublies pas que tes menus de navigation doivent être faciles à lire. Nous te recommandons donc d’éviter les polices cursives ou trop stylisées. Comme pour les en-têtes, tu peux utiliser une police tout en majuscules.

Pour plus d’informations sur la différence entre les polices avec empattement, sans empattement et décoratives (et les recommandations pour chacune d’entre elles), consultes l’article “Guide des polices Web de Google”.

Peux-tu simplement utiliser la même police partout ?

Tu peux le faire. En fin de compte, il n’y a rien de mal à avoir un site Web simple et minimal, et tu peux différencier tes titres et le corps du texte en utilisant des tailles et des couleurs différentes.

Cela dit, l’utilisation de deux ou trois polices différentes est un bon moyen d’ajouter de la personnalité et un intérêt visuel à ton site. Des polices différentes contribuent à développer un sentiment de cohérence et de hiérarchie dans tes pages Web. À l’instar des panneaux de signalisation, des polices différentes utilisées de manière cohérente serviront de repères à tes utilisateurs, qui pourront ainsi parcourir rapidement une page et savoir quel type d’information ils ont devant eux.

N’oublies pas que la variation ne signifie pas un “arc-en-ciel de polices”. Utiliser trop de polices, c’est comme avoir trop de panneaux de signalisation à une intersection : c’est écrasant et déroutant.

Alors comment choisir des polices qui vont ensemble ?

Lorsque tu associes des polices, tu essayes d’introduire à la fois l’unité et la variété. En d’autres termes, tu ne veux pas que les polices soient si semblables qu’elles se ressemblent trop (ce qui va à l’encontre de l’objectif d’utiliser des polices différentes). Tu ne veux pas non plus qu’elles soient si différentes qu’elles s’entrechoquent ou donnent l’impression de provenir de mondes totalement différents.

Voici quelques techniques de correspondance :

Contraste

Si tu choisis une police décorative très forte pour tes titres, tu peux l’équilibrer avec une police simple sans empattement qui ne se disputera pas l’attention.

Personnalité

Les polices peuvent être modernes, audacieuses, douces, sophistiquées, ludiques ; et ces “personnalités” de polices doivent refléter la personnalité de ta marque. Si tu recherches, par exemple, un look plus féminin pour ton site Web, tu peux choisir deux polices qui partagent cette personnalité, même si elles sont différentes.

Période de temps

Si tu cherches à évoquer une certaine époque, tu peux choisir deux polices rétro ou deux polices plus anciennes.

Concordance

C’est un peu plus difficile à repérer que le contraste, mais des proportions ou des formes de lettres similaires peuvent aider deux polices à s’accorder. Les polices de la même famille (comme Roboto et Roboto Slab) partagent des traits similaires.

Dans l’ensemble, veille à trouver un bon équilibre. Comme le dit Ian Yates de Tuts+, “Penses à tes polices comme à des invités à une réception de mariage ; un seul animateur est généralement suffisant, car trop de personnalités fortes peuvent rendre l’atmosphère gênante.”

Je préfère opter pour quelque chose qui a fait ses preuves. Existe-t-il des sites qui suggèrent de bonnes combinaisons de polices ?

Tu parles. Il existe quelques sites que tu devrais absolument consulter et qui recommandent certaines combinaisons de polices Google et te montrent exactement à quoi elles ressemblent. Si tu n’as pas envie de réinventer la roue, choisis l’une de leurs combinaisons et lance-toi !

Répertoire Google Web Fonts

Outre un filtre et des exemples intéressants, le répertoire de Google propose également des suggestions de combinaisons sous l’onglet “Combinaisons”. Si tu connais déjà une police que tu aimes (dans cet exemple, nous utiliserons Pacifico), recherche-la dans le répertoire comme suit.

Fontpair

Ce site Web très pratique propose une liste de recommandations de paires de polices, classées par type (par exemple, Serif/sans-serif, Cursive-serif). Mieux encore, tu peux taper ton texte directement sur le site pour voir à quoi il ressemble avec chaque combinaison de polices.

Initiative 25×52

Ce projet en cours offre une belle inspiration en matière de polices de caractères avec des passages des Fables d’Ésope présentés dans différentes combinaisons de polices Google. C’est amusant à parcourir, même si tu n’es pas à la recherche de nouvelles polices.

Type.io

Type.io est comme un musée de beaux sites Web sélectionnés sur le Web, avec des informations sur les polices utilisées dans chacun d’eux. Tu peux trier leur bibliothèque pour n’afficher que des exemples de polices Web Google.

FontsinUse

Similaire à type.io, Fonts in Use est une collection de sites Web triés par police. Il s’agit d’une bonne option si tu as déjà une police en tête et que tu souhaites trouver des idées de façons créatives de l’utiliser ou de l’associer.

TypeConnection

Tu veux t’amuser un peu plus ? Type Connection configure ta recherche de polices comme un jeu de rencontre, afin que tu puisses t’entraîner à choisir les bonnes correspondances.

Finding fonts in the wild

Que se passe-t-il si tu tombes par hasard sur un site Web utilisant des polices que tu aimes ? Eh bien, tu as de la chance, car il est facile de regarder sous le capot et de voir quelles polices sont utilisées.

Chrome et Firefox proposent tous deux des plugins qui t’indiquent les polices exactes que tu vois. WhatFont et Fontface Ninja sont deux excellentes options.

Conclusion

Un dernier conseil : ce n’est pas parce qu’une police “web” de Google existe qu’elle est adaptée à un site Web. Fais défiler la liste et tu verras de nombreuses polices qu’il est difficile d’imaginer en usage réel. Si tu penses qu’une police est trop difficile à lire, elle l’est probablement.

N’oublies pas non plus de ne pas trop t’inquiéter à ce sujet. Comme dans la vie réelle, il n’y a pas de combinaison “parfaite”. Si tu trouves une combinaison de polices qui te plaît et qui est lisible, vas-y et amuses-toi !

Partage cet article !

Partager sur facebook
Partager sur twitter
Partager sur linkedin
Partager sur pinterest

Tu aimeras aussi :