The clamp() value for 40–80px
With a viewport range of 320px to 1280px the result is clamp(2.5rem, 1.6667rem + 4.1667vw, 5rem). The size grows by 4.17px for every 100px of viewport width, reaching about 58.7px on a 768px tablet and 69.3px at 1024px, before it settles at 80px from 1280px upward.
The preferred value combines a fixed rem part with a vw part. The rem part keeps the text tied to the reader's browser font size; the vw part supplies the growth. Change the viewport fields above if your layout's container stops growing earlier or later.
When to use 40px to 80px
40 to 80px is aimed at hero headlines and campaign landing pages where the headline is the main visual element. Check long words at 320px – at 40px they may need hyphenation or shorter copy.
The maximum is 2× the minimum, within the 2.5× guideline often applied to WCAG 1.4.4 Resize Text, so browser zoom still enlarges this size predictably.
How the numbers are derived
Slope = (80 − 40) ÷ (1280 − 320) = 0.0417, which is 4.1667vw. Intercept = 40 − slope × 320 = 26.67px, or 1.6667rem with a 16px root font size. These two numbers form the middle argument of clamp(); the first and last arguments are your minimum and maximum converted to rem.
Using it in your project
Paste the value into a font-size declaration, store it in a custom property such as --fluid-size, or use the Tailwind class text-[clamp(2.5rem,1.6667rem_+_4.1667vw,5rem)]. If you need a whole set of related sizes, the type scale generator builds steps around a base size with the same viewport range.