Exemples de combinaisons de Google Fonts

I Il n’est pas toujours aisé d’associer les Google Fonts.

Je te propose des combinaisons pour 31 polices avec un aperçu pour voir immédiatement ce que cela donne.

Les références fonctionnent ainsi :
Abril-Fatface Average : 2 polices indiquées – les titres sont en Abril Fatface et le texte du paragraphe en Average

Abril-Fatface Montserrat Lora : 3 polices indiquées – le titre principal (H1) est en Abril-Fatface, les autres titres en Montserrat et le texte du paragraphe en Lora

J’ai ajouté des tirets entre les éléments d’une police pour faciliter la lecture.

Les polices proposées dans cet article :

Serif

• Abril fatface
• Libre Baskerville
• Lora
• Playfair Display
• Droid Serif
• Merriweather
• Noto Serif
• PT Serif
• Cardo
• Lustria
• Bitter

Sans Serif

• Josefin Sans
• Lato
• Roboto
• Montserrat
• Open Sans
• Oswald
• Archivo Black
• Raleway
• Source Sans Pro
• Ubuntu
• Quicksand

Manuscrite

• Pacifico
• Yellowtail
• Lobster
• Cookie
• Amatic SC
• Fredericka the Great
• Sacramento
• Grand Hotel
• Shadows into light two

Les combinaisons de polices

Serif

Abril fatface

Abril-Fatface Average

Abril-Fatface Josefin-Sans

Abril-Fatface Lato

Abril-Fatface Montserrat Lora

Abril-Fatface PT-sans-narrow

Si tu as choisi cette police, tu peux désormais définir les tailles à l’aide d’un ratio.

Libre Baskerville

Libre-Baskerville Hind

Libre-Baskerville Lato

Libre-Baskerville Montserrat

Libre-Baskerville Righteous

Si tu as choisi cette police, tu peux désormais définir les tailles à l’aide d’un ratio.

Lora

Lora Source-Sans-Pro

Lora Istok-Web

Lora Josefin-Sans

Lora Open-Sans

Lora Roboto

Si tu as choisi cette police, tu peux désormais définir les tailles à l’aide d’un ratio.

Playfair Display

Playfair-Display Cutive-Mono

Playfair-Display Fauna-One

Playfair-Display Fira-sans

Playfair-Display Muli

Playfair-Display Museo

Playfair-Display Museo-Sans

Playfair-Display Raleway

Playfair-Display Roboto

Playfair-Display Vollkorn

Si tu as choisi cette police, tu peux désormais définir les tailles à l’aide d’un ratio.

Droid Serif

Droid-Serif Droid-Sans

Si tu as choisi cette police, tu peux désormais définir les tailles à l’aide d’un ratio.

Merriweather

Merriweather Open-Sans

Merriweather Source-Sans-Pro

Si tu as choisi cette police, tu peux désormais définir les tailles à l’aide d’un ratio.

Noto Serif

Noto-Serif Lato

Noto-Serif Roboto

Si tu as choisi cette police, tu peux désormais définir les tailles à l’aide d’un ratio.

PT Serif

PT-Serif Open-sans

PT-Serif PT-Sans

PT-Serif Raleway

PT-Serif Roboto

Si tu as choisi cette police, tu peux désormais définir les tailles à l’aide d’un ratio.

Cardo

Cardo Josefin-sans

Cardo Open-sans

Cardo Raleway

Si tu as choisi cette police, tu peux désormais définir les tailles à l’aide d’un ratio.

Lustria

Lustria Lato

Lustria Open-sans

Lustria Raleway

Si tu as choisi cette police, tu peux désormais définir les tailles à l’aide d’un ratio.

Bitter

Bitter Crimson-text

Bitter Lato

Bitter Montserrat

Bitter Open-sans

Bitter Raleway

Bitter Roboto

Si tu as choisi cette police, tu peux désormais définir les tailles à l’aide d’un ratio.

Sans Serif

Josefin Sans

Josefin-Sans Crimson-text

Josefin-Sans Lora

Josefin-Sans Merriweather

Josefin-sans Playfair-display

Si tu as choisi cette police, tu peux désormais définir les tailles à l’aide d’un ratio.

Lato

Lato Merriweather

Lato Oswald Ubuntu

Si tu as choisi cette police, tu peux désormais définir les tailles à l’aide d’un ratio.

Roboto

Roboto-condensed Nunito

Roboto Crimson-Text

Roboto-Slab Neuton

Roboto-Slab Open-Sans

Si tu as choisi cette police, tu peux désormais définir les tailles à l’aide d’un ratio.

Montserrat

Montserrat Cardo

Montserrat Courier-New

Montserrat Domine

Montserrat Over-the-Rainbow Crimson-Text

Montserrat Playfair-Display

Montserrat PT-Serif

Open Sans

Open-Sans Gentium-Basic

