Le Responsive Typography

Pourquoi c'est important

Un titre de 72px sublime sur desktop devient illisible sur mobile. La typo responsive garantit une hiérarchie visuelle cohérente sur tous les ecrans. La fonction CSSclamp()remplace des dizaines de media queries par une seule ligne fluide (Smashing Magazine, 2022).

Le framework

1. 01

   1. La formule clamp()

   clamp(min, preferred, max). Le navigateur choisit la valeur preferee tant qu'elle reste entre le min et le max. clamp(1rem, 5vw, 3rem).

2. 02

   2. Combine vw + rem

   Ne mettez jamais duvwseul en preferred : ca casse le zoom (Roselli, accessibilite). Toujours combiner :clamp(1rem, 0.5rem + 2vw, 2.5rem).

3. 03

   3. Echelle typographique

   Definissez un ratio (1.25 ou 1.333) entre chaque niveau. H1 = base x ratio^4, H2 = base x ratio^3, etc. L'echelle crée une hiérarchie harmonieuse et previsible.

4. 04

   4. Design tokens fluides

   Créez des variables CSS pour chaque niveau :--text-xl,--text-lg,--text-base. Chaque token utiliseclamp(). Une source de vérité pour tout votre système.

5. 05

   5. Line-height adaptative

   Les grands titres ont besoin d'un line-height serre (1.1-1.2), le corps de texte plus aere (1.5-1.6). Adaptez le line-height en fonction de la taille, pas un ratio unique.

6. 06

   6. Testez le zoom

   Zoom a 200% dans le navigateur. Si le texte ne grossit pas ou depasse du conteneur, votre système est casse. Le WCAG exige que le texte soit redimensionnable (critere 1.4.4).

Pour aller plus loin