CSS Fluid Text Builder Formatter🔒 100% local
Responsive font sizing with clamp. Privacy-first, no server uploads, no tracking.
Given a minimum and a maximum size in px or rem, it fits a straight line through the 320px and 1200px viewport points and emits a clamp() font-size whose middle term is that slope in vw plus the offset in rem. It also prints a static fallback pair, the intermediate numbers it used, and a table of the resulting size at eight viewport widths. Both units describe the same scale, so 16px, 48px and 1rem, 3rem produce the same declaration.
How to use it
- Enter min and max - for example 1rem, 3rem - and press Process.
- Read the font-size line under CSS: the first value is your min, the slope is the vw part, the offset is the rem part, and the last value is your max.
- Check the per-viewport table to see where the clamp stops growing and starts using the max.
- Copy Output takes both the modern rule and the fallback pair.
Worked example
1rem, 3rem, 1vwbecomesCSS:
.fluid-text {
font-size: clamp(1rem, 0.2273vw + 0.2727rem, 3rem);
}Computed by the tool from its own window: slope (3-1)/(1200-320) = 0.002273 rem per px, written as 0.2273vw, offset 1 - 0.002273 x 320 = 0.2727rem.
16px, 48pxbecomesCSS:
.fluid-text {
font-size: clamp(1rem, 0.2273vw + 0.2727rem, 3rem);
}The same declaration as the rem input, as expected - only the trailing tip line differs, because no third value was supplied.
When to use it
- Making a heading or body size scale with the viewport instead of stepping through breakpoints.
- Getting the vw-plus-rem middle term and the viewport where the clamp flattens out, before tuning it by eye.
- Producing the old-browser fallback pair at the same time as the modern rule.
What it does not do
- The third value does nothing. It is parsed and echoed back, but the slope is always derived from the 320px-1200px window, so '1rem, 3rem, 1vw' and '16px, 48px' emit exactly the same declaration.
- The viewport window is hard-coded, so the fluid band cannot be moved to, say, 400px-1600px.
- min and max must be px or rem. vw, vh and percentage values are rejected, and a max smaller than the min stops with 'maxSize must be larger than minSize.'
- The property is fixed to font-size, and nothing is rendered: the per-viewport table is arithmetic, not a preview of real text.