Ce qu’est la typographie fluide
La typographie responsive classique choisit quelques tailles fixes et les échange via des media queries : 16px sur mobile, 18px sur tablette, 20px sur ordinateur. La typographie fluide remplace ces paliers par une fonction continue de la largeur du viewport. Avec CSS clamp(), toute la règle tient sur une ligne et le navigateur calcule la bonne taille pour chaque largeur comprise entre vos deux extrémités.
La formule derrière clamp()
Une taille fluide est une droite passant par deux points : (viewport min., taille min.) et (viewport max., taille max.). La pente vaut (taille max. − taille min.) ÷ (viewport max. − viewport min.) ; multipliée par 100, elle donne le coefficient en vw. L’ordonnée à l’origine vaut taille min. − pente × viewport min. On obtient clamp(taille min., ordonnée + pente·100vw, taille max.). Le générateur ci-dessus fait exactement ce calcul et arrondit au nombre de décimales choisi.
Bien choisir ses tailles
Le texte courant a rarement besoin de beaucoup varier : de 16 à 18 ou de 16 à 20 pixels couvre la plupart des mises en page de lecture. Les titres profitent davantage de la fluidité, car un titre de 48px superbe sur un portable occupe la moitié d’un écran de mobile. Commencez par votre plus grand titre et descendez, avec un rapport entre minimum et maximum d’autant plus faible que le texte est petit.
Déduisez la plage de viewport de votre mise en page, pas d’une liste d’appareils. Le minimum est généralement 320 ou 360 px. Le maximum est la largeur à laquelle votre conteneur atteint sa max-width ; au-delà, la longueur de ligne ne grandit plus, la taille de police ne devrait donc plus grandir non plus.
Check-list accessibilité
Gardez minimum, maximum et ordonnée à l’origine en rem pour que les préférences de police de l’utilisateur s’appliquent toujours. Vérifiez le critère WCAG 1.4.4 en zoomant à 200 % : si le maximum dépasse environ 2,5 fois le minimum, le zoom risque de ne pas agrandir assez le texte, et l’outil vous avertit. Utilisez une hauteur de ligne relative (par exemple 1.5) pour qu’elle suive la police, et testez vos mots les plus longs sur l’écran le plus étroit.