Deux polices suffisent sur 90 % des sites. Voici comment les choisir, les associer et éviter les erreurs qui fragilisent votre image sans que vous le remarquiez.
L'essentiel en 30 secondes - Deux familles typographiques au maximum : une pour les titres, une pour le corps de texte - Le premier critère de sélection n'est pas l'esthétique mais la lisibilité à l'écran, mobile compris - Serif ou sans-serif est une décision de positionnement, pas une préférence personnelle - Chaque police chargée alourdit votre page : le choix typographique affecte directement votre vitesse de chargement et votre référencement - Les variable fonts offrent plus de flexibilité avec un fichier plus léger. Elles restent sous-utilisées sur la plupart des sites français
Votre logo est soigné, vos couleurs définies, vos visuels sélectionnés avec attention. Et sur le site, quelque chose cloche quand même, sans que personne autour de vous arrive à nommer précisément quoi.
La plupart du temps, c'est la typographie.
La police de caractères conditionne la lisibilité, la crédibilité perçue, le positionnement de marque et la vitesse de chargement. Choisir une fonte sur Google Fonts parce qu'elle "fait bien" revient à ne pas choisir — c'est le même raisonnement qui s'applique à une identité visuelle mal définie : sans système cohérent, chaque support part dans sa propre direction.
Trois familles, trois rôles distincts
Avant de parler de choix, un point de vocabulaire que les prestataires utilisent sans toujours l'expliquer.
Les sérifs (avec empattements) — Playfair Display, Merriweather, Georgia — communiquent l'autorité, la tradition, le sérieux. Ils fonctionnent pour les cabinets juridiques, la finance, l'édition, le luxe. À l'écran, ils nécessitent une taille minimum pour que les empattements restent lisibles.
Les sans-sérifs (sans empattements) — Inter, Montserrat, Roboto — dominent le web pour une raison simple : ils sont lisibles à toutes les tailles sur tous les écrans. Ils communiquent la modernité, la clarté, l'efficacité. La majorité des sites web professionnels les utilisent.
Les display et décoratives — Bebas Neue, Abril Fatface, polices manuscrites — servent exclusivement pour les titres ou les éléments visuels forts. On ne les utilise jamais en corps de texte.
La règle des deux polices
Deux familles typographiques : une pour les titres (hiérarchie, impact, personnalité de marque), une pour le corps de texte (lisibilité, confort de lecture). C'est la contrainte que les bons directeurs artistiques s'imposent d'eux-mêmes.
L'erreur courante est d'additionner les polices pour enrichir le design. Chaque fonte supplémentaire fragmente l'identité visuelle et alourdit le site.
Les associations qui fonctionnent :
| Police titre | Police corps | Effet perçu |
|---|---|---|
| Sérif (Playfair Display) | Sans-sérif (Inter) | Élégant et lisible |
| Sans-sérif gras (Montserrat) | Sans-sérif léger (Source Sans) | Moderne, aéré |
| Display (Bebas Neue) | Sans-sérif (Open Sans) | Impactant, direct |
| Sérif (Merriweather) | Sérif corps (Georgia) | Éditorial, autoritaire |
Le critère d'un bon duo : le contraste. Deux polices trop proches créent de la confusion plutôt que de la hiérarchie. Deux polices trop opposées rompent la cohérence d'ensemble.
Les critères de choix — dans le bon ordre
La plupart des projets commencent par "quelle police me plaît". C'est le dernier critère à appliquer, pas le premier.
1. La lisibilité à l'écran Une police peut être élégante dans un PDF et illisible à 14px sur mobile. Testez votre sélection sur les usages réels : mobile, tablette, écrans basse résolution. Les polices conçues pour le web (Inter, Source Sans Pro, Roboto) ont été optimisées pour ça. Ce n'est pas un hasard si elles dominent.
2. Le positionnement de marque Votre typographie parle avant que le texte soit lu. Une startup tech avec du Times New Roman crée une dissonance immédiate. Un cabinet d'avocats avec une fonte ronde et ludique aussi. La police doit être cohérente avec votre secteur, votre positionnement et le niveau perçu de votre offre. Elle fait partie du même système que votre direction artistique et ne peut pas s'en dissocier.
3. La performance technique Chaque police chargée est un ou plusieurs fichiers HTTP supplémentaires. Charger six graisses d'une même famille pour n'en utiliser que deux alourdit inutilement votre page. Les Core Web Vitals, et donc votre référencement, en dépendent. C'est l'un des angles souvent négligés dans la conception d'un site vitrine : le choix typographique a un impact direct sur la performance.
4. La disponibilité des graisses Une police qui n'existe qu'en Regular et Bold vous enferme. Pour construire une hiérarchie visuelle complète (H1, H2, H3, corps, légende, CTA), il faut au minimum quatre à cinq graisses disponibles.
5. L'esthétique Ce critère arrive en dernier. Parmi les polices qui satisfont les quatre critères précédents, choisissez celle qui correspond à votre univers de marque.
Variable fonts : l'option que la plupart des sites n'utilisent pas encore
Une variable font est une police unique qui contient tous ses styles dans un seul fichier : graisse, largeur, inclinaison. Résultat, un fichier plus léger que charger Regular, Bold et Light séparément, et une flexibilité totale via CSS.
Des exemples disponibles dès aujourd'hui : Inter (variable), Roboto Flex, Fraunces.
La plupart des développeurs partent encore sur des fontes statiques par habitude. C'est une opportunité concrète : un site web qui charge plus vite avec une typographie plus fine que 90 % de ses concurrents.
Les erreurs les plus fréquentes
Trop de polices. Trois fontes différentes dans un même bloc de texte créent du bruit, pas de la richesse.
Trop de graisses chargées. Télécharger les dix graisses disponibles "au cas où" est l'erreur de débutant la plus répandue. Ne chargez que ce que le site utilise réellement.
Corps de texte trop petit. 14px est insuffisant pour du texte long sur desktop. 16px est le minimum confortable, 17 à 18px souvent meilleur.
Interlignage trop serré. Une bonne police avec un interlignage compressé fatigue la lecture en trois paragraphes. Visez un line-height entre 1.5 et 1.7 pour le corps de texte.
Police display en corps de texte. Playfair Display à 16px sur un article de 800 mots est beau sur le maquette, pénible à lire. Les polices display restent en titre, sans exception.
Comment Vox Mediae travaille la typographie
La sélection typographique fait partie intégrante de notre travail de direction artistique. Nous définissons les fontes en lien avec le positionnement de la marque, les supports de diffusion (web, print, réseaux sociaux) et les contraintes techniques du site, avant de les valider sur des maquettes en conditions réelles.
Vous repartez avec une typographie que votre équipe applique de manière cohérente sur tous les supports, sans revenir demander "quelle police déjà ?" à chaque nouveau livrable.
Un projet en cours ou une typographie qui vous dérange sans que vous sachiez pourquoi ? Prenez 30 minutes avec nous : diagnostic gratuit, recommandation concrète.
FAQ — Polices de caractères sur le web
Combien de polices utiliser sur un site web ? Deux dans la grande majorité des cas. Une pour les titres, une pour le corps de texte. Trois au maximum si une troisième a un rôle distinct (interface, citations, code). Au-delà, la cohérence en souffre et les performances aussi.
Google Fonts est-il suffisant ? Pour la majorité des projets, oui. La bibliothèque couvre tous les besoins courants, les performances sont optimisées et l'utilisation est gratuite sans restriction commerciale. Les polices propriétaires (Adobe Fonts, Klim, Fontsmith) offrent exclusivité et finesse supérieure. Elles se justifient quand la différenciation typographique est un axe stratégique de l'identité de marque.
Quelle différence entre une police gratuite et une police payante ? La qualité des espacements (kerning), le nombre de graisses disponibles, la couverture des caractères spéciaux et l'exclusivité. Une police gratuite omniprésente sur le web peut affaiblir votre différenciation visuelle.
Une police peut-elle ralentir mon site ? Oui. Chaque fichier de police est une requête HTTP supplémentaire. Charger six variantes d'une famille alors que deux suffisent affecte votre LCP (Largest Contentful Paint), un facteur de référencement Google.
Qu'est-ce qu'une variable font ? Une police qui contient tous ses styles dans un seul fichier, ajustable via CSS (graisse, largeur, inclinaison). Elle est plus légère que plusieurs fichiers statiques et plus flexible en design. Recommandée dès que la police choisie propose une version variable.
*D'autres questions ? Consultez notre FAQ complète.*