The clamp() value for 24–48px
With a viewport range of 320px to 1280px the result is clamp(1.5rem, 1rem + 2.5vw, 3rem). The size grows by 2.5px for every 100px of viewport width, reaching about 35.2px on a 768px tablet and 41.6px at 1024px, before it settles at 48px 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 24px to 48px
24 to 48px is a common choice for h2 headings and feature titles. The size doubles across the range, giving desktop layouts strong contrast while keeping phone headings to one or two lines.
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 = (48 − 24) ÷ (1280 − 320) = 0.025, which is 2.5vw. Intercept = 24 − 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.5rem,1rem_+_2.5vw,3rem)]. If you need a whole set of related sizes, the type scale generator builds steps around a base size with the same viewport range.