Trouvez des combinaisons de polices titre + corps de texte qui fonctionnent bien ensemble. Choisissez une association, prévisualisez avec votre propre texte et copiez le CSS ou le lien Google Fonts dans votre projet.
Chaque association marie une fonte de titre et une fonte de corps testées en contraste visuel et confort de lecture : serif pour les titres avec sans humaniste pour les paragraphes, sans géométrique avec notes en monospace, display condensée à côté d'une fonte de texte fiable. Filtrez par style, glissez votre titre dans l'aperçu et copiez la ligne d'import Google Fonts avec le CSS associé.
Comment utiliser
Étape 1 — Parcourez les duos de polices ou filtrez par style (serif, sans serif, display, à chasse fixe, manuscrite).
Étape 2 — Cliquez sur une association pour la prévisualiser avec du texte d'exemple ou saisissez le vôtre.
Étape 3 — Copiez le lien d'importation Google Fonts ou le code CSS de l'association choisie.
Quand l'utiliser
Choisir des fontes titre + corps pour un blog ou une landing avant d'écrire le CSS.
Renouveler la typographie d'un deck ou d'un portfolio sans toucher à la mise en page.
Vérifier si deux fontes déjà en place forment vraiment un bon duo.
Résultat
Création d'un blog : choisissez l'association 'Playfair Display + Source Sans 3', prévisualisez votre titre et copiez le CSS à coller dans votre feuille de styles.
FAQ
Toutes ces fontes sont-elles libres et utilisables commercialement ?
Oui. Chaque association vient de Google Fonts sous SIL Open Font License ou licence ouverte équivalente. Vous pouvez les intégrer dans des sites commerciaux, les embarquer dans des applis et les utiliser pour des clients sans acheter de licence.
Qu'est-ce qui fait qu'un duo de fontes fonctionne ?
Contraste et harmonie. Les titres profitent de la personnalité (serif, display, géométrique grasse), tandis que le corps doit s'effacer derrière la lisibilité. Les paires ici mélangent les catégories à dessein : un titre serif marqué accompagné d'une sans neutre dans le paragraphe.
Peut-on utiliser la même fonte pour titre et corps ?
Oui, surtout avec des super-familles comme Inter, Source Sans ou Roboto qui proposent plusieurs graisses. Mélanger deux fontes apporte souvent plus de relief, mais une seule famille en regular + bold reste très propre pour la documentation et les tableaux de bord.
Charger deux Google Fonts ralentit-il la page ?
Deux familles avec une graisse chacune représentent environ 30 à 50 Ko et une requête HTTP supplémentaire. Auto-héberger le CSS généré, activer `font-display: swap` et ne garder que les graisses vraiment utilisées rend le coût négligeable.
Comment garder une typographie cohérente après avoir choisi le duo ?
Définissez-le par défaut via des variables `font-family`, fixez une échelle typographique (ratio 1.25 par exemple) et évitez d'introduire de nouvelles fontes dans les composants. Deux fontes bien choisies suffisent à toute la plupart des documents.
