10 combinaisons de polices Google impressionnantes en tendance en 2020

Une liste de polices tendance triées sur le volet à partir de polices Google qui s’associent bien et comment les installer sur votre site Web.


Meilleures combinaisons de polices Google

La typographie des sites Web était 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 auparavant la conversion et l’incorporation de fichiers de polices à héberger sur le serveur de l’utilisateur, et le choix des polices disponibles était limité à sa propre collection ou à sa connaissance de la typographie en dehors des polices système standard. En conséquence, la plupart des sites Web semblaient presque identiques dans leur formatage de contenu, qui reposait sur de nombreux surutilisés et banals polices sécurisées Web.

Tout a changé en 2010 avec la sortie de Google Fonts, un projet open-source qui permet une implémentation 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 être conscient que toutes les combinaisons de polices de la bibliothèque de Google ne sont pas une recette de réussite typographique. Cependant, avec les bonnes combinaisons de polices et les considérations d’utilisation, votre marque en ligne peut faire preuve de professionnalisme, de beauté et de convivialité sans avoir besoin de polices personnalisées coûteuses. Dans cet article, je vais vous montrer comment accomplir tout cela.

Une liste de 10 combinaisons de polices Google tendances

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

1. Open Sans Condensed + Open Sans

Tendance Combinaison de polices Google - Open Sans Condensed et Open Sans

Voici une combinaison facile qui fait des merveilles pour presque toutes les utilisations applicables. Open Sans est l’une des polices les plus polyvalentes de la collection entière de polices Google, sinon la plus polyvalente. Il est extrêmement facile à lire dans de grands blocs de texte, tout en étant suffisamment marquant pour les titres.

Facile. Sophistiqué. Familier. Tu ne peux pas te tromper!

Utilisation dans le monde réel

Je ne peux prévoir aucun scénario où Open Sans serait un mauvais choix. À moins que vous ne recherchiez spécifiquement une police serif, je pense que celle-ci servira parfaitement la plupart des entreprises, des blogs, des pages de destination ou des applications Web..

2. Oswald + EB Garamond

Tendance combinaison de polices Google - Oswald avec EB Garamond

Oswald est une excellente police pour les titres, peu importe le poids de la police ou l’utilisation de majuscules. Sa nature condensée l’aide à attirer l’attention et à éclater, mais elle crée également un texte agréablement unique en tant que police de votre corps principal.

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

Utilisation dans le monde réel

Ce jumelage fonctionne bien pour les professionnels traitant avec une clientèle haut de gamme, tels que les avocats, les agences immobilières ou même les boutiques haut de gamme. La polyvalence de Oswald et l’aspect classique de EB Garamond créer un excellent texte de description du produit où il est important de mettre l’accent sur un article de qualité supérieure.

3. Montserrat + Merriweather

Tendance combinaison de polices Google - Montserrat avec Merriweather

Montserrat est un favori parmi les 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 échanger sous forme de titres ou de texte de paragraphe – ils fonctionnent tous les deux!

Utilisation dans le monde réel

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

4. Roboto Thin + Roboto Regular

Tendance combinaison de polices Google - Roboto Thin avec Roboto Regular

le Roboto font-family est un favori personnel et c’est aussi celui que nous utilisons ici sur How To Get Online. Extrêmement polyvalent avec une large gamme de poids de police, il n’y a pratiquement aucune limitation à l’utilisation de la police. Moderne et géométrique, tout en restant en quelque sorte convivial et fiable, Roboto est une merveille de forme et de fonction.

Utilisation dans le monde réel

Voici un autre appariement pour lequel vous auriez du mal à trouver une mauvaise utilisation. Tandis que Roboto fonctionne pour à peu près n’importe quoi, je pense que c’est particulièrement bien pour les start-ups technologiques, les petites entreprises modernes ou tout type de marque tournée vers l’avenir.

5. Dalle Raleway + Roboto

Tendance des combinaisons de polices Google - Raleway avec Roboto Slab

