Contrairement à une taille de police fixe (ex. : font-size: 16px), une taille adaptable s’appuie sur des unités relatives (comme em, rem, %) ou sur des media queries sensibles au zoom, ce qui permet au texte de :
- S’agrandir jusqu’à 200 % (exigence des WCAG 2.1, critère 1.4.4),
- Se réorganiser dynamiquement (colonnes, espacements, retours à la ligne),
- Conserver le contraste et la hiérarchie visuelle (titres, paragraphes, liens).
Pourquoi c’est critique :
- Accessibilité : indispensable pour les personnes ayant une basse vision, des troubles de la lecture (dyslexie) ou utilisant des zooms logiciels.
- Conformité RGAA : obligation légale pour les services publics et de nombreuses entreprises (niveau AA).
- Inclusion cognitive : un texte redimensionnable réduit la fatigue visuelle et améliore la compréhension.
- Responsive design éthique : ce n’est pas seulement l’écran qui doit s’adapter — l’utilisateur doit pouvoir adapter le contenu à ses besoins.
Bonnes pratiques techniques :
- Utiliser
rem(relatif à la racinehtml) pour une cohérence globale. - Éviter les
pxfixes pour le corps de texte (mais acceptables dans certains cas décoratifs). - Ne pas désactiver le zoom via
maximum-scale=1dans la balise<meta name="viewport">→ interdit par les WCAG. - Tester avec Ctrl + + (agrandir) et Ctrl + – (réduire) : le contenu ne doit ni déborder, ni se superposer, ni devenir illisible.
- Préférer une typographie fluide (ex. :
clamp(1rem, 2.5vw, 1.25rem)) pour une adaptation progressive entre mobile et desktop.
Une police adaptable n’est pas un détail technique : c’est un geste de respect envers des publics variés : aînés, jeunes en situation de précarité numérique, lecteurs fatigués, ou personnes en mobilité.
Termes associés
- WCAG 2.1 – Critère 1.4.4 (Resize text)
- Responsive typography
- Fluid typography
- Accessibilité visuelle
- Contrôle utilisateur
Explorer les thématiques : accessibilité