Un titre en 64px qui claque sur un écran 27 pouces devient ingérable sur un iPhone SE. Un corps en 14px confortable sur mobile est minuscule sur un écran 4K à 2 mètres de distance. La typographie responsive consiste à adapter les tailles de texte à la largeur (et parfois à la distance) de l'écran, tout en maintenant la hiérarchie visuelle.
Le principe
Le corps de texte reste relativement stable. C'est les titres qui bougent le plus. Un H1 peut passer de 32px sur mobile à 64px sur desktop — c'est un facteur 2×. Le corps passera de 16px à 18px — c'est un ajustement fin. Cette asymétrie préserve la hiérarchie : les titres gagnent en impact sur grand écran sans écraser le texte courant sur petit écran.
Approche 1 — Media queries par palier
La méthode la plus simple et la plus contrôlable. Tu définis des tailles fixes pour chaque breakpoint.
| Élément | Mobile (<768px) | Tablette (768–1024px) | Desktop (>1024px) |
|---|---|---|---|
| H1 | 32px | 42px | 56px |
| H2 | 24px | 30px | 36px |
| H3 | 20px | 22px | 24px |
| Corps | 16px | 17px | 18px |
| Légende | 14px | 14px | 15px |
Avantage : tu contrôles exactement chaque taille. Inconvénient : le texte « saute » d'une taille à l'autre au passage de chaque breakpoint.
Approche 2 — Typographie fluide avec clamp()
La fonction CSS clamp() définit une taille minimale, une taille fluide et une taille maximale. Le texte grandit progressivement avec la largeur de l'écran — pas de saut.
h1 { font-size: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
Traduction : le H1 fait au minimum 32px, grandit de façon fluide avec l'écran et plafonne à 56px.
body { font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); }
Le corps varie entre 16px et 18px — un ajustement subtil.
Avantage : transition fluide, pas de breakpoint à gérer pour la typo. Inconvénient : la formule est moins intuitive et demande des tests pour calibrer les valeurs.
Approche 3 — Hybride
La plus robuste en production. Utilise clamp() pour les titres (où la variation est importante) et des tailles fixes en rem pour le corps et les légendes (où la variation est minime). C'est le meilleur rapport contrôle/fluidité.
L'interlignage en responsive
L'interlignage doit s'adapter avec la taille. Un line-height de 1.15 sur un H1 en 56px fonctionne — mais ce même 1.15 sur un H1 réduit à 32px donne un titre trop serré. Prévois un interlignage légèrement plus généreux pour les tailles mobiles.
Pour le corps, un line-height fixe en valeur relative (1.5 à 1.6) s'adapte naturellement puisqu'il est proportionnel à la taille du texte.
La longueur de ligne en responsive
La largeur du conteneur doit s'adapter pour maintenir 50–75 caractères par ligne. Sur mobile en plein écran, 16px sur une largeur de 375px donne environ 45–55 caractères — c'est acceptable. Sur un écran large, sans contrainte de largeur, la ligne peut dépasser 120 caractères — c'est illisible.
La solution : max-width: 70ch; sur le conteneur de texte. L'unité ch correspond à la largeur du caractère « 0 » dans la police courante. 70ch ≈ 65-75 caractères réels selon la police.
Commence toujours par le mobile. Définis tes tailles mobiles d'abord (mobile-first), puis augmente vers les grands écrans. C'est plus facile d'agrandir un texte que de le rétrécir — et tu t'assures que la base mobile est solide.
Outil : calculateur clamp() en ligne
Le site Utopia (utopia.fyi) génère des échelles typographiques fluides complètes. Tu entres ta taille min (mobile) et max (desktop), la largeur min et max de l'écran, et il calcule les formules clamp() pour chaque niveau de ta hiérarchie. C'est le gain de temps le plus significatif pour la typo responsive.