CSS clamp() Calculator (Fluid Typography)
Build a fluid font-size: clamp(...) that scales smoothly between two viewport widths — copy a one-liner.
Presets
font-size: clamp(1rem, 0.8261rem + 0.8696vw, 1.5rem);Resize your window to watch the preview scale linearly.
The quick brown fox jumps over the lazy dog.
How to use
- Pick a preset (Body, H1, etc.) or set min/max value and viewport range.
- Choose rem or px (rem is recommended — respects user font preferences).
- Copy the one-liner clamp expression into your CSS.
About this tool
ShowHide
Build a fluid clamp() value from the two ends you actually know: the size you want on a small screen and the size you want on a large one, plus the viewport widths where each should apply. The tool solves the line between those two points and writes the middle term for you, so the value scales smoothly in between and is pinned flat outside the range instead of continuing off into absurd sizes. The preferred term deliberately combines a rem intercept with a vw slope. That mix matters for accessibility: a preferred value made only of vw ignores a reader who has raised their default font size, while keeping a rem component means their setting still moves the result. A live preview shows the computed size at several widths.
Frequently asked questions
Why use clamp() instead of media queries?
Linear scaling between two breakpoints — no jumps, no per-breakpoint values to maintain. Fewer lines of CSS for the same effect.
Why rem instead of px?
Users can set a base font-size preference in their browser (e.g. accessibility). rem respects that; px ignores it.
What's the slope in the middle?
It's how much the value grows per 1vw of viewport increase. Combined with the intercept, it's a linear function that crosses (minVw, minVal) and (maxVw, maxVal).
Browser support?
clamp() works in every browser since 2020 — Safari 13.1, Chrome 79, Firefox 75. Safe everywhere in 2026.
Should the preferred value ever be pure vw?
No. A value made only of viewport units ignores a reader who has raised their browser's default font size, which fails the requirement that text can be resized. Keeping a rem term in the middle — as this tool does — means their setting still moves the result.
What happens outside my two viewport widths?
The value stops scaling and pins flat at whichever end it reached. That is the whole point of clamp over a bare calc: below the small breakpoint it holds the minimum, above the large one it holds the maximum, instead of continuing along the line into sizes nobody designed for.
Related tools
CSS Unit Converter
Convert between px, rem, em, pt, vw, vh, and % using your own base font size and viewport.
Convert
What Is My Screen Resolution? (Hz and Scaling)
See your screen resolution, physical pixels, scaling (devicePixelRatio), browser window size, refresh rate, colour depth and HDR support at a glance.
Everyday
CSS Grid Playground
Visually pick grid-template-columns / rows, gap, and item alignment — copy the CSS straight into your project.
Developer
CSS Gradient Generator
Build linear or radial CSS gradients with multi-stop colors and copy the code.
Color & CSS
Color Format Converter
Convert any color between HEX, RGB, HSL, HSV, OKLCH, and a CSS custom property.
Color & CSS
CSS Box Shadow Generator
Visually design CSS box-shadows with multiple layers, live preview, and copy-ready CSS / Tailwind output.
Color & CSS