# Associations Google Fonts : 25 combinaisons qui marchent [Canonical HTML page](https://gradiently.design/fr/guide/google-fonts-pairings) Chaque duo est gratuit sur Google Fonts et choisi pour son comportement dans de vrais titres et du vrai texte courant. Classés selon l’effet recherché, avec les graisses qui les font fonctionner. ## The short version - Une bonne association Google Fonts donne au titre et au texte des rôles nettement différents, en général en opposant une police d’affichage ou serif à une sans serif simple. - Les duos d’une même superfamille, comme DM Serif Display avec DM Sans ou IBM Plex Sans avec IBM Plex Mono, sont le point de départ le plus sûr. - Le texte courant demande une police à grande hauteur d’x et aux formes ouvertes en graisse normale 400 ; les titres peuvent porter plus de personnalité. - Les polices de Google Fonts sont publiées sous licences ouvertes autorisant l’usage commercial, y compris dans des logos, des produits et des travaux clients. - Ne chargez que les graisses utilisées et ajoutez display=swap pour garder des pages rapides. 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](https://gradiently.design/fr/guide/font-pairing) explique pourquoi le contraste vaut mieux que la ressemblance, et [serif ou sans serif](https://gradiently.design/fr/guide/serif-vs-sans-serif) détaille ce qu’apporte chaque famille. Un post en portrait de style éditorial avec un grand titre d’affichage au-dessus d’un texte d’appui plus petit et plus calme Une association donne deux voix à la page. Le titre attire ; le texte explique. Ils ne doivent jamais se faire concurrence. ## 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. | # | Titre | Texte | Convient à | | --- | --- | --- | --- | | 1 | Playfair Display 700 | Source Sans 3 400 | Magazines, restaurants, mariages | | 2 | Fraunces 600 | Inter 400 | Cuisine, marques artisanales, newsletters | | 3 | DM Serif Display 400 | DM Sans 400 | Agences, portfolios, pages d’atterrissage | | 4 | Instrument Serif 400 | Instrument Sans 400 | Éditorial moderne, studios, mode | | 5 | Cormorant Garamond 600 | Work Sans 400 | Beauté, décoration, hôtels de charme | | 6 | Libre Baskerville 700 | Libre Franklin 400 | Édition, droit, longues lectures soignées | Fraunces a un axe de taille optique : en grand corps, ses détails s’affinent. Cormorant Garamond est délicate à l’écran : réservez-la aux titres. ## 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. | # | Titre | Texte | Convient à | | --- | --- | --- | --- | | 7 | Space Grotesk 700 | Inter 400 | Outils pour développeurs, fintech, tableaux de bord | | 8 | Syne 700 | Manrope 400 | Studios créatifs, événements, musique | | 9 | Sora 600 | Figtree 400 | Applications, sites SaaS, onboarding | | 10 | Unbounded 600 | Plus Jakarta Sans 400 | Marques futuristes, jeux vidéo, lancements | | 11 | Archivo Black 400 | Archivo 400 | Pages produit audacieuses, sport, commerce | Unbounded et Syne sont larges et fortes : gardez des titres courts. Archivo s’associe à elle-même car sa graisse noire n’a rien à voir avec sa graisse normale. ## 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. | # | Titre | Texte | Convient à | | --- | --- | --- | --- | | 12 | Poppins 600 | Lora 400 | Blogs, coaching, sites personnels | | 13 | Montserrat 700 | Merriweather 400 | Guides, associations, rapports | | 14 | Bricolage Grotesque 700 | Newsreader 400 | Essais, médias indépendants | | 15 | Outfit 600 | Source Serif 4 400 | Documentation, supports de cours | ## Associations amicales et arrondies | # | Titre | Texte | Convient à | | --- | --- | --- | --- | | 16 | Fredoka 600 | Nunito 400 | Marques pour enfants, jouets, cafés familiaux | | 17 | Quicksand 700 | Mulish 400 | Bien-être, animaux, services doux | | 18 | Rubik 600 | Karla 400 | Applications communautaires, services locaux, associations caritatives | Les polices arrondies paraissent accessibles mais douces. Quicksand semble légère sous 600 : employez ses graisses fortes pour tout ce qui doit se lire. ## 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](https://gradiently.design/fr/guide/typography-for-thumbnails) et les [polices de titre](https://gradiently.design/fr/guide/headline-fonts) vont plus loin. | # | Titre | Texte | Convient à | | --- | --- | --- | --- | | 19 | Anton 400 | Roboto 400 | Miniatures, sport, posts façon presse | | 20 | Bebas Neue 400 | Montserrat 400 | Salles de sport, événements, menus audacieux | | 21 | Oswald 600 | Lato 400 | Affiches, campagnes, soldes | | 22 | Abril Fatface 400 | Poppins 400 | Posts mode, boissons, vie nocturne | ## Associations techniques et luxe | # | Titre | Texte | Convient à | | --- | --- | --- | --- | | 23 | IBM Plex Sans 600 | IBM Plex Mono 400 | Documentation développeur, données, recherche | | 24 | Space Grotesk 500 | Space Mono 400 | Logiciels indépendants, fanzines, portfolios | | 25 | Bodoni Moda 500 | Jost 400 | Bijouterie, parfum, commerce haut de gamme | En 24, la mono fait le texte : elle convient à de courtes notes et étiquettes, pas à des essais. Les déliés de Bodoni Moda s’épanouissent en grand, au-dessus de 32 px environ. ## Les erreurs qui cassent une association ### À éviter - Deux sans serif voisines, qui ressemblent à une erreur - Deux polices d’affichage qui se disputent l’attention - Une serif à déliés très fins pour le texte courant à l’écran - Charger toutes les graisses des deux familles - Une troisième police pour un seul titre spécial ### À faire - Un contraste net de structure, de graisse ou de largeur - Une police forte et une discrète - Texte en 400 dans une police à grande hauteur d’x - Seulement les deux à quatre graisses utilisées - Jouer sur la graisse ou la taille de vos deux polices ## Comment ajouter une association Google Fonts à votre site 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. **Copiez l’intégration** Sélectionnez les familles sur Google Fonts et copiez le lien fourni, ou adaptez le code ci-dessous. 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. **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. ```html ``` L’association 2, Fraunces avec Inter, ne charge que trois graisses. Remplacez les noms de famille par ceux d’un autre duo ci-dessus. Google Fonts est gratuit pour un usage commercial, mais lisez les [licences de polices](https://gradiently.design/fr/guide/font-licensing) 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](https://gradiently.design/fr/guide/brand-typography-system) 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](https://gradiently.design/fr/guide/custom-fonts-upload) ; le Designer les emploie pour mettre une création en page. ## FAQ ### Quelles sont les meilleures associations Google Fonts ? Des points de départ fiables : Fraunces avec Inter, Playfair Display avec Source Sans 3, DM Serif Display avec DM Sans et Space Grotesk avec Inter. ### Quelle police va bien avec Montserrat ? Merriweather pour le texte donne un contraste classique de sans serif et de serif. Bebas Neue fonctionne au-dessus de Montserrat comme titre d’affiche audacieux. ### Que associer à Playfair Display ? Une sans serif simple et ouverte pour le texte, comme Source Sans 3, Lato ou Inter. Évitez de l’associer à une autre serif très contrastée. ### Google Fonts est-il gratuit pour un usage commercial ? Oui. Les polices de Google Fonts sont sous licences ouvertes, surtout la SIL Open Font License, qui autorisent l’usage commercial, y compris logos, sites web, impression et travaux clients. Lisez la licence sur la page de chaque police si vous comptez modifier ou redistribuer les fichiers. ### Combien de polices un site web doit-il utiliser ? Deux suffisent à la plupart des sites : une pour les titres et une pour le texte, dans les seules graisses nécessaires.