La valeur clamp() pour 48–96px
Avec une plage de viewport de 320px à 1280px, le résultat est clamp(3rem, 2rem + 5vw, 6rem). La taille augmente de 5px tous les 100px de largeur de viewport : environ 70,4px sur une tablette de 768px, 83,2px à 1024px, puis elle se stabilise à 96px à 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 48px à 96px
De 48 à 96px relève de la typographie d’affichage : titres hero géants, grands chiffres et messages percutants. Utilisez-la avec parcimonie, avec une hauteur de ligne serrée autour de 1–1,1, et assurez-vous que votre mot le plus long tienne à la plus petite taille.
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 = (96 − 48) ÷ (1280 − 320) = 0,05, soit 5vw. Ordonnée à l’origine = 48 − pente × 320 = 32px, soit 2rem 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(3rem,2rem_+_5vw,6rem)]. 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.