FluidType Calc

How the clamp() formula works

Fluid typography interpolates linearly between a minimum size at a minimum viewport width and a maximum size at a maximum viewport width, instead of jumping between fixed sizes at media-query breakpoints. The slope of that line becomes a vw-based term:

slope = (maxSize - minSize) / (maxViewport - minViewport)
intercept = minSize - slope * minViewport
preferred = calc(intercept-px + (slope*100)vw)
clamp(minSize-px, preferred, maxSize-px)

Worked example: 16px at a 320px viewport, growing to 24px at a 1280px viewport. Slope = (24-16)/(1280-320) = 8/960 ≈ 0.00833. Intercept = 16 - 0.00833×320 ≈ 13.33. The result is clamp(16px, calc(13.33px + 0.83vw), 24px) — at exactly 320px viewport width the calc() term evaluates back to 16px, and at exactly 1280px it evaluates to 24px, with a smooth ramp in between. This avoids the layout-shift-prone jumps of breakpoint-based sizing that web.dev's Core Web Vitals guidance flags as a UX cost.

Frequently asked questions

How does the clamp() formula avoid breakpoints?

Instead of jumping between fixed sizes at media-query breakpoints, clamp() interpolates linearly between your min and max size using a vw-based formula, so the font size changes smoothly on every pixel of resize.

What is the type scale mode for?

It generates a whole set of fluid sizes (body, h6...h1) at once from a base size and a ratio, so your whole heading hierarchy scales consistently instead of tuning each size by hand.

Why does the preview use a slider instead of resizing the browser?

CSS vw units are relative to the real browser window, not to a resizable box on the page, so the slider recomputes the exact clamp() result in JavaScript for any simulated width without you needing to resize your actual window.

Does this replace media queries entirely?

For font size, usually yes within the min/max range you set. Below the min viewport or above the max viewport the size stays pinned at your chosen minimum or maximum, which is what clamp() is for.