Exemples de combinaisons de Google Fonts

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

Sans Serif

Manuscrite

Les combinaisons de polices

Serif

Abril fatface

Abril-Fatface Average

Abril-Fatface Average

Abril-Fatface Josefin-Sans

Abril-Fatface Josefin-Sans

Abril-Fatface Lato

Abril-Fatface Lato

Abril-Fatface Montserrat Lora

Abril-Fatface Montserrat Lora

Abril-Fatface PT-sans-narrow

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 Hind

Libre-Baskerville Lato

Libre-Baskerville Lato

Libre-Baskerville Montserrat

Libre-Baskerville Montserrat

Libre-Baskerville Righteous

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 Source-Sans-Pro

Lora Istok-Web

Lora Istok-Web

Lora Josefin-Sans

Lora Josefin-Sans

Lora Open-Sans

Lora Open-Sans

Lora Roboto

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 Cutive-Mono

Playfair-Display Fauna-One

Playfair-Display Fauna-One

Playfair-Display Fira-sans

Playfair-Display Fira-sans

Playfair-Display Muli

Playfair-Display Muli

Playfair-Display Museo

Playfair-Display-museo

Playfair-Display Museo-Sans

Playfair-Display Museo-Sans

Playfair-Display Raleway

Playfair-Display raleway

Playfair-Display Roboto

Playfair-Display Roboto

Playfair-Display Vollkorn

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

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 Open-Sans

Merriweather Source-Sans-Pro

 

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 Lato

Noto-Serif Roboto

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 et open sans

PT-Serif PT-Sans

pt serif et pt sans

PT-Serif Raleway

pt serif et raleway

PT-Serif Roboto

pt serif et 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 et josefin sans

Cardo Open-sans

cardo et open sans

Cardo Raleway

cardo et raleway

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

Lustria

Lustria Lato

lustria et lato

Lustria Open-sans

lustria et open sans

Lustria Raleway

lustria et 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 et crimson text

Bitter Lato

bitter et lato

Bitter Montserrat

bitter et montserrat

Bitter Open-sans

bitter et open sans

Bitter Raleway

bitter et raleway

Bitter Roboto

bitter et 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 crimson-text

Josefin-Sans Lora

Josefin Sans Lora

Josefin-Sans Merriweather

Josefin-Sans Merriweather

Josefin-sans Playfair-display

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 Merriweather

Lato Oswald Ubuntu

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-condensed Nunito

Roboto Crimson-Text

Roboto Crimson-Text

Roboto-Slab Neuton

Roboto-Slab Neuton

Roboto-Slab Open-Sans

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 Cardo

Montserrat Courier-New

Montserrat Courier-New

Montserrat Domine

Montserrat Domine

Montserrat Over-the-Rainbow Crimson-Text

Montserrat Over-the-Rainbow Crimson-Text

Montserrat Playfair-Display

Montserrat Playfair-Display

Montserrat PT-Serif

montserrat PT-Serif

Open Sans

Open-Sans Gentium-Basic

Open-Sans Gentium-Basic

Open-Sans Libre-Baskerville

Open-Sans Libre-Baskerville

Open-Sans Lora

Open Sans-Lora

Open-Sans Nunito

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 arvo

Oswald Cutive-Mono

Oswald Cutive-Mono

Oswald Droid-Serif

oswald Droid-Serif

Oswald Lora Cutive-Mono

Oswald Lora Cutive-Mono

Oswald Merriweather

Oswald Merriweather

Oswald Old-Standard-TT

Oswald Old-Standard-TT

Oswald Open-Sans

Oswald Open-Sans

Oswald Quattrocento

Oswald Quattrocento

Oswald Quicksand

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 Archivo-narrow arial

Archivo-black Montserrat

Archivo-black montserrat

Archivo-black Open-sans

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 Lusitana

Raleway Merriweather

Raleway Merriweather

Raleway Open-Sans

Raleway Open-Sans

Raleway PT-Sans

raleway PT-Sans

Raleway Roboto-Condensed Roboto-Condensed

Raleway Roboto-Condensed

Raleway Ubuntu

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 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.

Source-Sans-Pro Times-New-Roman

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

Ubuntu

Ubuntu Lora

Ubuntu Lora

Ubuntu Vollkorn

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 Cabin

Quicksand Jacques-francois

Quicksand jacques-francois

Quicksand Sacramento

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 Amatic-SC open-sans

Pacifico Arimo

Pacifico Arimo

Pacifico Josefin-Sans

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 Open-sans-condensed Open-sans

Yellowtail Raleway Raleway

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 et cabin

Lobster Open-sans

lobster et open sans

Lobster Raleway

lobster et 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 et open sans

Cookie Raleway

cookie et 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 et andika

Amatic-sc Droid-sans

amatic sc et droid sans

Amatic-sc Josefin-sans

amatic sc et josefin sans

Amatic-sc Josefin-slab

amatic sc et josefin slab

Amatic-sc Open-sans-condensed

amatic sc et open sans condensed

Amatic-sc Raleway

amatic sc et 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 et crimson text

Fredericka-the-great Josefin-slab

fredericka the great et josefin slab

Fredericka-the-great Open-sans

fredericka the great et 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 et alice

Sacramento Libre-Baskerville

sacramento et libre baskerville

Sacramento Montserrat

sacramento et montserrat

Sacramento Open-sans

sacramento et open sans

Sacramento Raleway

sacramento et 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 et abeezee

Grand-Hotel Lato

grand hotel et lato

Grand-Hotel Montserrat

grand hotel et montserrat

Grand-Hotel Open-sans

grand hotel et open sans

Grand-Hotel Roboto

grand hotel et 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 et lato

Shadows-into-light-2 Marcellus-sc

shadows into light 2 et marcellus sc

Shadows-into-light-2 Roboto

shadows into light 2 et 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 :

bannière de la newsletter pour pas un rond

Résumé
Article
Google Fonts : les associations de 30 polices illustrées
Description
Il n'est pas toujours évident de combiner les Google Fonts. Je te propose des combinaisons qui fonctionnent pour 30 polices.
Auteur
Publié par
pour pas un rond
Logo

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *