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 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 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 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 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-Sans
Si tu as choisi cette police, tu peux désormais définir les tailles à l’aide d’un ratio.
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 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 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 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 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 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 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 Merriweather
Lato Oswald Ubuntu
Si tu as choisi cette police, tu peux désormais définir les tailles à l’aide d’un ratio.
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 Cardo
Montserrat Courier-New
Montserrat Domine
Montserrat Over-the-Rainbow Crimson-Text
Montserrat Playfair-Display
Montserrat PT-Serif
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 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-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 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 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 Lora
Ubuntu Vollkorn
Si tu as choisi cette police, tu peux désormais définir les tailles à l’aide d’un ratio.
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 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 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 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 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 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 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 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 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-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.
- la hiérarchisation des polices à l’aide d’un ratio
- la police du logo et ses spécificités
- un cas concret qui illustre la démarche complète
Les articles qui peuvent t’intéresser :