La valeur clamp() pour 32–64px
Avec une plage de viewport de 320px à 1280px, le résultat est clamp(2rem, 1.3333rem + 3.3333vw, 4rem). La taille augmente de 3,33px tous les 100px de largeur de viewport : environ 46,9px sur une tablette de 768px, 55,5px à 1024px, puis elle se stabilise à 64px à partir de 1280px.
La valeur préférée combine une partie fixe en rem et une partie en vw. La partie en rem garde le texte lié à la taille de police du navigateur du lecteur ; la partie en vw assure la croissance. Modifiez les champs de viewport ci-dessus si le conteneur de votre mise en page cesse de grandir plus tôt ou plus tard.
Quand utiliser 32px à 64px
De 32 à 64px convient aux titres de page et aux h1 des sites marketing. Un titre de 32px est déjà affirmé sur mobile ; à 64px, il structure une section hero pleine largeur sur ordinateur.
Le maximum vaut 2× le minimum, dans la limite de 2,5× souvent retenue pour le critère WCAG 1.4.4 Redimensionnement du texte : le zoom du navigateur agrandit donc toujours cette taille de façon prévisible.
D’où viennent les chiffres
Pente = (64 − 32) ÷ (1280 − 320) = 0,0333, soit 3,3333vw. Ordonnée à l’origine = 32 − pente × 320 = 21,33px, soit 1,3333rem avec une police racine de 16px. Ces deux nombres forment l’argument central de clamp() ; le premier et le dernier sont votre minimum et votre maximum convertis en rem.
L’utiliser dans votre projet
Collez la valeur dans une déclaration font-size, stockez-la dans une propriété personnalisée comme --fluid-size ou utilisez la classe Tailwind text-[clamp(2rem,1.3333rem_+_3.3333vw,4rem)]. S’il vous faut une série complète de tailles cohérentes, le générateur d’échelle typographique crée des niveaux autour d’une taille de base avec la même plage de viewport.