La valeur clamp() pour 14–16px
Avec une plage de viewport de 320px à 1280px, le résultat est clamp(0.875rem, 0.8333rem + 0.2083vw, 1rem). La taille augmente de 0,21px tous les 100px de largeur de viewport : environ 14,9px sur une tablette de 768px, 15,5px à 1024px, puis elle se stabilise à 16px à 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 14px à 16px
Une plage de 14 à 16px convient au texte secondaire : légendes, aides de formulaire, cellules de tableau, notes de bas de page et navigation dense. La variation est subtile : le texte gagne un peu de confort sur ordinateur sans prendre plus de place sur mobile. Associez-la à un texte courant de 16–18px pour une hiérarchie claire.
Le maximum vaut 1,14× 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 = (16 − 14) ÷ (1280 − 320) = 0,0021, soit 0,2083vw. Ordonnée à l’origine = 14 − 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(0.875rem,0.8333rem_+_0.2083vw,1rem)]. 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.