C’est notre ami Roboto encore! Cette fois, cependant, nous examinons la variation de l’empattement, Dalle Roboto. C’est une police aussi polyvalente que sa cousine, mais un peu plus classique. Lorsqu’il est associé au caractère distinctif et audacieux Raleway, nous avons une correspondance incroyable de typographie propre et raffinée.

Utilisation dans le monde réel

Raleway est l’une de ces polices qui crie la sophistication. Lorsqu’il est utilisé comme un titre tout en majuscules, je pense qu’il fonctionne à merveille pour les articles de luxe comme les bijoux, les vêtements de marque ou les produits de commerce électronique haut de gamme similaires. Dalle Roboto le supporte bien avec un texte descriptif simple et accessible.

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

6. Playfair Display + Source Sans Pro

Tendance combinaison de polices Google - Playfair Display avec Source Sans Pro

Selon son concepteur, Affichage Playfair a été inspiré par les formes de lettres du XVIIIe siècle lors de la transition des plumes aux stylos à pointe d’acier. Il n’est donc pas surprenant que cette police respire le charme du vieux monde mais avec une touche 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

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

7. Fjalla One + Noto Sans

Tendance combinaison de polices Google - Fjalla One avec Noto Sans

Fjalla One Ce n’est peut-être pas la police la plus polyvalente, mais elle fait extrêmement bien la création de titres qui demandent de l’attention. Petites ou grandes, minuscules ou majuscules, ces lettres sont hypnotiques, peu importe ce que vous en faites.

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

Utilisation dans le monde réel

Les blogs ou les pages de destination seraient parfaits pour cet appariement – ou vraiment n’importe quoi avec de longs corps de texte qui nécessitent des sous-titres visibles pour diviser 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

Tendance combinaison de polices Google - Alegreya avec Lato

Alegreya a un certain attrait qui me semble très «terreux» et amical. Il n’y a pas de faux semblant 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 universelles dans la bibliothèque de Google.

Ensemble, ils forment une combinaison amusante, facile à lire et pragmatique.

9. PT Sans étroit + PT Sans

Tendance combinaison de polices Google - PT Sans Narrow avec PT Sans

Une autre version moderne d’un style Old World, PT Sans et ses frères, PT Sans Narrow, faire une déclaration immédiate et sans équivoque lorsqu’ils sont associés.

Utilisation dans le monde réel

L’une ou l’autre police fonctionne aussi bien qu’un titre ou un corps de texte; le couplage particulier que vous choisirez dépendra de la nature de vos mots, même si j’ai tendance à préférer PT Sans Narrow en rafales plus courtes.

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

dix. Amatic SC + Josefin Sans

Tendance combinaison Google Fonts - Amatic SC avec Josefin

D’accord, celui-ci est définitivement plus du côté léger. Évidemment, cette combinaison ne fonctionnera pas pour tout le monde, mais la nature fantaisiste des deux Amatic SC et Josefin Sans créer 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 musicien ou un artiste amusant, cette police pourrait être essentielle pour capturer votre personnalité unique. Selon le ton général et le sujet, cette combinaison pourrait également fonctionner pour un blog de niche.

Un conseil: ne pas utiliser Amatic SC comme texte principal de votre corps. Vous rendrez vos lecteurs fous.

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

Nous savons que cet article concerne les meilleures polices Google, 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 ni populaires ni tendance et sont en effet à l’opposé de celles que nous avons énumérées ci-dessus. Cependant, ceux-ci sont parfaits pour ceux qui veulent un design personnalisé et personnalisé pour leur marque et vont bien lorsqu’ils sont utilisés pour des logos ou même des rubriques créatives:

Bonus 1: le pack Mega Craft X

Bonus 2: le pack de la Saint-Valentin

Bonus 3: le pack de polices cool

Bonus 4: le petit pack graphique

Bonus 5: jaloux

CONSEIL RAPIDE: Les polices premium offrent aux designers une chance de réaliser un design intemporel et sont fortement recommandées pour les logos et l’identité de marque.

