The clamp() value for 18–24px
With a viewport range of 320px to 1280px the result is clamp(1.125rem, 1rem + 0.625vw, 1.5rem). The size grows by 0.63px for every 100px of viewport width, reaching about 20.8px on a 768px tablet and 22.4px at 1024px, before it settles at 24px 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 18px to 24px
18 to 24px fits h4 and h5 headings, card titles, pull quotes and larger body text on landing pages. Starting at 18px keeps it distinct from 16px body text even on the smallest screens.
The maximum is 1.33× 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 = (24 − 18) ÷ (1280 − 320) = 0.0063, which is 0.625vw. Intercept = 18 − 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.125rem,1rem_+_0.625vw,1.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.