10 Awesome Google Font Combinations Trending in 2021

Une liste de polices tendance triées sur le volet par Google Fonts qui se marient bien ensemble et comment les installer sur votre site web.

• Article de Jason Beever
• Mis à jour : 2 janvier 2020
• Étiquettes : typographie, conception web

La typographie de site web était autrefois une pratique de conception plus mystifiante qu’aujourd’hui. Le processus compliqué de décoration d’une page Web avec des polices personnalisées nécessitait autrefois de convertir et d’intégrer des fichiers de polices à héberger sur le serveur de l’utilisateur, et le choix des polices disponibles était limité à la propre collection de l’utilisateur ou à sa connaissance de la typographie en dehors des polices standard du système. En conséquence, la plupart des sites Web avaient un aspect presque identique dans le formatage de leur contenu, qui reposait sur de nombreuses polices sûres pour le Web, surutilisées et banales.

Tout cela a changé en 2010 avec la sortie de Google Fonts, un projet open-source qui permet une mise en œuvre beaucoup plus facile des polices personnalisées sur les sites Web. L’installation de ces polices sur votre propre site web est heureusement un processus rapide et facile, mais vous devez savoir que toutes les combinaisons de polices dans la bibliothèque de Google ne sont pas une recette pour le succès typographique. Toutefois, avec les bonnes combinaisons de polices et les bonnes considérations d’utilisation, votre marque en ligne peut respirer le professionnalisme, la beauté et la convivialité sans avoir besoin de recourir à des polices personnalisées coûteuses. Dans cet article, je vais vous montrer comment accomplir tout cela.

Une liste de 10 combinaisons de polices Google en vogue

Allons-y ! Sans ordre particulier, voici 10 des meilleures combinaisons de polices Google actuellement en vogue :

1. Open Sans Condensed + Open Sans

• Open Sans Condensed
• Open Sans

Voici une combinaison facile qui fait des merveilles pour presque toutes les utilisations applicables. Open Sans est l’une, sinon la, des polices les plus polyvalentes de toute la collection de Google Fonts. Elle est extrêmement facile à lire dans les grands blocs de texte, tout en étant assez frappante pour les titres.

Simple. Sophistiqué. Familière. Vous ne pouvez pas vous tromper !

Utilisation dans le monde réel

Je ne peux pas prévoir de scénario où Open Sans serait un mauvais choix. À moins que vous ne cherchiez spécifiquement une police à empattement, je pense que celle-ci servira parfaitement la plupart des entreprises, des blogs, des pages d’atterrissage ou des applications Web.

2. Oswald + EB Garamond

• Oswald
• EB Garamond

Oswald est une excellente police pour les titres, peu importe le poids de la police ou l’utilisation des majuscules. Sa nature condensée l’aide à attirer l’attention et à pop, mais il fait aussi un texte agréablement unique comme police de votre corps principal.

EB Garamond est une mise à jour élégante de la police Garamond classique. Instantanément reconnaissable et d’apparence intemporelle, cette police dégage un professionnalisme distinctif dans votre typographie.

Utilisation dans le monde réel

Cette association fonctionne bien pour les professionnels qui traitent avec une clientèle haut de gamme, comme les avocats, les agences immobilières ou même les boutiques haut de gamme. La polyvalence d’Oswald et l’aspect classique d’EB Garamond font un excellent texte de description de produit où il est important de mettre en valeur un article de qualité supérieure.

3. Montserrat + Merriweather

• Montserrat
• Merriweather

Montserrat est un favori des designers pour sa polyvalence et sa simplicité, et Merriweather se marie à merveille avec son style contrasté et sa lisibilité facile. N’hésitez pas à les interchanger en tant que titres ou texte de paragraphe – ils fonctionnent très bien dans les deux cas !

Utilisation dans le monde réel

