Meilleures associations de polices Google pour un site web (6 paires qui marchent)

Une bonne association de polices, c’est une police de titre et une police de texte assez différentes pour former une équipe, mais qui partagent la même ambiance. Un point de départ sûr : un titre avec empattements et un texte en sans-serif net, comme Playfair Display + Source Sans 3. Voici six paires de Google Fonts, une par ambiance, et un moyen gratuit de les essayer sur ton site avant de toucher au code.

Ce qui fait que deux polices forment un bon duo

Pense à un groupe de musique. Le chanteur, c’est ta police de titre, et les musiciens derrière lui, c’est ta police de texte, celle des paragraphes. Si tout le monde crie en même temps, personne n’entend les paroles. Une bonne paire a une voix qui ressort et une autre qui la soutient. Trois règles simples te mènent presque au bout :

• Du contraste, pas du clash. Choisis deux polices nettement différentes, comme une police à empattements (des lettres avec de petits pieds aux extrémités, comme dans un livre imprimé) à côté d’une sans-serif (sans ces pieds). Deux polices presque identiques ont juste l’air d’une erreur.
• Une seule ambiance. Une police ludique et arrondie à côté d’une police raide et formelle envoie des signaux contradictoires. Choisis des polices qui se sentiraient bien dans la même pièce.
• Deux polices, pas plus. Une pour les titres, une pour le texte. Ajoute de la variété avec la taille et la graisse (l’épaisseur des lettres), pas avec une troisième police.

Classique: Playfair Display + Source Sans 3

Playfair Display est une police à empattements aux traits nets et très contrastés, qui rappelle un peu la une d’un journal. Source Sans 3 est une sans-serif calme et facile à lire, qui ne cherche pas à se faire remarquer. Un bon choix pour les blogs, les magazines, les portfolios et tout ce qui veut inspirer confiance.

Élégant: Cormorant Garamond + Montserrat

Cormorant Garamond est une police à empattements légère et gracieuse, aux lignes longues et délicates. Montserrat est une sans-serif large et géométrique qui lui offre un sol moderne. Pense mode, beauté, mariages et restaurants. Un conseil : Cormorant devient fine quand elle est petite, réserve-la donc aux grands titres.

Moderne: DM Serif Display + DM Sans

DM Serif Display est une police à empattements bien charnue, faite pour les gros titres. DM Sans est une sans-serif nette et amicale à l’allure douce comparable, donc les deux se marient bien. Un bon choix pour les startups, les agences et les pages d’atterrissage qui veulent paraître fraîches sans être froides.

Percutant: Oswald + Open Sans

Oswald est haute et étroite : beaucoup de mots tiennent sur une ligne et crient quand même. Open Sans est large, ouverte et très lisible, ce qui rééquilibre le tout. Utile pour l’actualité, le sport, les événements et partout où le titre doit accrocher.

Technique: Space Grotesk + Inter

Space Grotesk a un air géométrique un peu décalé qui dit « on construit des choses ». Inter a été dessinée pour les écrans et reste lisible en petit, donc elle porte les paragraphes. Un choix naturel pour les logiciels, les tableaux de bord et les outils de développeurs.

Chaleureux: Quicksand + Nunito

Quicksand et Nunito ont toutes les deux des extrémités doucement arrondies, donc elles semblent faites l’une pour l’autre. Le résultat est chaleureux et accessible. Un bon choix pour l’éducation, les enfants, les applis, la cuisine et les sites de communauté.

Comment tester une association sur ton propre site

Lire sur une paire n’a rien à voir avec la voir sur tes propres pages, avec tes propres mots. FontMee est une extension Chrome gratuite, un petit module qui donne une nouvelle fonction au navigateur, et elle te laisse essayer des polices sur un vrai site, seulement sur ton écran. Elle a même des associations intégrées : 32 paires titre et texte choisies à la main, dont les six ci-dessus. La vidéo montre le panneau en action.

1. Installe FontMee. Ajoute-la depuis le Chrome Web Store. Elle est gratuite et sans compte. Clique sur l’icône puzzle de Chrome et épingle-la, comme ça elle est toujours à un clic.
2. Ouvre ton site et clique sur l’icône FontMee. Le panneau s’ouvre à côté de la page. Tu peux aussi appuyer sur Alt + Shift + F. Les pages propres à Chrome (nouvel onglet, le Web Store, les pages chrome://) ne peuvent pas être modifiées.
3. Clique sur le bouton Associations de polices. Tu vois une liste de paires, chacune affichée dans ses vraies polices avec une étiquette d’ambiance comme Classique, Percutant ou Technique.
4. Appuie sur Utiliser cette paire. La police de titre et la police de texte changent aussitôt sur la page. Si tu avais déjà choisi une police, FontMee te propose d’abord des partenaires pour elle, sous Pour et le nom de la police.
5. Compare et ajuste. Passe de Police d’origine à Aperçu FontMee (ou appuie sur Alt + Shift + O) et utilise Ajuster pour la taille, la graisse, l’interligne et l’espacement des lettres. Essaie deux ou trois paires, car celle qui gagne sur une carte d’exemple ne gagne pas toujours sur ta page. Garder sur ce site conserve ton choix à chaque visite, et Tout réinitialiser remet la page comme avant.

Quatre choses à vérifier avant de te décider

• Utilise tes propres mots. Une paire superbe sur un slogan court peut rendre autrement sur tes vrais noms de produits ou un long paragraphe.
• Regarde le petit texte, et sur un téléphone. Le texte des paragraphes est lu bien plus que les titres : il doit rester confortable en petite taille.
• Vérifie les lettres dont tu as besoin. Les accents comme é, ç ou ş, et les lettres cyrilliques ou vietnamiennes, ne sont pas dans toutes les polices. FontMee a un filtre Écriture qui n’affiche que les polices avec les lettres qu’il te faut.
• Vérifie la licence. Les Google Fonts sont open source et libres pour un usage commercial, mais d’autres polices peuvent ne pas l’être.

C’est ton propre site ? Alors essayer une paire n’est que la moitié du travail. Quand l’une te plaît, appuie sur Copier le CSS et colle les règles dans la feuille de style de ton site, le fichier qui commande son apparence (dans WordPress, c’est sous Apparence, Personnaliser, CSS additionnel). FontMee indique aussi la licence de chaque police et peut télécharger un ZIP des polices à héberger toi-même, pour que les navigateurs de tes visiteurs les chargent depuis ton serveur et non depuis Google. Un site a aussi besoin d’une maison où vivre, et un créateur de sites est le moyen le plus rapide d’en avoir une sans code.

Récupère l’extension

FontMee est gratuite, avec plus de 1 900 polices, 32 paires toutes prêtes, Copier le CSS et l’import de tes propres polices. Sans compte, sans abonnement. Ajoute-la depuis le Chrome Web Store, ou lis d’abord la page FontMee.

Bon à savoir avant de commencer

FAQ