FluidType Calc

What is FluidType Calc?

"Fluid typography" means text that scales smoothly between a minimum and maximum size as the browser window resizes, instead of jumping abruptly at breakpoints — done with CSS's clamp() function, whose formula is fiddly to calculate by hand. FluidType Calc generates a ready-to-use clamp() value from the sizes and viewport widths you want, either for one font size or for a full type scale (headings, body, captions) all at once.

How to use FluidType Calc

1. Choose Single size for one font-size formula, or Type scale to generate a whole set of related sizes at once.
2. Enter your Min size and Max size (or min/max base and ratio, in Type scale mode), and the Min viewport / Max viewport widths they should apply between.
3. Drag the Simulated viewport width slider to preview how the text resizes at different screen widths.
4. Copy the generated clamp() CSS with the copy button and paste it into your stylesheet.

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 at once — a Base value plus Step 1, Step 2, and so on — from one base size and ratio, so you can assign them to your heading hierarchy (h1, h2, body...) yourself with one consistent scale, 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.