18 magnifiques combinaisons (avec exemples!) de Google fonts en 2021

[et_pb_section fb_built= »1″ _builder_version= »3.22″][et_pb_row _builder_version= »3.25″][et_pb_column type= »4_4″ _builder_version= »3.25″ custom_padding= »||| » custom_padding__hover= »||| »][et_pb_text _builder_version= »3.27.4″]

Depuis 2010 et la sortie des Google Fonts, les designers passent un temps fou à trouver la meilleure combinaison de polices. Les deux ne font pas forcément la paire. Il faut que ce soit en adéquation avec l’image que vous voulez renvoyer à vos utilisateurs.

On ne va pas utiliser la font Comics pour un site d’une marque se positionnant dans le haut de gamme. Ok, cet exemple évident, je vous l’accorde. Et pourtant… .

Toutes les combinaisons ne sont pas bonnes. Tous les web designers ont eu à faire face à un client qui voulait une police un peu exotique pour les titres. Oui, c’est joli. Mais cela peut s’avérer illisible.

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version= »3.25″][et_pb_column type= »4_4″ _builder_version= »3.25″ custom_padding= »||| » custom_padding__hover= »||| »][et_pb_code _builder_version= »3.21.1″]

via GIPHY

[/et_pb_code][/et_pb_column][/et_pb_row][et_pb_row _builder_version= »3.25″][et_pb_column type= »4_4″ _builder_version= »3.25″ custom_padding= »||| » custom_padding__hover= »||| »][et_pb_text _builder_version= »3.27.4″]

Pour ma part, je suis un adepte invétéré du « Less is more ». Restons épuré, restons lisible. Rendons la lecture de votre contenu agréable.

J’ai compilé dans cet article quelques-unes des meilleures combinaisons de Google Fonts du moment.

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version= »3.25″][et_pb_column type= »4_4″ _builder_version= »3.25″ custom_padding= »||| » custom_padding__hover= »||| »][et_pb_text _builder_version= »4.0.7″ header_font= »|||||||| » header_2_font= »Open Sans Condensed|700||||||| » hover_enabled= »0″ header_3_font= »Open Sans Condensed|||||||| »]

1. Open Sans Condensed + Merryweather

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version= »3.25″][et_pb_column type= »4_4″ _builder_version= »3.25″ custom_padding= »||| » custom_padding__hover= »||| »][et_pb_text _builder_version= »3.27.4″ text_font= »EB Garamond|||||||| » header_font= »|||||||| » header_2_font= »Oswald|700||||||| » header_3_font= »Oswald|||||||| »]

2. Oswald + EB Garamond

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version= »3.25″][et_pb_column type= »4_4″ _builder_version= »3.25″ custom_padding= »||| » custom_padding__hover= »||| »][et_pb_text _builder_version= »3.27.4″ text_font= »Josefin Sans|||||||| » header_font= »|||||||| » header_2_font= »Open Sans Condensed|700||||||| » header_3_font= »Amatic SC|700||||||| »]

3. Amatic SC + Josefin Sans

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version= »3.25″][et_pb_column type= »4_4″ _builder_version= »3.25″ custom_padding= »||| » custom_padding__hover= »||| »][et_pb_text _builder_version= »4.0.7″ text_font= »Open Sans|||||||| » header_font= »|||||||| » header_2_font= »Open Sans Condensed|700||||||| » header_3_font= »Open Sans Condensed|700||||||| » hover_enabled= »0″]

4. Open Sans Condensed + Open Sans

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version= »3.25″][et_pb_column type= »4_4″ _builder_version= »3.25″ custom_padding= »||| » custom_padding__hover= »||| »][et_pb_text _builder_version= »3.27.4″ header_font= »|||||||| » header_2_font= »Open Sans Condensed|700||||||| »]

5. Montserrat + Merriweather

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version= »3.25″][et_pb_column type= »4_4″ _builder_version= »3.25″ custom_padding= »||| » custom_padding__hover= »||| »][et_pb_text _builder_version= »4.0.7″ header_font= »Fjalla One|700||||||| » header_2_font= »Open Sans Condensed|700||||||| » hover_enabled= »0″ text_font= »Noto Sans|||||||| » header_3_font= »Fjalla One|700||||||| »]

6. Fjalla One + Noto Sans

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version= »3.25″][et_pb_column type= »4_4″ _builder_version= »3.25″ custom_padding= »||| » custom_padding__hover= »||| »][et_pb_text _builder_version= »4.0.7″ header_font= »|||||||| » header_2_font= »Open Sans Condensed|700||||||| » hover_enabled= »0″ header_3_font= »PT Sans|||||||| » text_font= »PT Sans Narrow|||||||| »]

