The clamp() value for 20–32px
With a viewport range of 320px to 1280px the result is clamp(1.25rem, 1rem + 1.25vw, 2rem). The size grows by 1.25px for every 100px of viewport width, reaching about 25.6px on a 768px tablet and 28.8px at 1024px, before it settles at 32px 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 20px to 32px
20 to 32px is a typical range for h3 and section subheadings. It stays compact on mobile, where space is scarce, and grows into a clear section marker on wide layouts.
The maximum is 1.6× 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 = (32 − 20) ÷ (1280 − 320) = 0.0125, which is 1.25vw. Intercept = 20 − slope × 320 = 16px, or 1rem 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(1.25rem,1rem_+_1.25vw,2rem)]. If you need a whole set of related sizes, the type scale generator builds steps around a base size with the same viewport range.