Generate fluid CSS values that scale between a min and max with viewport width — no media queries needed.
clamp(1rem, 0.82rem + 0.48vw, 2rem)
font-size: clamp(1rem, 0.82rem + 0.48vw, 2rem);
clamp(min, preferred, max) is a CSS math function that clamps a value between a lower and upper bound. The preferred value is typically a viewport-relative expression like calc(0.82rem + 0.48vw) that scales with screen width. When the viewport is narrow, the value is clamped to the minimum; when wide, to the maximum.
Given a minimum size at a minimum viewport and maximum size at a maximum viewport, the fluid value is:
slope = (maxSize - minSize) / (maxVW - minVW)
intercept = minSize - (slope × minVW)
clamp(minSize, calc(slope × 100vw + intercept), maxSize)
This creates a linear scale between the two size/viewport pairs, clamped at both ends. Use rem units for font sizes to respect user browser zoom settings — this is important for accessibility.