Associations Google Fonts : 25 combinaisons qui marchent

Les meilleures associations Google Fonts opposent une police de titre pleine de caractère à une police de texte discrète et lisible : Fraunces avec Inter, Playfair Display avec Source Sans 3, Space Grotesk avec Inter ou DM Serif Display avec DM Sans. Voici 25 combinaisons classées par ambiance, chacune avec les graisses qui la font marcher et son usage. Toutes sont gratuites, toutes autorisent l’usage commercial et toutes se chargent en une ligne de code. Choisissez d’abord un groupe selon l’effet voulu, puis un duo selon l’usage.

Comment lire ces associations

Chaque duo se lit titre d’abord, texte ensuite. La graisse du titre est celle à employer en grand corps ; le texte reste en 400, avec 600 ou 700 pour l’emphase. Si la logique vous est nouvelle, l’association de polices explique pourquoi le contraste vaut mieux que la ressemblance, et serif ou sans serif détaille ce qu’apporte chaque famille.

Associations éditoriales : titres serif, texte sans serif

La structure classique. Un titre serif apporte chaleur et autorité ; un texte sans serif garde la lecture longue facile à l’écran.

Associations sans serif modernes pour la tech et le produit

Pour les logiciels, les startups et tout ce qui doit paraître actuel. Le titre porte le caractère par sa forme, sa largeur ou des détails décalés, tandis que le texte est un cheval de labour.

Titres sans serif avec texte serif

La structure inverse convient aux lectures longues : un titre sans serif net signale les sections, et un texte serif fait livresque et ralentit agréablement l’œil.

Associations amicales et arrondies

Associations d’affichage audacieuses pour affiches et réseaux sociaux

Les polices d’affichage condensées et grasses logent de grands mots dans de petits cadres, ce qui explique leur domination sur les miniatures et les affiches. Elles demandent un partenaire calme. Le texte de miniature et les polices de titre vont plus loin.

Associations techniques et luxe

Les erreurs qui cassent une association

Comment ajouter une association Google Fonts à votre site

1. 1

   Choisissez les graisses

   En général une graisse de titre et deux graisses de texte. Chaque graisse en plus est un fichier de plus à télécharger.

2. 2

   Copiez l’intégration

   Sélectionnez les familles sur Google Fonts et copiez le lien fourni, ou adaptez le code ci-dessous.

3. 3

   Définissez les rôles en CSS

   Donnez aux titres et au texte leurs propres variables de famille de police : un changement ultérieur tient en une ligne.

4. 4

   Testez avec de vrais textes

   Vérifiez un long paragraphe, un titre de deux lignes et votre nom de produit le plus long avant de vous engager.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fraunces:wght@600&family=Inter:wght@400;600&display=swap" rel="stylesheet">

<style>
  :root {
    --font-heading: "Fraunces", Georgia, serif;
    --font-body: "Inter", system-ui, sans-serif;
  }
  h1, h2, h3 { font-family: var(--font-heading); font-weight: 600; }
  body { font-family: var(--font-body); font-weight: 400; }
</style>

Google Fonts est gratuit pour un usage commercial, mais lisez les licences de polices avant d’en modifier une ou de la vendre au sein d’un produit. Pour que le choix s’impose à toute une marque, faites-en un système typographique aux rôles nommés.

Pour les posts sociaux et les présentations, réglez votre duo une fois dans un kit de marque Gradiently (inclus dans Pro), qui garde une police de titre et une police de texte et accepte des fichiers de polices téléversés ; le Designer les emploie pour mettre une création en page.