Sur un site, l'utilisateur passe 95 % de son temps à lire. La typographie n'est donc pas un détail décoratif — c'est l'essentiel de l'expérience. Voici les règles qui rendent un texte lisible, confortable et élégant.
1. Deux polices, pas dix
Une police pour le corps (lisible, neutre, comme Inter), éventuellement une seconde pour les titres ou les accents. Au-delà de deux familles, ça devient incohérent. La contrainte crée l'élégance. Chez nous, c'est Inter + un serif italic pour les accents.
2. La hiérarchie par la taille et le poids
Titre, sous-titre, corps, légende : chaque niveau doit être clairement distinct. On joue sur la taille et le poids (graisse), pas sur dix couleurs. Une bonne hiérarchie se lit d'un coup d'œil — l'œil sait où aller.
3. La taille du corps : ne pas faire petit
16px minimum pour le corps, souvent 17-18px. Le texte trop petit fatigue et fait fuir. On n'est plus en 2010 — l'espace ne manque pas, la lisibilité prime.
4. L'interligne (line-height) qui respire
Un interligne de 1,5 à 1,7 pour le corps. Trop serré, le texte étouffe ; trop large, il se disloque. L'interligne, c'est l'air entre les lignes — vital pour la lecture longue.
5. La largeur de ligne : 60-75 caractères
Une ligne trop longue épuise l'œil (il perd le début de la suivante) ; trop courte, elle hache la lecture. L'idéal : 60 à 75 caractères par ligne. C'est pour ça que les blocs de texte ont une largeur max.
6. Le contraste suffisant
Le gris clair à la mode est souvent illisible. Minimum 4,5:1 (WCAG) — le texte doit ressortir nettement du fond. Voir le guide accessibilité.
7. Le letter-spacing maîtrisé
Les grands titres gagnent à être resserrés (letter-spacing négatif) ; les petites majuscules (eyebrows) à être espacées. Un détail, mais c'est ce qui sépare l'amateur du pro.
Une belle typo ne se remarque pas. Elle rend juste la lecture évidente.
8. Performance des polices
Les polices web ont un coût de chargement. Limite les graisses chargées, utilise font-display: swap pour éviter le texte invisible, et précharge les polices critiques. La beauté ne doit pas ralentir — voir Core Web Vitals.
L'erreur classique
Choisir une police "originale" illisible pour "se démarquer". La personnalité passe par la hiérarchie et un accent bien placé, pas par une police difficile à lire. Lisibilité d'abord, toujours.
Tu veux un design où la typo travaille pour toi ? C'est un des piliers de notre approche — parlons de ton projet.