Sur un site web, tout le monde remarque une belle image ou une couleur distinctive. La typographie, elle, passe inaperçue quand elle est bien faite. Et pourtant, c'est elle qui décide si ton visiteur lit ton texte jusqu'au bout ou le scanne en diagonale. Un mauvais choix de police peut rendre un bon texte illisible. Un bon choix rend un texte ordinaire convaincant.
La typographie, un outil de persuasion discret
Les travaux du Nielsen Norman Group sur la lecture web montrent que les internautes ne lisent pas de façon linéaire : ils scannent en forme de F, s'arrêtant sur les accroches et les premiers mots de chaque ligne. Ta typographie doit faciliter ce scan, pas le contredire. Une police lisible au premier coup d'oeil invite à s'arrêter, une police peu lisible pousse à passer au site suivant.
Serif, sans-serif, display : ce que chaque famille apporte vraiment
- Sans-serif (Inter, Roboto, Open Sans) : idéale pour le corps de texte sur écran, très lisible à petite taille et perçue comme moderne.
- Serif (Georgia, Playfair Display) : apporte une tonalité premium et éditoriale, efficace pour les articles longs ou les marques qui veulent inspirer confiance.
- Display (polices décoratives) : réservée aux titres courts uniquement, jamais pour du texte courant.
- Monospace : pour du code ou des données chiffrées, jamais pour un site commercial général.
Conseil pratique : limite-toi à 2 polices maximum sur tout ton site. Une pour les titres, une pour le corps du texte. Plus de 2 polices, c'est du bruit visuel que ton visiteur ressent sans pouvoir l'expliquer. Google Fonts propose des paires recommandées directement dans son interface, une bonne source pour démarrer sans te tromper.
Taille, interligne, largeur de colonne : les trois réglages qui changent tout
Une police de 16px est le minimum acceptable pour un corps de texte sur desktop. L'interligne idéal se situe entre 1.5 et 1.7 fois la taille de la police. Quant à la largeur de colonne, 60 à 75 caractères par ligne est la plage de confort reconnue. Dépasse cette largeur et ton lecteur perd le fil à chaque retour à la ligne.
Outil gratuit : Typescale (typescale.com) te permet de générer une hiérarchie typographique cohérente à partir d'une seule taille de base et d'un ratio mathématique. Tu obtiens en 30 secondes tous tes niveaux de titres et sous-titres harmonisés, sans faire de calculs à la main.
Contraste et accessibilité : un point souvent raté
Le ratio de contraste entre ta police et son fond doit atteindre 4.5:1 au minimum pour le texte courant selon les normes WCAG. Sous ce seuil, tu exclus les personnes malvoyantes et tu dégrades l'expérience de tout le monde sur écran lumineux. L'outil WebAIM Contrast Checker te permet de vérifier n'importe quelle paire couleur/fond en quelques secondes. Un texte gris clair sur fond blanc, très tendance, échoue souvent ce test.
Les polices web et leur impact sur la vitesse de ton site
Chaque police externe chargée depuis Google Fonts ou Adobe Fonts ajoute une requête réseau et peut retarder l'affichage de tes textes. Pour l'éviter, charge uniquement les graisses dont tu as besoin (regular 400 et bold 700 suffisent dans la plupart des cas) et utilise l'attribut font-display: swap recommandé par web.dev. Si la vitesse de chargement est un enjeu sur ton site, notre article sur l'optimisation de la vitesse de page explique toutes les pistes à explorer, des polices aux images en passant par l'hébergement.
Typographie et hiérarchie visuelle : l'alliance qui convertit
La typographie ne fonctionne pas seule. Elle agit en synergie avec la hiérarchie visuelle de ta page. Des titres bien dimensionnés, des sous-titres distinctifs et un corps de texte lisible forment ensemble un chemin de lecture naturel vers tes CTA. Si tu veux approfondir la façon dont hiérarchie et mise en page se combinent, notre article sur la hiérarchie visuelle en design web donne les principes concrets à appliquer dès aujourd'hui.