Pourquoi le choix des polices fait toute la différence
La typographie représente plus de 90% du contenu visuel d’un site web. Deux sites avec le même layout mais des polices différentes donneront une impression radicalement différente — professionnel vs amateur, moderne vs daté, fiable vs douteux. Bien choisir et associer vos polices est l’un des moyens les plus rapides d’améliorer la qualité perçue de votre site.
Les grandes familles typographiques
Avant de choisir, comprenez les catégories principales :
Serif (avec empattements)
Les polices serif ont de petits traits aux extrémités des lettres. Elles évoquent la tradition, l’autorité et l’élégance.
- Playfair Display : Élégante, idéale pour les titres de sites luxe ou éditoriaux
- Merriweather : Très lisible en petite taille, parfaite pour les articles longs
- Lora : Équilibrée, bien adaptée aux blogs et sites culturels
- Source Serif Pro : Professionnelle, bonne pour les sites corporate
Utilisation : Cabinets d’avocats, institutions, médias, sites éditoriaux, marques haut de gamme.
Sans-serif (sans empattements)
Lignes épurées, modernes. C’est le choix par défaut pour le web en 2025.
- Inter : La référence pour les interfaces. Conçue spécifiquement pour les écrans
- Plus Jakarta Sans : Moderne et géométrique, tendance actuelle
- DM Sans : Compacte et élégante, idéale pour les SaaS
- Nunito : Arrondie et chaleureuse, bonne pour les sites éducatifs
- Open Sans : Le classique fiable, très lisible même sur petit écran
Utilisation : Tech, startups, e-commerce, applications, la majorité des sites modernes.
Display / Decorative
Polices expressives réservées aux titres et gros textes. Ne les utilisez jamais pour le corps de texte.
- Syne : Géométrique et audacieuse
- Space Grotesk : Moderne avec du caractère
- Clash Display : Forte personnalité, tendance en 2025
Monospace
Chaque caractère occupe la même largeur. Utilisées pour le code et les données techniques.
- JetBrains Mono : Excellente pour les blocs de code
- Fira Code : Avec ligatures pour le code
- IBM Plex Mono : Professionnelle et lisible
Les 5 règles d’or de l’association typographique
Règle 1 : Maximum 2 polices par site
C’est la règle la plus importante. Utilisez :
- 1 police pour les titres (headings h1-h6)
- 1 police pour le corps de texte (paragraphes, listes, boutons)
3 polices est le maximum absolu, et uniquement si la troisième est une monospace pour le code. Plus de 3 = chaos visuel.
Règle 2 : Créer du contraste entre titre et corps
L’association fonctionne quand les deux polices sont suffisamment différentes pour créer une hiérarchie visuelle claire. Les meilleures combinaisons :
- Serif + Sans-serif : Le classique qui marche toujours (ex: Playfair Display + Inter)
- Display + Sans-serif : Moderne et impactant (ex: Syne + DM Sans)
- Sans-serif Bold + Sans-serif Light : Minimaliste (ex: Inter Black pour titres + Inter Regular pour corps)
Ce qui ne marche PAS : deux polices trop similaires (ex: Arial + Helvetica). Si on ne voit pas la différence, autant n’en utiliser qu’une.
Règle 3 : Prioriser la lisibilité du corps de texte
Votre police de corps doit être parfaitement lisible à 16px sur mobile. Critères :
- Hauteur d’x élevée : Les lettres minuscules (a, e, o) sont relativement grandes
- Ouvertures larges : Les « bouches » des lettres c, e, s sont bien ouvertes
- Espacement naturel : Les lettres ne se collent pas entre elles
- Bonne distinction : On distingue facilement I, l, 1 et O, 0
Testez toujours sur un vrai téléphone. Au Sénégal, beaucoup d’utilisateurs naviguent sur des écrans 5-6 pouces avec une résolution moyenne — ce qui est lisible sur votre MacBook peut être illisible sur un Tecno ou Itel.
Règle 4 : Utiliser les graisses pour la hiérarchie
Choisissez des polices qui offrent plusieurs graisses (weights). Voici une hiérarchie type :
/* Hiérarchie typographique avec une seule police */
h1 { font-weight: 800; font-size: 2.5rem; } /* Extra Bold */
h2 { font-weight: 700; font-size: 2rem; } /* Bold */
h3 { font-weight: 600; font-size: 1.5rem; } /* Semibold */
body { font-weight: 400; font-size: 1rem; } /* Regular */
.caption { font-weight: 400; font-size: 0.875rem; color: #6B7280; }
.overline { font-weight: 500; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; }
Règle 5 : Vérifier la disponibilité des caractères
Si votre site contient du contenu en wolof, peul, ou d’autres langues africaines avec des caractères spéciaux (ñ, ŋ, ɓ, ɗ, ë), vérifiez que la police les supporte. Sur Google Fonts, filtrez par « Languages » et cherchez les langues africaines supportées. Noto Sans et Noto Serif de Google sont conçues pour couvrir pratiquement toutes les langues du monde.
10 associations de polices testées et approuvées
Voici des combinaisons concrètes avec leur cas d’usage :
1. Playfair Display + Inter
Style : Élégant et moderne. Le serif des titres contraste parfaitement avec la sans-serif du corps.
Idéal pour : Blogs, magazines en ligne, sites culturels, hôtellerie.
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Playfair+Display:wght@700;800&display=swap');
h1, h2, h3 { font-family: 'Playfair Display', Georgia, serif; }
body { font-family: 'Inter', -apple-system, sans-serif; }
2. Plus Jakarta Sans (titres) + Inter (corps)
Style : Tech moderne et professionnel.
Idéal pour : SaaS, startups, dashboards, sites tech.
3. Syne + DM Sans
Style : Audacieux et créatif.
Idéal pour : Agences créatives, portfolios, sites artistiques.
4. Merriweather + Open Sans
Style : Classique et fiable. Excellente lisibilité.
Idéal pour : Sites institutionnels, ONG, éducation, médias.
5. Space Grotesk + Inter
Style : Futuriste et technique.
Idéal pour : Sites tech, fintech, crypto, innovation.
6. Nunito + Lato
Style : Chaleureux et accessible.
Idéal pour : Sites éducatifs, plateformes e-learning, associations.
7. Lora + Roboto
Style : Éditorial contemporain.
Idéal pour : Blogs professionnels, sites de contenu, presse.
8. Poppins seule (multi-poids)
Style : Moderne et polyvalent. Poppins en Bold/Semibold pour les titres, Regular pour le corps.
Idéal pour : E-commerce, sites vitrines, cas général.
9. Outfit + Inter
Style : Clean et géométrique.
Idéal pour : Sites corporate modernes, services B2B.
10. DM Serif Display + DM Sans
Style : Raffiné et cohérent (même famille DM).
Idéal pour : Mode, beauté, lifestyle, marques premium.
Implémenter vos polices en CSS
Chargement optimisé
Ne chargez que les graisses dont vous avez besoin. Chaque graisse = un fichier supplémentaire à télécharger :
/* BON : seulement les graisses utilisées */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
/* MAUVAIS : toutes les graisses (ralentit le site) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
Le paramètre &display=swap est crucial : il affiche d’abord une police système puis la remplace quand la Google Font est chargée, évitant un flash de texte invisible (FOIT).
Stack de polices de secours (fallback)
Définissez toujours des polices de fallback pour que le texte reste lisible avant le chargement :
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 1rem; /* 16px - minimum pour la lisibilité mobile */
line-height: 1.6; /* 160% - aéré et confortable */
color: #1F2937; /* Gris très foncé, plus doux que le noir pur */
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
line-height: 1.2; /* Plus serré pour les titres */
color: #111827; /* Légèrement plus foncé que le corps */
}
Échelle typographique harmonieuse
Utilisez un ratio constant entre chaque niveau. Le ratio 1.25 (Major Third) est idéal pour le web :
:root {
--font-size-xs: 0.75rem; /* 12px */
--font-size-sm: 0.875rem; /* 14px */
--font-size-base: 1rem; /* 16px */
--font-size-lg: 1.25rem; /* 20px */
--font-size-xl: 1.563rem; /* 25px */
--font-size-2xl: 1.953rem; /* 31px */
--font-size-3xl: 2.441rem; /* 39px */
--font-size-4xl: 3.052rem; /* 49px */
}
/* Responsive : réduire sur mobile */
@media (max-width: 768px) {
:root {
--font-size-3xl: 1.953rem;
--font-size-4xl: 2.441rem;
}
}
Performance : l’impact sur la vitesse de chargement
Chaque police Google Font ajoutée augmente le temps de chargement. Voici comment optimiser :
Préconnexion aux serveurs Google
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
Ajoutez ces lignes dans le <head> de votre site AVANT le lien Google Fonts. Cela réduit le temps de connexion d’environ 100-200ms.
Self-hosting pour les connexions lentes
En Afrique de l’Ouest, la connexion peut être instable. Le self-hosting évite la dépendance aux serveurs Google :
- Téléchargez vos polices sur google-webfonts-helper.herokuapp.com
- Placez les fichiers .woff2 dans votre dossier
/fonts/ - Utilisez @font-face dans votre CSS :
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/fonts/inter-v13-latin-regular.woff2') format('woff2');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('/fonts/inter-v13-latin-700.woff2') format('woff2');
}
Avantage : la police est servie depuis votre propre hébergement, plus rapide et plus fiable pour vos visiteurs sénégalais.
Vérifier vos choix typographiques
- Testez sur mobile réel : Pas seulement l’inspecteur Chrome. Ouvrez votre site sur un vrai téléphone
- Testez avec du vrai contenu : Pas du Lorem Ipsum. Utilisez vos vrais textes en français
- Vérifiez le contraste : Le texte corps doit avoir un ratio minimum de 4.5:1 (utilisez l’outil contrast-ratio.com)
- Testez les caractères spéciaux : Accentués (é, è, ê, à, ç), guillemets français (« »), et caractères des langues locales si applicable
- Vérifiez la vitesse : Après ajout des polices, testez avec PageSpeed Insights. Visez moins de 200ms de blocage par les polices
