La valeur clamp() pour 16–24px
Avec une plage de viewport de 320px à 1280px, le résultat est clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem). La taille augmente de 0,83px tous les 100px de largeur de viewport : environ 19,7px sur une tablette de 768px, 21,9px à 1024px, puis elle se stabilise à 24px à 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 16px à 24px
De 16 à 24px fonctionne bien pour les chapôs, introductions et petits intertitres. La taille démarre comme du texte courant sur mobile et atteint 24px sur ordinateur, ce qui ajoute de l’emphase sans le poids d’un vrai titre.
Le maximum vaut 1,5× 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 = (24 − 16) ÷ (1280 − 320) = 0,0083, soit 0,8333vw. Ordonnée à l’origine = 16 − pente × 320 = 13,33px, soit 0,8333rem 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(1rem,0.8333rem_+_0.8333vw,1.5rem)]. 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.