The clamp() value for 16–20px
With a viewport range of 320px to 1280px the result is clamp(1rem, 0.9167rem + 0.4167vw, 1.25rem). The size grows by 0.42px for every 100px of viewport width, reaching about 17.9px on a 768px tablet and 18.9px at 1024px, before it settles at 20px 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 16px to 20px
16 to 20px is a classic range for body copy on content sites. Phones keep the 16px browser default, while desktop readers get a larger size that matches longer line lengths. Blogs, documentation and long-form articles benefit most.
The maximum is 1.25× 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 = (20 − 16) ÷ (1280 − 320) = 0.0042, which is 0.4167vw. Intercept = 16 − slope × 320 = 14.67px, or 0.9167rem 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(1rem,0.9167rem_+_0.4167vw,1.25rem)]. If you need a whole set of related sizes, the type scale generator builds steps around a base size with the same viewport range.