Fluid Type Scale

When to use this

• You need type that scales smoothly between a mobile and desktop size without breakpoint jumps.
• You are building fluid spacing tokens that stay proportional to the type scale.
• You want the exact clamp() math, not a generator tool's opaque output.
• You need to validate that a fluid scale stays within WCAG minimum text size requirements at all viewports.
• Do NOT use this when you need font pairing, line-height ratios, or typographic hierarchy decisions; use modular-type-systems instead.

Mental model

clamp(min, preferred, max) takes three values. The browser uses preferred but never goes below min or above max. The trick is making preferred a viewport-relative expression that linearly interpolates between min and max across a defined viewport range.

The formula: given a min font size fMin at viewport width vMin, and a max font size fMax at viewport width vMax, the preferred value is:

preferred = fMin + (fMax - fMin) * (100vw - vMin) / (vMax - vMin)

Simplified to slope-intercept form: