Top 40 des Google Fonts pour améliorer la conception de votre site web
Dans cet article, je veux vous montrer les 40 meilleures polices Google pour améliorer la conception de votre site web. Google fait tout, et a même créé ses propres polices, les “Google Fonts”. Je vais vous montrer ce qu’elles sont, lesquelles sont les meilleures et comment les combiner. À la fin de l’article, vous verrez également comment utiliser les meilleures polices de Google pour améliorer la conception de votre site web.
Que sont les Google Fonts et pourquoi les utiliser ?
Google Fonts est un catalogue de plus de 700 polices de caractères gratuites et open source. Cela signifie que vous pouvez utiliser n’importe quelle police du vaste catalogue de Google sur votre site web ou votre blog.
C’est une grande avancée compte tenu de la polyvalence qu’elle nous offre en termes de conception de pages web. Auparavant, seules quelques polices pouvaient être utilisées dans la conception de sites web, les “polices sûres” (Times New Roman, Arial, Andale mono…). Si ces polices étaient utilisées, il y avait un risque que le navigateur ne les affiche pas correctement.
Avant d’avoir cette possibilité, de nombreux concepteurs qui voulaient utiliser d’autres polices les ont mises en image. Ce n’est pas le meilleur positionnement et, heureusement, il n’est pas nécessaire de nos jours.
Les 40 meilleures Google Fonts pour améliorer la conception de votre site web
Alegreya
L’un des plus populaires, parfait pour le corps du texte de toute publication ou contenu numérique. Vous pouvez le trouver en 6 versions différentes.
- Afficher la police dans Google Fonts
- Combinaison recommandée :
- Titre : Alegreya
- Corps : Source Sans Pro
Asap
Cette police de caractères est appelée “dry-stick”. Il est doté de bords arrondis et est très propre.
- Voir la typographie dans Google Fonts
- Combinaison recommandée :
- Titre : Flamenco
- Coprs : Asap
Lato
Lato est une police de caractères élégante et l’une des plus populaires dans les Google Fonts. Bois sec, avec 10 variantes et 5 poids, du plus fin (Thin), au plus gras (Black).
- Voir la police dans Google Fonts
- Combinaison recommandée :
- Titre : Lato
- Corps : Merriweather
Merriweather
Merriweather est une police de caractères qui fonctionne très bien pour le corps du texte. Il fonctionne très bien lorsqu’il est combiné avec son compagnon Merriweather Sans.
- Afficher la police dans Google Fonts
- Combinaison recommandée :
- Titre : Merriweather
- Corps : Open Sans
Roboto
Créé par Christian Robertson, il s’agit d’une famille de sources très complète. Il existe plusieurs versions, mono, condensée et Slab ; cette dernière avec serif. La version normale est très similaire à l’Helvetica ou au Din. Parfait pour les gros titres dans leurs différents poids.
- Afficher la police dans Google Fonts
- Combinaison recommandée :
- Titre : Roboto
- Corps : Nunito
Raleway
Typographie créée par Matt McInerney et avec de nombreuses variantes. Il est parfait pour les corps de texte en raison de ses courbes ouvertes et arrondies, car il est beaucoup plus facile à lire. Il comporte jusqu’à 8 poids différents et leurs variations correspondantes en italique. Ils ont également créé une version en pointillés que vous pouvez voir et télécharger sur le web.
- Voir la police dans Google Fonts
- Combinaison recommandée :
- Titre : Rallye
- Corps : Roboto
Montserrat
Montserrat est une police de caractères créée par Julieta Ulanovsky, qui s’est inspirée des affiches et des tentes typiques du quartier de Montserrat à Buenos Aires et a voulu créer cette police avec deux graisses différentes, régulière et grasse.
- Voir la police dans Google Fonts
- Combinaison recommandée :
- Titre : Montserrat
- Corps : Cardon
Open Sans
Open sans est une police en bois sec conçue par Steve Patterson et lancée en 2011. Il a 5 poids différents, y compris les italiques. Cela fait de l’Open Sans l’une des polices de caractères les plus polyvalentes qui soient, car elle a de nombreuses applications. Dans le domaine de la conception web, elle est constamment considérée comme allant de pair avec l’inclusion des polices de Google dans WordPress et l’essor de la conception à plat.
- Voir la police dans Google Fonts
- Combinaison recommandée :
- Titre : Open Sans
- Corps : Lora
Amaranth
L’Amaranth est une police de caractères d’aspect moderne aux coins arrondis et courbés. Il a été conçu par le génie Todt, qui a cherché à améliorer sa lisibilité par des touches de structure cursive.
- Voir la police dans Google Fonts :
- Combinaison recommandées :
- Titre : Amarante
- Corps : Titillium Web
Gentium
Typographie Serif et caractères romains très élégants. Il a beaucoup de personnalité en soi et se combine très bien avec les typographies sans empattement, tant pour les titres que pour le corps du texte.
- Voir la police dans Google Fonts
- Combinaison recommandée :
- Titre : Open Sans
- Corps : Gentium
Noto Sans
Il s’agit d’une évolution de la police Droid, qui prend en charge plus de 30 langues. Il en va de même pour sa version Serif, c’est donc une police très pratique.
- Voir la police dans Google Fonts
- Combinaison recommandée :
- Titre : Montserrat (capitale)
- Corps : Noto Sans
Ubuntu
Ubuntu a pris beaucoup de force et est de plus en plus appliqué sur de nombreux sites web. Il s’agit d’une police sans empattement qui a été modifiée manuellement pour améliorer sa lisibilité sur les écrans.
- Voir la police dans Google Fonts
- Combinaison recommandée :
- Titre : Ubuntu
- Corps : Lora
Quicksand
Police de caractères moderne sans empattement qui se distingue par ses extrémités complètement arrondies. Il intègre également différents poids et une variante en pointillés, pour des conceptions plus créatives.
- Voir la police dans Google Fonts
- Combinaison recommandée :
- Titre : Sables mouvants
- Corps : EB Garamond
Droid Sans
Droid Sans est une police sans empattement conçue par Steve Matteson. Il est optimisé pour être mobile, web et autres écrans.
- Afficher la police dans Google Fonts
- Combinaison recommandée :
- Titre : Droïde sans
- Corps : cabine
Signika
Il a été initialement créé pour être utilisé dans la signalisation, mais il est applicable à tous les types de dessins en raison de son rythme et de sa lisibilité.
- Afficher la police dans Google Fonts
- Combinaison recommandée :
- Titre : Signika
- Corps : Open Sans
Josefin Slab
Josefin Slab est une police de caractères inspirée des tendances des années 1930 qui se sont distinguées par leurs formes géométriques. C’est une excellente police à utiliser pour les titres et les en-têtes, mais elle convient aussi parfaitement comme corps de texte.
- Voir la police dans Google Fonts
- Combinaison recommandée :
- Titre : Dalle Josefin
- Corps : Josefin Sans
Vollkorn
Le Vollkorn est une fontaine avec un serif proéminent et corsé. Il a été conçu pour être discret et fonctionner dans tout type de publication écrite, que ce soit sur papier ou sur écran. Il est parfait pour les gros titres et possède différents poids, y compris les caractères gras et italiques.
- Afficher la police dans Google Fonts
- Combinaison recommandée :
- Titre : Le Vollkorn
- Corps : Exo
Bree Serif
Il a été conçu en 2008 par Veronica Burian et Jose Scaglion. Cette police de caractères a été un succès dès le début. C’est une très bonne option à utiliser dans Headlines et se combine très bien avec les polices sans empattement comme Lato. Il est très esthétique et a fière allure même lorsqu’il est réduit en taille.
- Afficher la police dans Google Fonts
- Combinaison recommandée :
- Titre : Bree Serif
- Corps : Lora
Poppins
Poppins est un caractère géométrique sans empattement créé par Indian Type Foundry en 2014. Il est disponible en 5 poids différents, mais ne comporte malheureusement pas de variante en italique. C’est une police qui fonctionne beaucoup mieux sur les écrans, donc elle est parfaite pour la conception de sites web, où elle est très utilisée.
- Afficher la police dans Google Fonts
- Combinaison recommandée :
- Titre : Poppins
- Corps : Sintony
Hind
Le Hind, comme le Poppins, a 5 variantes, et n’inclut pas non plus les italiques. Sa variante “grasse” est largement utilisée pour les titres et les rubriques dans la conception de sites web car elle est très lisible sur les écrans et les mobiles.
- Afficher la police dans Google Fonts
- Combinaison recommandée :
- Titre : Hind
- Corps : Open Sans
Playfair Display
Il s’agit d’une police de caractères aux traits très contrastés, ce qui en fait une typographie moderne et visuelle très bonne pour les gros titres. Sa variante en italique est très belle, élégante et originale pour les titres et les sous-titres. Il n’est pas recommandé de l’utiliser dans le corps du texte car ses traits contrastés peuvent lui faire perdre une certaine lisibilité.
- Afficher la police dans Google Fonts
- Combinaison recommandée :
- Titre : Montserrat
- Corps : Playfair Display
Space Mono
Space Mono a de nettes influences du style typographique géométrique et se trouve en régulier et en gras, ainsi que ses variantes correspondantes en italique.
- Afficher la police dans Google Fonts
- Combinaison recommandée :
- Titre : Nunito
- Corps : Space Mono
Alegreya Sans
Conçu par Juan Pablo del Peral, et disponible en 7 poids différents, avec leurs variations correspondantes en italique. Pour beaucoup, c’est l’une des meilleures polices de Google Fonts, et elle est de plus en plus utilisée sur le web.
- Afficher la police dans Google Fonts
- Combinaison recommandée :
- Titre : Alegreya Sans
- Corps : Open Sans
Lora
Lora est une police Google Fonts disponible dans son mode normal et en gras, y compris les italiques correspondantes, qui ont une touche très calligraphique.
- Afficher la police dans Google Fonts
- Combinaison recommandée :
- Titre : Istock Web
- Corps : Lora
Domine
Domine a été conçu par Pablo Impallari dans Il a été créé avec l’objectif principal d’être utilisé dans des textes sur le web, ils ont donc cherché un design qui privilégie la lisibilité.
- Voir la police dans Google Fonts
- Combinaison recommandée :
- Titre : Montserrat
- Corps : Domine
Roboto Slab
Conçue par Christian Robertson, il s’agit d’une police à empattement gratuite de Google Fonts. Il a été créé pour être utilisé en combinaison avec son mode sans empattement, et contient 4 poids différents, mais n’inclut pas les italiques.
- Afficher la police dans Google Fonts
- Combinaison recommandée :
- Titre : Dalle Roboto
- Corps : Open Sans
Fira Sans
Fira Sans est une police open-source créée par Erik Spiekermann et avec la contribution de Carrois Type Design. Au début, il n’a été créé que pour Firefox OS, mais plus tard, il a été publié en open source. Il est toujours en cours de développement et compte aujourd’hui 9 poids différents en italique, et une version monospace.
- Voir la police dans la combinaison Google Fonts
- Combinaison recommandée :
- Titre : Fira Sans
- Corps : Lato
Old Standard TT
Son design s’inspire des polices à empattement modernes de la fin des années 90. Il est disponible gratuitement sur Google Fonts en normal, en italique et en gras, mais malheureusement il n’y a pas de style italique en gras.
- Afficher la police dans Google Fonts
- Combinaison recommandée :
- Titre : Cabine
- Corps : Old Standard TT
PT Serif
Cette élégante police Google de style serif a été conçue par trois designers russes en 2010. Il est disponible en version normale, en italique, en gras et en italique gras.
- Afficher la police dans Google Fonts
- Combinaison recommandée :
- Titre : PT Sans
- Corps : PT Serif
Oswald
C’est actuellement l’une des sources condensées les plus utilisées dans les Google Fonts. Il a six poids, de l’extra-léger au gras.
- Afficher la police dans Google Fonts
- Combinaison recommandée :
- Titre : Oswald
- Corps : Roboto
Cabin condensed
Un sans inspiré des polices de caractères d’Edward Johnston et d’Eric Gill, avec une touche de modernisme et disponible en quatre graisses.
- Voir la police dans Google Fonts
- Combinaison recommandée :
- Titre : Cabine condensée
- Corps : Gentium
Abril Fatface
Il s’inspire des sources de titrage lourd utilisées sur les affiches publicitaires au XIXe siècle en Grande-Bretagne et en France. C’est une police de caractères avec beaucoup de personnalité.
- Voir la police dans Google Fonts
- Combinaison recommandée :
- Titre : April Fatface
- Corps : Rallye
Dosis
Une police de caractères arrondie de la famille des sans serif. Il a commencé avec le style extra-léger et compte maintenant plus de six points jusqu’à l’extra-gras.
- Afficher la police sur Google Fonts
- Combinaison recommandée :
- Titre : Dose
- Corps : Open Sans
Oxygen
La famille de polices Oxygen est créée dans le cadre du projet KDE, un bureau libre pour le système d’exploitation GNU + Linu. Disponible en trois styles : léger, régulier et audacieux.
- Afficher la police dans Google Fonts
- Combinaison recommandée :
- Titre : Oxygène
- Organisme : Source Sans Pro
Karla
C’est l’un des caractères sans empattement les plus populaires, conçu par Jonny Pinhor, et il existe quatre variantes. Il est idéal pour donner une touche différente et minimaliste à votre site web.
- Afficher la police dans Google Fonts
- Combinaison recommandée :
- Titre : Oswald
- Corps : Karla
Pathway Gothic One
C’est un sans empattement très similaire à celui d’Oswald mais avec un dessin plus fin. C’est idéal pour les titres. Le seul inconvénient est qu’il n’est disponible qu’en une seule épaisseur.
- Afficher la police dans Google Fonts
- Combinaison recommandée :
- Titre : Pathway Gothic One
- Corps : Sanchez
Advent Pro
Il s’agit d’une police de caractères sans empattement, au style moderne, spécialement conçue pour les sites web. Il est disponible en sept variantes et il est recommandé de l’utiliser surtout pour les sous-titres.
- Afficher la police dans Google Fonts
- Combinaison recommandée :
- Titre : Advent Pro
- Corps : Oxygène léger
Maven Pro
Une fontaine avec une courbure et un mouvement uniques. Son design moderne s’adapte à tout contexte et est également très lisible.
- Afficher la police dans Google Fonts
- Combinaison recommandée :
- Titre : Dalle Josefin
- Corps : Maven Pro
Comment pouvez-vous utiliser ces polices Google sur votre site web ?
Si vous utilisez WordPress, vous n’aurez probablement aucun problème puisque la plupart des modèles intègrent les polices Google pour une utilisation en H1, H2, p, etc. Cependant, il est possible qu’aluna n’ait pas été incluse. Dans ce cas, vous pouvez utiliser la méthode “@font-face” pour utiliser d’autres polices Google. En gros, vous devez télécharger les polices dans différents formats sur votre serveur, puis placer un code CSS dans votre feuille de style.
Une autre méthode consiste à utiliser “@import”. Dans ce cas, au lieu de télécharger les polices de Google sur votre serveur, vous les appelez depuis Google. C’est très facile car Google Fonts vous donne la solution directe. Il suffit de cliquer sur @import pour trouver le CSS nécessaire. Vous devez le mettre sans le code de “style” qui apparaît au début et à la fin.
Outils de recherche et de test des polices Google
En plus du moteur de recherche propre à Google Fonts, avec plus de 800 familles de polices, il existe d’autres alternatives pour trouver et essayer votre police de caractères parfaite :
Type Hero
Avec cet outil, vous pouvez rechercher des polices Google, leur ajouter du texte et même une couleur pour visualiser leur aspect sur votre page WordPress.
Better Font Finder
Découvrez de manière interactive les typographies, disponibles dans les Google Fonts, grâce à cet outil conçu par Mattthew. Avec Better Font Finder, vous pourrez sélectionner les polices en fonction de leur similarité visuelle. Contrairement au vaste catalogue proposé par le moteur de recherche Google Fonts lui-même (plus de 800 polices), ce site ne comporte que 70 exemples.
Google Font Previewer pour Chrome
Il s’agit d’une extension de Google Chrome qui vous permet de visualiser l’aspect des polices directement sur votre site web. Il est très utile, surtout lorsque vous concevez votre page, de trouver rapidement une police Google Fonts et de la tester.
Beautiful web type
Il s’agit d’un vaste catalogue en ligne, une vitrine des meilleures polices, issues du répertoire Google des polices Web, appliquées à titre d’exemple. Pour savoir quelle police est utilisée, il suffit de cliquer dessus et vous serez dirigé vers le répertoire Google Fonts.
Retrouvez plus d’outils pour développer votre site internet :
- Marketing d’affiliation : comment monétiser votre site Web
- Codes CSS et HTML pour éditer votre site WordPress
- 25 sites web pour télécharger gratuitement des vidéos libres de droits 4K et HD
- Guide RGPD : Comment adapter votre site web à la nouvelle loi sur la protection des données
- 8 idées de commerce en ligne rentables que vous pouvez facilement créer avec WordPress