Cette combinaison particulière est un bel équilibre de design moderne et classique. En tant que telle, sa variété d’utilisations pourrait soutenir de nombreux types d’entreprises. Personnellement, je pense que ces polices feraient l’affaire pour tout type de source de nouvelles en ligne ou d’agence de publication.

4. Roboto Thin + Roboto Regular

• Roboto Thin
• Roboto Regular

La famille de caractères Roboto est une préférée personnelle et c’est aussi celle que nous utilisons ici à How To Get Online. Extrêmement polyvalente avec une large gamme de poids de police, il n’y a pratiquement aucune limite à ce que la police pourrait être utilisée pour. Moderne et géométrique, tout en restant d’une manière ou d’une autre amicale et fiable, Roboto est une merveille de forme et de fonction.

Utilisation dans le monde réel

Voici un autre jumelage pour lequel vous auriez du mal à trouver une mauvaise utilisation. Alors que Roboto fonctionne pour à peu près tout, je pense qu’il est particulièrement idéal pour les start-ups technologiques, les petites entreprises modernes, ou tout type de marque avec un œil sur l’avenir.

5. Raleway + Roboto Slab

• Raleway
• Roboto Slab

C’est encore notre ami Roboto ! Cette fois, cependant, nous nous penchons sur la variante avec empattement, Roboto Slab. C’est une police qui est tout aussi polyvalente que sa cousine, mais dont le style est un peu plus classique. Lorsqu’elle est associée à la distincte et audacieuse Raleway, nous avons un étonnant match de typographie propre et raffinée.

Utilisation dans le monde réel

Raleway est l’une de ces polices qui crient la sophistication. Lorsqu’elle est utilisée comme un titre tout en majuscules, je pense qu’elle fonctionne magnifiquement pour les articles de luxe comme les bijoux, les vêtements de marque ou les produits de commerce électronique haut de gamme similaires. Roboto Slab la soutient bien avec un texte descriptif simple et accessible.

Elles fonctionnent toutes deux de manière interchangeable également. Essayez différentes variations de poids pour les deux polices dans les titres et le corps du texte et voyez quelle paire capture le mieux votre marque.

6. Playfair Display + Source Sans Pro

• Playfair Display
• Source Sans Pro

Selon son concepteur, Playfair Display a été inspiré par les formes de lettres du 18e siècle pendant la transition des plumes d’oie aux stylos à pointe d’acier. Il n’est donc pas surprenant que cette police dégage un charme du vieux monde mais avec une tournure moderne.

Source Sans Pro pousse les choses un peu plus loin dans le futur, créant une combinaison intrigante qui est ornée tout en étant utilitaire.

Utilisation dans le monde réel

Playfair Display ajoute une touche personnelle à quelque chose comme un slogan ou une description de produit. Si vous avez la chance d’utiliser son esperluette ou ses symboles monétaires, vous verrez immédiatement pourquoi c’est le choix parfait pour un produit ou un service centré sur le luxe et les apparences. Source Sans Pro garde le texte ancré dans une présentation moderne et propre.

7. Fjalla One + Noto Sans

• Fjalla One
• Noto Sans

Fjalla One n’est peut-être pas la plus polyvalente des polices, mais une chose qu’elle fait extrêmement bien est de créer des titres qui demandent de l’attention. Petites ou grandes, minuscules ou tout en majuscules, ces lettres sont hypnotiques, peu importe ce que vous faites avec elles.

Noto Sans vise à être une police vraiment universelle où, quelle que soit la langue, elle peut être affichée sans erreur de formatage pour les utilisateurs du monde entier. De manière appropriée, l’esthétique de la police est tout aussi polyvalente que son utilité.

Utilisation dans le monde réel

Les blogs ou les pages d’atterrissage seraient parfaits pour cette paire – ou vraiment tout ce qui contient de longs corps de texte qui nécessitent des sous-titres perceptibles pour briser le contenu. L’adaptabilité universelle de Noto Sans en fait également un bon choix lorsque toucher un public international est une priorité.

8. Alegreya + Lato

• Alegreya
• Lato