Pourquoi devriez-vous utiliser des polices Google?

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

  • Ses complètement libre. Peu importe le nombre de polices que vous choisissez ou le nombre de sites Web sur lesquels vous les utilisez. Tu ne paieras jamais un centime.
  • Depuis mars 2018, il y a plus de 850 polices dans la bibliothèque. Il y a de fortes chances que vous trouviez le bon style pour correspondre à votre marque.
  • Ses vite. Étant donné que les polices sont hébergées sur les serveurs de Google, les fichiers sont intelligemment compressés et conçus pour se charger rapidement.
  • Ses facile. Un simple copier-coller dans un fichier HTML et vous avez terminé.
  • Ses organisé. Toutes les polices sont classées et consultables dans une seule base de données. Plus besoin de parcourir les sous-dossiers en désordre de votre ordinateur pour trouver la police parfaite.
  • Ai-je mentionné que c’est gratuit? C’est gratuit!

Comment installer les polices Google

Aucun mal de tête requis ici. Allez à Google Fonts et trouvez les polices dont vous avez besoin.

Lorsque vous sélectionnez vos polices, elles sont ajoutées de manière cumulative à 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.

Ajout de styles

De là, vous pouvez choisir d’inclure des styles supplémentaires tels que l’italique, le gras, le gras et l’italique, etc. Cliquez simplement sur le PERSONNALISER onglet et sélectionnez les styles dont vous pensez avoir besoin.

Par exemple, voici comment je sélectionnerais les deux ordinaire et audacieux texte pour la police Khula.

Ajout d'un style de police dans Google Fonts

Intégration de la norme ou @Import?

Vous remarquerez que vous avez deux options pour intégrer les polices sur votre site Web: en utilisant un standard à utiliser dans le site de votre site HTML fichier ou @import url à inclure dans le site de votre site CSS fichier. Alors, lequel devez-vous utiliser?

En règle générale, la meilleure option consiste à copier et coller le ligne dans votre fichier HTML. Vos polices se chargent généralement plus rapidement de cette façon plutôt que d’attendre le chargement du fichier CSS, et cette méthode prend également un peu mieux en charge les (très) anciens navigateurs..

Où mettre le code

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

CONSEIL RAPIDE: Vous pouvez également spécifier des styles de police en les écrivant dans l’url, séparés par des virgules. Par exemple: «https://fonts.googleapis.com/css?family=Khula:gras, italique, bolditalique

Utilisation de la police dans votre feuille de style

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

h1 {
famille de polices: «Khula», sans-serif;
poids de la police: 700;
taille de police: 48px;
}
p {
famille de polices: «Khula», sans-serif;
poids de la police: 400;
taille de police: 16px;
}

CONSEIL RAPIDE: Assurez-vous d’inclure une police de secours telle que «serif», «sans-serif» ou une police de sécurité Web similaire dans le cas rare où votre police Google ne se charge pas.

Conseils sur l’association de vos polices

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

CONSEIL RAPIDE: Pensez à l’émotion ou à l’idée qu’une police particulière évoque. Essayez de l’associer à une autre police qui évoque la même émotion ou idée. Il s’agit de trouver les bonnes polices qui correspondent à votre marque unique. Vous le saurez intrinsèquement quand une police ressemble à votre marque ou si elle donne des signaux mixtes.

Serif et Sans-Serif

Une méthode éprouvée consiste à associer une police serif à une police sans serif. Leurs styles ont tendance à bien contraster, 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 de polices Google possibles sur mon ordinateur et jouer avec elles dans un document de traitement de texte. Agiter avec différentes tailles et poids et comparer les combinaisons côte à côte est un moyen efficace de déterminer le meilleur appariement possible. En prenant le temps d’expérimenter, vous découvrirez peut-être même que mince la variation d’une police donnée permet d’obtenir un meilleur texte de titre que si vous deviez utiliser 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 une grande puissance vient une grande responsabilité: la typographie nécessite une réflexion approfondie pour être bien faite, et toutes les polices ne sont pas gagnantes. Nous espérons que ce guide vous aidera à vous orienter dans la bonne direction, vous inspirant à trouver le parfait appariement de polices pour capturer la personnalité de votre marque.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me