La valeur clamp() pour 20–32px
Avec une plage de viewport de 320px à 1280px, le résultat est clamp(1.25rem, 1rem + 1.25vw, 2rem). La taille augmente de 1,25px tous les 100px de largeur de viewport : environ 25,6px sur une tablette de 768px, 28,8px à 1024px, puis elle se stabilise à 32px à 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 20px à 32px
De 20 à 32px est une plage typique pour les h3 et les intertitres de section. Elle reste compacte sur mobile, où la place manque, et devient un repère de section bien visible sur les mises en page larges.
Le maximum vaut 1,6× 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 = (32 − 20) ÷ (1280 − 320) = 0,0125, soit 1,25vw. Ordonnée à l’origine = 20 − pente × 320 = 16px, soit 1rem 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(1.25rem,1rem_+_1.25vw,2rem)]. 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.