La valeur clamp() pour 24–48px
Avec une plage de viewport de 320px à 1280px, le résultat est clamp(1.5rem, 1rem + 2.5vw, 3rem). La taille augmente de 2,5px tous les 100px de largeur de viewport : environ 35,2px sur une tablette de 768px, 41,6px à 1024px, puis elle se stabilise à 48px à 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 24px à 48px
De 24 à 48px est un choix fréquent pour les titres h2 et les titres de fonctionnalités. La taille double sur la plage, ce qui donne un fort contraste sur ordinateur tout en limitant les titres à une ou deux lignes sur mobile.
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 = (48 − 24) ÷ (1280 − 320) = 0,025, soit 2,5vw. Ordonnée à l’origine = 24 − 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.5rem,1rem_+_2.5vw,3rem)]. 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.