Introduction
Le designer Oliver Reichenstein a affirme en 2006 que « la typographie web, c'est 95 % du design web ». Cette affirmation reste pertinente en 2026 : la grande majorite du contenu web est du texte, et le choix des polices influence directement la lisibilite, l'emotion et la credibilite perque.
Une etude de l'universite de Northumbria publiee en 2022 a demontre que les polices de caracteres influencent la perception de confiance d'un site web. Les participants jugeaient les memes contenus plus fiables lorsqu'ils etaient presentes dans une typographie soignee.
Les grandes familles typographiques
Serif (avec empattements)
Les polices serif possedent de petits traits aux extremites des lettres. Elles evoquent la tradition, le serieux et l'elegance :
- Georgia : concue pour l'ecran par Matthew Carter en 1993
- Source Serif : police open source d'Adobe, excellente pour les longs textes
- Playfair Display : elegante, ideale pour les titres editoriaux
- Lora : equilibree, parfaite pour le corps de texte des blogs
Sans-serif (sans empattements)
Les polices sans-serif offrent un aspect moderne et epure :
- Inter : concue specifiquement pour les interfaces par Rasmus Andersson. Gratuite et open source
- Roboto : la police du systeme Android, tres lisible a petite taille
- Work Sans : geometrique et chaleureuse, ideale pour les titres
- DM Sans : equilibree, avec un caractere distinctif
Monospace (largeur fixe)
Chaque caractere occupe la meme largeur. Utilisees principalement pour le code :
- JetBrains Mono : concue pour la programmation, avec des ligatures
- Fira Code : ligatures de programmation populaires
- IBM Plex Mono : elegante et lisible
Les regles d'or de la combinaison
Le principe de contraste
Combinez des polices qui se distinguent clairement l'une de l'autre. Le duo classique serif pour les titres + sans-serif pour le corps fonctionne parce que le contraste est evident.
Quelques combinaisons eprouvees :
- Playfair Display + Source Sans : editorial elegant
- Space Grotesk + Inter : moderne et technique
- Lora + Roboto : classique et lisible
- DM Serif Display + DM Sans : harmonie naturelle (meme famille)
La regle des deux
Ne depassez jamais deux familles de polices par site (plus une police monospace pour le code, si necessaire). Vous pouvez jouer avec les graisses et les styles (italique, gras) au sein de chaque famille pour creer de la hierarchie.
La hierarchie visuelle
Etablissez une hierarchie claire entre les elements :
- H1 : le titre principal, le plus grand et le plus visible
- H2 : les sections principales
- H3 : les sous-sections
- Corps : le texte courant, optimise pour la lecture longue
L'ecart de taille entre chaque niveau doit etre suffisant pour etre perceptible. Une echelle typographique courante utilise le ratio 1.25 (« majeure tierce ») :
| Element | Taille |
|---|---|
| Corps | 16 px |
| H3 | 20 px |
| H2 | 25 px |
| H1 | 31 px |
La lisibilite : les parametres essentiels
La taille du corps de texte
La taille minimale recommandee pour le corps de texte est 16 px sur ecran. En dessous, la lecture devient penible, surtout sur mobile. Pour les articles longs, 18 ou 20 px ameliorent le confort.
La longueur de ligne
La longueur de ligne optimale est de 45 a 75 caracteres par ligne, espaces compris. Au-dela, l'oeil peine a trouver le debut de la ligne suivante. En CSS, utilisez max-width sur le conteneur de texte plutot que de limiter la largeur du texte lui-meme.
L'interligne
Un interligne (line-height) de 1.5 a 1.7 est recommande pour le corps de texte. Un interligne trop serre fatigue les yeux ; trop espace, il fragmente la lecture.
Le contraste
Le ratio de contraste minimum entre le texte et le fond est de 4,5:1 pour le texte normal et 3:1 pour le texte agrandi (superieur a 18 px en gras ou 24 px en normal), selon les WCAG 2.1 niveau AA.
Attention au texte gris clair sur fond blanc : #999999 sur #FFFFFF offre un ratio de seulement 2.85:1, insuffisant. Privilegiez au minimum #767676 (ratio de 4.54:1).
Optimiser le chargement des polices
Google Fonts ou polices auto-hebergees
Google Fonts est la source la plus populaire, mais elle pose deux problemes :
- Performances : chaque police requiert une connexion a un serveur externe
- RGPD : la Cour regionale de Munich a juge en janvier 2022 que l'utilisation de Google Fonts sans consentement constitue une violation du RGPD (transmission de l'adresse IP a Google)
La solution recommandee : telecharger les polices et les heberger vous-meme. L'outil google-webfonts-helper simplifie cette operation.
Le format WOFF2
Utilisez exclusivement le format WOFF2 (Web Open Font Format 2), supporte par tous les navigateurs modernes. Il offre une compression 30 % superieure a WOFF.
La declaration CSS optimale
@font-face {
font-family: 'Inter';
src: url('/fonts/inter-var.woff2') format('woff2');
font-weight: 100 900;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153;
}font-display: swapaffiche le texte immediatement avec une police de remplacementunicode-rangelimite le telechargement aux caracteres utilises- Les polices variables (
font-weight: 100 900) remplacent plusieurs fichiers par un seul
Conclusion
La typographie est un investissement a fort retour : une bonne selection de polices, correctement optimisee, ameliore la lisibilite, renforce l'identite de marque et contribue au confort de vos visiteurs. Partez d'un bon duo serif/sans-serif, respectez les regles de lisibilite, et optimisez le chargement.