The clamp() value for 14–16px
With a viewport range of 320px to 1280px the result is clamp(0.875rem, 0.8333rem + 0.2083vw, 1rem). The size grows by 0.21px for every 100px of viewport width, reaching about 14.9px on a 768px tablet and 15.5px at 1024px, before it settles at 16px 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 14px to 16px
A 14 to 16px range suits secondary text: captions, form hints, table cells, footnotes and dense navigation. The change is subtle, so the text gains a little comfort on desktops without taking extra space on phones. Pair it with a 16–18px body size to keep a clear hierarchy.
The maximum is 1.14× 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 = (16 − 14) ÷ (1280 − 320) = 0.0021, which is 0.2083vw. Intercept = 14 − slope × 320 = 13.33px, or 0.8333rem 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(0.875rem,0.8333rem_+_0.2083vw,1rem)]. If you need a whole set of related sizes, the type scale generator builds steps around a base size with the same viewport range.