La valeur clamp() pour 16–20px
Avec une plage de viewport de 320px à 1280px, le résultat est clamp(1rem, 0.9167rem + 0.4167vw, 1.25rem). La taille augmente de 0,42px tous les 100px de largeur de viewport : environ 17,9px sur une tablette de 768px, 18,9px à 1024px, puis elle se stabilise à 20px à 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 à 20px
De 16 à 20px est une plage classique pour le texte courant des sites de contenu. Les mobiles gardent les 16px par défaut du navigateur, tandis que les lecteurs sur ordinateur profitent d’une taille plus grande, adaptée à des lignes plus longues. Blogs, documentations et articles longs en tirent le meilleur parti.
Le maximum vaut 1,25× 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 = (20 − 16) ÷ (1280 − 320) = 0,0042, soit 0,4167vw. Ordonnée à l’origine = 16 − pente × 320 = 14,67px, soit 0,9167rem 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.9167rem_+_0.4167vw,1.25rem)]. 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.