How does clamp() work?

It takes a minimum, a preferred value, and a maximum, and returns the preferred one unless it falls outside the bounds. With a vw-based preferred value, the size scales with the viewport and then flattens at both ends.

Why is the output in rem and not px?

A size in px ignores the reader's browser font-size setting, which fails WCAG 1.4.4. Using rem for the bounds keeps the whole scale relative to their preference.

Can I use vw on its own?

You can, but you should not. Pure vw has no floor and no ceiling, so text becomes unreadably small on a phone and absurdly large on a monitor. The clamp is what makes it usable.

Does this replace media queries?

For type scaling, usually yes — one declaration covers the whole range instead of three breakpoints with sudden jumps. Layout changes still need media or container queries.

Fluid Typography Generator

Generate the clamp() that makes text grow with the viewport and then stop. Set the smallest and largest size you want and the screen widths they apply at, and the tool builds the linear function between them. Output is in rem rather than pixels, so the result still respects a reader who has changed their browser's default font size.

Design Tools

Font size range

Minimum font size (px)

On the narrowest screen

Maximum font size (px)

On the widest screen

Viewport range it scales across

Minimum viewport (px)

Maximum viewport (px)

font-size: clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem);

Live preview — resize this window to watch it scale

The quick brown fox jumps over the lazy dog

What the clamp resolves to at common screen widths
Viewport	Font size	In rem	State
320px	16px	1rem	held at the minimum
480px	17.33px	1.083rem	scaling
768px	19.73px	1.233rem	scaling
1024px	21.87px	1.367rem	scaling
1280px	24px	1.5rem	held at the maximum
1920px	24px	1.5rem	held at the maximum

Output is in rem, not px, so the size still responds to a reader who has changed their browser’s default font size — a clamp built from pixels ignores that setting and fails WCAG 1.4.4.

Private by default

This tool runs entirely in your browser. Your data is never uploaded to a server.

How it works

The line behind the clamp

slope = (maxSize − minSize) ÷ (maxWidth − minWidth) · preferred = intercept + slope × 100vw

The preferred value is the straight line through the two points you supplied: your minimum size at the narrow viewport, your maximum at the wide one. clamp() then holds it flat outside that range, so the text stops growing rather than running away on an ultrawide screen.

All four inputs are entered in pixels for familiarity but converted to rem before the line is computed, assuming a 16px root.
The vw coefficient is what produces the scaling; the rem term shifts the line so it passes through your minimum point.
A negative rem term is normal and correct — it is the y-intercept of a line that only becomes meaningful inside your viewport range.
Zooming interacts with vw units. Test at 200% zoom, which WCAG 1.4.4 requires text to survive.

For reference

A type scale built this way

Each row scales between 320px and 1280px viewports.

Role	Min	Max	clamp()
Body	16px	18px	clamp(1rem, 0.9583rem + 0.2083vw, 1.125rem)
Lead	18px	22px	clamp(1.125rem, 1.0417rem + 0.4167vw, 1.375rem)
H3	20px	28px	clamp(1.25rem, 1.0833rem + 0.8333vw, 1.75rem)
H2	24px	36px	clamp(1.5rem, 1.25rem + 1.25vw, 2.25rem)
H1	32px	56px	clamp(2rem, 1.5rem + 2.5vw, 3.5rem)

Larger text needs a wider range: the same 2px growth that suits body copy is invisible on a heading.

How to use

4 clear steps.

Set the minimum and maximum font size in pixels.
Set the viewport widths those sizes should apply at.
Copy the generated clamp() declaration.
Check the table to see the rendered size at common screen widths.

Good to know

Frequently asked questions

How does clamp() work?: It takes a minimum, a preferred value, and a maximum, and returns the preferred one unless it falls outside the bounds. With a vw-based preferred value, the size scales with the viewport and then flattens at both ends.
Why is the output in rem and not px?: A size in px ignores the reader's browser font-size setting, which fails WCAG 1.4.4. Using rem for the bounds keeps the whole scale relative to their preference.
Can I use vw on its own?: You can, but you should not. Pure vw has no floor and no ceiling, so text becomes unreadably small on a phone and absurdly large on a monitor. The clamp is what makes it usable.
Does this replace media queries?: For type scaling, usually yes — one declaration covers the whole range instead of three breakpoints with sudden jumps. Layout changes still need media or container queries.