Alegreya a un certain attrait qui me semble très « terreux » et amical. Il n’y a pas de prétention sur sa personnalité ; ce que vous voyez est ce que vous obtenez.

Lato pourrait donner à Open Sans une course pour son argent en tant que champion des polices polyvalentes dans la bibliothèque de Google.

Ensemble, ils font une combinaison qui est amusante, facile à lire, et pragmatique.

9. PT Sans Narrow + PT Sans

• PT Sans Narrow
• PT Sans

Autre prise moderne sur un style du Vieux Monde, PT Sans et ses frères, PT Sans Narrow, font une déclaration immédiate et indubitable lorsqu’ils sont associés ensemble.

Utilisation dans le monde réel

L’une ou l’autre de ces polices fonctionne aussi bien comme titre ou corps de texte ; l’appariement particulier que vous choisirez dépendra de la nature de vos mots – bien que j’aie tendance à préférer PT Sans Narrow dans des éclats plus courts.

Censé comme un  » outil très important pour les communications numériques modernes « , il semble plus approprié – mais certainement pas limité – d’utiliser ces polices pour les startups technologiques, les applications logicielles ou d’autres entreprises numériques.

10. Amatic SC + Josefin Sans

• Amatic SC
• Josefin Sans

Ok, celui-ci est définitivement plus sur le côté léger. Il est évident que cette combinaison ne conviendra pas à tout le monde, mais la nature fantaisiste de l’Amatic SC et du Josefin Sans crée quelque chose qui est sûr de se démarquer – tant que vous faites preuve de prudence !

Utilisation dans le monde réel

Si vous êtes un artiste, un acteur, un musicien ou un animateur à l’esprit amusant, alors cette police pourrait être essentielle pour capturer votre personnalité unique. Selon le ton général et le sujet traité, cette combinaison pourrait également fonctionner pour un blog de niche.

Un conseil : N’utilisez pas Amatic SC comme texte principal. Vous rendrez vos lecteurs fous.

Bonus : 5 de nos polices premium préférées

Nous savons que cet article porte sur les meilleures polices Google en vogue, mais nous voulions également mentionner quelques-unes de nos polices premium préférées en bonus. Les polices premium, bien sûr, ne sont pas gratuites – mais elles donnent à votre site Web un design plus unique et personnalisé. Ces polices ne sont pas populaires ou tendance et sont même à l’opposé de celles que nous avons listées ci-dessus. Cependant, elles sont parfaites pour ceux qui veulent un design personnalisé pour leur marque et vont bien lorsqu’elles sont utilisées pour des logos ou même des titres créatifs :

Bonus 1 : Le Mega Craft Bundle X

Bonus 2 : Le Valentine’s Bundle

Bonus 3 : Le pack de polices cool

Bonus 4 : Le pack de petits graphiques

Bonus 5 : Jaloux

Pourquoi devriez-vous utiliser les polices Google ?

Bienvenue à ce que de nombreux concepteurs de sites Web considèrent comme leur meilleur ami. Parlant d’expérience, je peux vous dire que j’intègre rarement des fichiers de polices personnalisées sur des sites Web désormais. Google Fonts est maintenant presque exclusivement le premier et le dernier endroit vers lequel je me tourne pour la typographie d’un site Web. Voici pourquoi :

• C’est complètement gratuit. Peu importe le nombre de polices que vous choisissez ou le nombre de sites Web sur lesquels vous les utilisez. Vous ne paierez jamais un centime.
• En mars 2018, il y a plus de 850 polices dans la bibliothèque. Il y a de fortes chances que vous trouviez le style qui correspond à votre marque.
• C’est rapide. Comme les polices sont hébergées sur les serveurs de Google, les fichiers sont intelligemment compressés et conçus pour se charger rapidement.
• C’est facile. Un simple copier-coller dans un fichier HTML et le tour est joué.
• C’est organisé. Toutes les polices sont catégorisées et consultables dans une seule base de données. Plus besoin de fouiller dans des sous-dossiers désordonnés sur votre ordinateur pour trouver la police parfaite.
• J’ai dit que c’était gratuit ? C’est gratuit !

