CSS clamp() Fluid Typography Generator
The Clamp Scale Generator is a free, client-side tool that produces
fluid, responsive typography using the CSS clamp() function.
You set a minimum and maximum viewport width and a base font size for each, pick a modular type scale, and the
tool generates six fluid tiers — from small text up to Heading 1 — as clean :root
CSS custom properties in rem or
px. Everything runs in your browser; nothing is uploaded.
What is CSS clamp()?
clamp(MIN, PREFERRED, MAX) returns a value
that grows with the PREFERRED expression but is never smaller than
MIN or larger than MAX.
When the preferred value includes a viewport unit such as vw, text scales
smoothly between a small-screen size and a large-screen size — replacing several font-size media queries with a single declaration.
How the math works
For each tier the generator computes:
- slope = (maxSize − minSize) ÷ (maxViewport − minViewport)
- intersection = minSize − minViewport × slope
- clamp(minSize, intersection + slope × 100vw, maxSize)
Values are rounded to 4 decimal places, and when the rem unit is active
each pixel value is divided by the 16px root for accessible, preference-respecting output.
How to generate a fluid type scale
- Set the viewport range — the min and max widths (e.g. 320px → 1200px) where type should scale.
- Set the base font size — the body size at the smallest and largest viewport (e.g. 16px → 19px).
- Pick a type scale — a modular ratio that builds the six-tier hierarchy.
- Preview & copy — drag the simulator to test, then copy each rule or the full
:rootblock.
Modular type scales explained
A modular scale multiplies the base size by a fixed ratio to create a consistent hierarchy. This tool supports the classic ratios: Minor Second (1.067), Major Second (1.125), Minor Third (1.200), Perfect Fourth (1.333), Augmented Fourth (1.414), Perfect Fifth (1.500), and the Golden Ratio (1.618).
Frequently asked questions
Should I use rem or px for fluid typography?
Prefer rem. Using rem for the clamp() bounds respects the user's browser font-size setting, which improves accessibility. This generator outputs rem by default against a 16px root, and can switch to px when you need absolute values.
Do I still need media queries?
For font sizing, usually not — a single clamp() declaration covers the full range between your min and max viewports. Media queries remain useful for layout changes such as switching column counts or hiding elements.
Is this tool free and private?
Yes. It is completely free with no sign-up, and every calculation runs locally in your browser. No input or generated CSS is ever sent to a server.
What browsers support CSS clamp()?
clamp() is supported in all modern browsers — Chrome, Edge, Firefox, and Safari — and has been broadly available since 2020.