Google Fonts est la bibliothèque typographique la plus accessible — gratuite, hébergée et compatible partout. Le problème : avec plus de 1 600 familles, le choix paralyse. Cette sélection regroupe des paires éprouvées qui fonctionnent en production, avec le raisonnement derrière chaque combinaison.
Principes de sélection
Chaque paire suit la même logique : contraste structurel entre titre et corps, jeu de caractères complet (accents français), au moins 4 graisses disponibles et bonne lisibilité à l'écran. Le titre apporte la personnalité, le corps apporte la lisibilité.
Une bonne combinaison repose sur le contraste, pas la similarité. Sérif + sans-sérif. Géométrique + humaniste. Large + condensé. Si les deux polices se ressemblent, l'association est plate.
Paires classiques polyvalentes
| Titre | Corps | Ton | Usage idéal |
|---|---|---|---|
| Playfair Display | Source Sans 3 | Élégant, éditorial | Magazine, portfolio, marque premium |
| DM Serif Display | DM Sans | Moderne, affirmé | Identité de marque, site vitrine |
| Outfit | Source Serif 4 | Contemporain, chaleureux | Blog, artisanat, culture |
| Space Grotesk | Inter | Tech, épuré | Startup, SaaS, dashboard |
| Fraunces | Work Sans | Expressif, organique | Food, lifestyle, marque engagée |
| Libre Baskerville | Nunito Sans | Classique, accessible | Institution, éducation, éditorial |
Paires sans-sérif / sans-sérif
Deux sans-sérif ensemble fonctionnent si le contraste passe par d'autres leviers : graisse, largeur ou construction géométrique.
| Titre | Corps | Contraste | Usage idéal |
|---|---|---|---|
| Sora (Bold) | Inter (Regular) | Géométrique / neutre | Application, interface |
| Archivo Black | Karla | Ultra-bold / léger | Sport, événementiel, affiche |
| Plus Jakarta Sans (Bold) | Plus Jakarta Sans (Regular) | Même famille, graisses | Interface, corporate, rapport |
La paire « sécurité » — une seule famille
Quand tu doutes, utilise une seule famille avec suffisamment de graisses. C'est la combinaison la plus sûre : zéro risque de conflit typographique, hiérarchie par le poids et la taille uniquement.
Inter (10 graisses, variable font) — polyvalente, excellente lisibilité écran, largement adoptée.
Plus Jakarta Sans (8 graisses) — plus de personnalité qu'Inter, géométrique moderne, parfaite pour le branding.
Source Serif 4 (6 graisses + italiques) — pour un projet à dominante éditoriale ou institutionnelle.
Comment tester une combinaison
Ne te fie pas à l'aperçu Google Fonts. Teste toujours dans un contexte réaliste.
Crée un bloc type : un titre H1 en bold, un sous-titre H2 en medium, deux paragraphes de corps en regular. Ajoute une citation en italique et un lien. C'est le minimum pour évaluer.
Teste à la taille réelle : 16-18px pour le corps web, 10-12pt pour le print. Une police séduisante à 48px peut être illisible à 14px.
Teste sur mobile : ouvre ton prototype sur un vrai téléphone. Les proportions changent, et certaines polices trop fines deviennent difficiles à lire.
Le test du plissement : plisse les yeux devant ton écran. Si la hiérarchie reste lisible (tu distingues le titre du corps), le contraste est suffisant.
Comment charger Google Fonts efficacement
Ne charge que les graisses dont tu as besoin. Chaque graisse supplémentaire ajoute du poids. Pour un site standard, 2 à 3 graisses par police suffisent (Regular, Medium/SemiBold, Bold). Active le mode « swap » pour que le texte s'affiche immédiatement avec une police système en attendant le chargement.
Exemple : <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">