La valeur clamp() pour 40–80px
Avec une plage de viewport de 320px à 1280px, le résultat est clamp(2.5rem, 1.6667rem + 4.1667vw, 5rem). La taille augmente de 4,17px tous les 100px de largeur de viewport : environ 58,7px sur une tablette de 768px, 69,3px à 1024px, puis elle se stabilise à 80px à 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 40px à 80px
De 40 à 80px vise les titres hero et les landing pages de campagne, où le titre est l’élément visuel principal. Vérifiez les mots longs à 320px : à 40px, ils peuvent nécessiter une césure ou un texte plus court.
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 = (80 − 40) ÷ (1280 − 320) = 0,0417, soit 4,1667vw. Ordonnée à l’origine = 40 − pente × 320 = 26,67px, soit 1,6667rem 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(2.5rem,1.6667rem_+_4.1667vw,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.