Open-Sans Libre-Baskerville

Open-Sans Lora

Open-Sans Nunito

Si tu as choisi cette police, tu peux désormais définir les tailles à l’aide d’un ratio.

Oswald

Oswald Arvo

Oswald Cutive-Mono

Oswald Droid-Serif

Oswald Lora Cutive-Mono

Oswald Merriweather

Oswald Old-Standard-TT

Oswald Open-Sans

Oswald Quattrocento

Oswald Quicksand

Si tu as choisi cette police, tu peux désormais définir les tailles à l’aide d’un ratio.

Archivo Black

Archivo-black Archivo-narrow Arial
Note : Arial n’est pas une police Google Fonts mais elle est commune à tous les ordinateurs.

Archivo-black Montserrat

Archivo-black Open-sans

Si tu as choisi cette police, tu peux désormais définir les tailles à l’aide d’un ratio.

Raleway

Raleway Lusitana

Raleway Merriweather

Raleway Open-Sans

Raleway PT-Sans

Raleway Roboto-Condensed Roboto-Condensed

Raleway Ubuntu

Si tu as choisi cette police, tu peux désormais définir les tailles à l’aide d’un ratio.

Source Sans Pro

Source-Sans-Pro Open-Sans

Source-Sans-Pro Times-New-Roman
Note : Times New Roman n’est pas une police Google Fonts mais est extrêmement répandue.

Si tu as choisi cette police, tu peux désormais définir les tailles à l’aide d’un ratio.

Ubuntu

Ubuntu Lora

Ubuntu Vollkorn

Si tu as choisi cette police, tu peux désormais définir les tailles à l’aide d’un ratio.

Quicksand

Quicksand Cabin

Quicksand Jacques-francois

Quicksand Sacramento

La proposition est originale et esthétique cependant les polices manuscrites sont plus difficiles à lire sur de longs paragraphes. Je pencherai pour une taille de texte très importante. Le plus simple est de tester sur un grand bloc de texte.

Si tu as choisi cette police, tu peux désormais définir les tailles à l’aide d’un ratio.

Manuscrite

Pacifico

Pacifico Amatic-SC Open-sans

Pacifico Arimo

Pacifico Josefin-Sans

Si tu as choisi cette police, tu peux désormais définir les tailles à l’aide d’un ratio.

Yellowtail

Yellowtail Open-sans-condensed Open-sans

Yellowtail Raleway Raleway

Si tu as choisi cette police, tu peux désormais définir les tailles à l’aide d’un ratio.

Lobster

Lobster Cabin

Lobster Open-sans

Lobster Raleway

Si tu as choisi cette police, tu peux désormais définir les tailles à l’aide d’un ratio.

Cookie

Cookie Open-sans

Cookie Raleway

Si tu as choisi cette police, tu peux désormais définir les tailles à l’aide d’un ratio.

Amatic SC

Amatic-sc Andika

Amatic-sc Droid-sans

Amatic-sc Josefin-sans

Amatic-sc Josefin-slab

Amatic-sc Open-sans-condensed

Amatic-sc Raleway

Si tu as choisi cette police, tu peux désormais définir les tailles à l’aide d’un ratio.

Fredericka-the-great

Fredericka-the-great Crimson-text

Fredericka-the-great Josefin-slab

Fredericka-the-great Open-sans

Si tu as choisi cette police, tu peux désormais définir les tailles à l’aide d’un ratio.

Sacramento

Sacramento Alice

Sacramento Libre-Baskerville

Sacramento Montserrat

Sacramento Open-sans

Sacramento Raleway

Si tu as choisi cette police, tu peux désormais définir les tailles à l’aide d’un ratio.

Grand-Hotel

Grand-Hotel Abeezee

Grand-Hotel Lato

Grand-Hotel Montserrat

Grand-Hotel Open-sans

Grand-Hotel Roboto

Si tu as choisi cette police, tu peux désormais définir les tailles à l’aide d’un ratio.

Shadows into light two

Shadows-into-light-2 Lato

Shadows-into-light-2 Marcellus-sc

Shadows-into-light-2 Roboto

Si tu as choisi cette police, tu peux désormais définir les tailles à l’aide d’un ratio.

Conclusion

As-tu trouvé ton bonheur et déterminé les polices qui embelliront ton site ?

Tu retrouveras tous les éléments pour finaliser le travail sur les polices de ton site dans l’article Sélectionner les polices.

Les articles qui peuvent t’intéresser :

• Crée ton tableau de marque
• Définis les couleurs de ta marque
• Crée ton logo

Retrouve tous les tutoriels pour Créer ta marque

Je partage mes apprentissages et mes expériences depuis 2017 avec + de 100 tutoriels et ressources.

Tu devrais trouver ton bonheur pour créer ta marque, construire ton site puis le faire grandir et développer ton entreprise sur pour pas un rond.

Jean