Comment installer Google Fonts

Pas de maux de tête nécessaires ici. Il suffit d’aller sur Google Fonts et de trouver la ou les polices dont vous avez besoin.

A mesure que vous sélectionnez vos polices, elles sont cumulativement ajoutées à une collection en bas de la page. Lorsque vous avez terminé votre recherche, cliquez sur cet onglet inférieur et une fenêtre avec des instructions d’intégration apparaîtra.

Ajouter des styles

À partir d’ici, vous pouvez choisir d’inclure des styles supplémentaires tels que l’italique, le gras, le gras-italique et ainsi de suite. Il suffit de cliquer sur l’onglet PERSONNALISER et de sélectionner les styles dont vous pensez avoir besoin.

Par exemple, voici comment je sélectionnerais le texte régulier et gras pour la police Khula.

Intégrer le standard ou l’@Import ?

Vous remarquerez que vous avez deux options pour intégrer les polices sur votre site web : utiliser un <lien href> standard à utiliser dans le fichier HTML de votre site, ou une url @import à inclure dans le fichier CSS de votre site. Alors, laquelle devez-vous utiliser ?

Généralement, la meilleure option est de copier et coller la ligne <link href> dans votre fichier HTML. Vos polices se chargeront généralement plus rapidement de cette façon plutôt que d’attendre le chargement du fichier CSS, et cette méthode a également un peu mieux supporté les (très) vieux navigateurs.

Où mettre le code

Vous allez copier et coller la ligne de code que Google vous donne dans la section <head> de votre fichier HTML. Ainsi, en utilisant la police Khula que j’ai choisie ci-dessus, cela ressemblera à ceci :

Utilisation de la police dans votre feuille de style

Maintenant, il vous suffit d’appeler la police comme d’habitude dans votre code CSS. À des fins de démonstration, votre titre principal et le texte de votre paragraphe pourraient ressembler à ceci :

Conseils sur le jumelage de vos polices

Décider quelles polices regrouper peut parfois être un équilibre artistique délicat à trouver. D’une part, votre sélection de polices sera plus efficace lorsqu’il y a suffisamment de contraste dans les styles ; chaque police sur votre site doit se démarquer des autres et mériter une justification pour son utilisation. D’autre part, vous ne voulez pas que vos polices s’éloignent trop les unes des autres d’un point de vue stylistique, ce qui pourrait donner l’impression qu’elles ont été choisies au hasard.

Serif et Sans-Serif

Une méthode éprouvée consiste à jumeler une police serif avec une sans-serif. Leurs styles ont tendance à bien contraster ensemble, offrant une distinction facile entre les titres et les paragraphes.

L’expérimentation est la clé

Lorsque je choisis des polices pour un nouveau site Web, j’aime télécharger toutes les options possibles de Google Font sur mon ordinateur et jouer avec elles dans un document de traitement de texte. Jouer avec différentes tailles et poids et comparer les combinaisons côte à côte est un moyen efficace de déterminer la meilleure combinaison possible. En prenant le temps d’expérimenter, vous pouvez même découvrir que l’utilisation d’une variation fine d’une police donnée permet d’obtenir un meilleur texte de titre que si vous utilisiez une police entièrement distincte. (La solution la plus simple est souvent la meilleure.)

Conclusion

Google Fonts est une ressource puissante pour les bricoleurs qui ne veulent pas payer pour des polices personnalisées coûteuses sur leur site Web. Mais avec un grand pouvoir vient une grande responsabilité : la typographie nécessite une réflexion approfondie pour être bien faite, et toutes les polices disponibles ne sont pas gagnantes. Nous espérons que ce guide vous aidera à vous diriger dans la bonne direction, en vous inspirant pour trouver l’association de polices parfaite pour capturer la personnalité de votre marque.