7. PT Sans + PT Sans Narrow

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version= »3.25″][et_pb_column type= »4_4″ _builder_version= »3.25″ custom_padding= »||| » custom_padding__hover= »||| »][et_pb_text _builder_version= »4.0.7″ header_font= »|||||||| » header_2_font= »Open Sans Condensed|700||||||| » hover_enabled= »0″ header_3_font= »Alegreya|||||||| » text_font= »Lato|||||||| »]

8. Alegreya + Lato

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version= »3.25″][et_pb_column type= »4_4″ _builder_version= »3.25″ custom_padding= »||| » custom_padding__hover= »||| »][et_pb_text _builder_version= »4.0.7″ header_font= »|||||||| » header_2_font= »Open Sans Condensed|700||||||| » hover_enabled= »0″ header_3_font= »Roboto|||||||| » text_font= »Roboto Condensed|||||||| »]

9. Roboto + Roboto Condensed

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version= »3.25″][et_pb_column type= »4_4″ _builder_version= »3.25″ custom_padding= »||| » custom_padding__hover= »||| »][et_pb_text _builder_version= »4.0.7″ header_font= »|||||||| » header_2_font= »Open Sans Condensed|700||||||| » hover_enabled= »0″ header_3_font= »Julius Sans One|700||||||| » text_font= »Crimson Text|||||||| »]

10. Julius Sans One + Crimson Text

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version= »3.25″][et_pb_column type= »4_4″ _builder_version= »3.25″ custom_padding= »||| » custom_padding__hover= »||| »][et_pb_text _builder_version= »4.0.7″ header_font= »Playfair Display|||||||| » header_2_font= »Open Sans Condensed|700||||||| » hover_enabled= »0″ header_3_font= »Playfair Display|||||||| » text_font= »Slabo 13px|||||||| »]

11. Playfair Display + Slabo

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version= »3.25″][et_pb_column type= »4_4″ _builder_version= »3.25″ custom_padding= »||| » custom_padding__hover= »||| »][et_pb_text _builder_version= »4.0.7″ header_font= »|||||||| » header_2_font= »Open Sans Condensed|700||||||| » hover_enabled= »0″ text_font= »Open Sans|||||||| » header_3_font= »Oswald|||||||| »]

12. Oswald + Open Sans

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version= »3.25″][et_pb_column type= »4_4″ _builder_version= »3.25″ custom_padding= »||| » custom_padding__hover= »||| »][et_pb_text _builder_version= »4.0.7″ header_font= »|||||||| » header_2_font= »Open Sans Condensed|700||||||| » hover_enabled= »0″ header_3_font= »Raleway|||||||| » text_font= »Roboto|||||||| »]

13. Raleway + Roboto

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version= »3.25″][et_pb_column type= »4_4″ _builder_version= »3.25″ custom_padding= »||| » custom_padding__hover= »||| »][et_pb_text _builder_version= »4.0.7″ header_font= »Oswald|||||||| » header_2_font= »Open Sans Condensed|700||||||| » hover_enabled= »0″ header_3_font= »Nixie One|700||||||| » text_font= »Libre Baskerville|||||||| »]

14. Nixie One + Libre Baskerville

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version= »3.25″][et_pb_column type= »4_4″ _builder_version= »3.25″ custom_padding= »||| » custom_padding__hover= »||| »][et_pb_text _builder_version= »4.0.7″ header_font= »Roboto|||||||| » header_2_font= »Open Sans Condensed|700||||||| » hover_enabled= »0″ header_3_font= »Fjalla One|||||||| » text_font= »Nunito|||||||| »]

15. Fjalla + Nunito

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version= »3.25″][et_pb_column type= »4_4″ _builder_version= »3.25″ custom_padding= »||| » custom_padding__hover= »||| »][et_pb_text _builder_version= »4.0.7″ header_font= »|||||||| » header_2_font= »Open Sans Condensed|700||||||| » hover_enabled= »0″ header_3_font= »Open Sans Condensed|||||||| » text_font= »Libre Baskerville|||||||| »]

16. Open Sans Condensed + Libre Baskerville

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version= »3.25″][et_pb_column type= »4_4″ _builder_version= »3.25″ custom_padding= »||| » custom_padding__hover= »||| »][et_pb_text _builder_version= »4.0.7″ header_font= »Nunito|||||||| » header_2_font= »Open Sans Condensed|700||||||| » hover_enabled= »0″ header_3_font= »Oswald|||||||| » text_font= »Karma|||||||| »]

17. Oswald + Karma

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version= »3.25″][et_pb_column type= »4_4″ _builder_version= »3.25″ custom_padding= »||| » custom_padding__hover= »||| »][et_pb_text _builder_version= »4.0.7″ header_font= »|||||||| » header_2_font= »Open Sans Condensed|700||||||| » hover_enabled= »0″ header_3_font= »Alegreya|||||||| » text_font= »Merriweather|||||||| »]

18. Alegreya + Merryweather

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.

[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section]

A lire également

Laisser un commentaire

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