Forme · T-12
Échelle typographique fluide
Choisissez une taille de base et un rapport pour un petit et un grand écran. Kleurstaal calcule les pas en clamp(), les montre à la largeur voulue et vous avertit quand le zoom ne suit plus.
Vos fichiers restent sur votre appareil
Questions
À savoir
Que fait clamp() ici exactement ?
Il fixe une taille minimale, une taille maximale et entre les deux une droite qui grandit avec la largeur de l’écran. Sous la petite largeur, le texte reste au minimum ; au-delà de la grande, au maximum.
Pourquoi une part en rem à côté du vw ?
Le vw seul ne grandit pas quand on zoome, ce que demandent les WCAG 1.4.4. La part en rem fait que le zoom agrandit encore le texte. Si un pas grandit plus de 2,5 fois entre les deux écrans, un zoom à 200 pour cent ne suffit plus partout et Kleurstaal vous avertit.
Quel rapport choisir ?
Sur mobile, un rapport plus petit convient, comme 1,2, car les grands titres remplissent vite l’écran. Sur grand écran, il peut être plus large, comme 1,25 ou 1,333. C’est pourquoi vous les choisissez séparément.
Comment ça marche
Échelle typographique fluide en trois étapes
Deux écrans
Choisissez la largeur, la taille du texte courant et le rapport entre les pas, pour un mobile et pour un grand écran.
Faites glisser la largeur
L’aperçu montre chaque pas à la largeur choisie, comme sur un tel écran.
Emportez le code
Variables CSS, thème Tailwind 4 ou design tokens en JSON, prêts à coller.