What does clamp() do?

clamp(min, preferred, max) keeps a value between a minimum and maximum while letting the preferred value scale in between — perfect for responsive sizing.

How is this better than just using vw?

Plain vw keeps shrinking or growing without limit. clamp() bounds it so text stays readable on very small and very large screens.

Why rem instead of px?

rem respects the user's browser font-size setting, which is better for accessibility than fixed pixels.

Is fluid type accessible?

It can be, when you keep a sensible minimum and avoid extreme slopes. Using rem also lets users scale text. Always test zoom and large-text settings.

Is my data sent to a server?

No. The clamp() value is generated entirely in your browser.

CSS clamp() Generator

Min size (px)

Max size (px)

Root font (px)

Min viewport (px)

Max viewport (px)

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

Computed size by viewport width

360px

16.3px

768px

19.7px

1024px

21.9px

1440px

24px

Related external tools

Some links are affiliate links.

AmazonThe world's largest online marketplace for shopping, electronics, books, software, and more. Fast shipping, easy returns, and a vast product catalog make it a go-to for everyday purchases. Prime membership adds streaming, free shipping, and exclusive deals.UdemyAn online learning marketplace with over 250,000 courses on coding, design, business, and more. Courses are taught by industry experts and available at your own pace. Frequent sales make it one of the most affordable ways to learn new skills.

Create a fluid CSS clamp() value that scales smoothly between a minimum and maximum size across a viewport range — ideal for responsive typography and spacing. Enter your sizes, copy the result, and check the live preview. Everything runs in your browser.

How to use

Set the minimum and maximum size in pixels.
Set the viewport range over which it should scale.
Copy the generated clamp() value and check the preview at different widths.

How it works

The tool draws a straight line between two points: your minimum size at the smallest viewport and your maximum size at the largest. That line becomes the preferred value, written with a rem offset plus a vw slope. clamp() then locks it so it never goes below your minimum or above your maximum, giving smooth scaling between the two breakpoints.

Features

True fluid scaling

Sizes interpolate smoothly between breakpoints instead of jumping at media queries.

rem + vw output

Output uses rem and vw so it respects user font settings and stays accessible.

Live preview

See the computed pixel size at several common viewport widths.

Custom root

Set your root font size so the rem values match your project.

Copy-ready

Copy a complete font-size declaration straight into your CSS.

When to use it

Fluid typography

Scale headings and body text smoothly from mobile to desktop.

Spacing & gaps

Apply the same fluid idea to padding, margins and grid gaps.

Type scale

Build a responsive type scale where each step scales with the viewport.

Consistency

Replace stacks of media queries with a single, predictable clamp().

Notes

The max viewport must be larger than the min viewport.
Values use rem based on your root font size (16px by default).
Very steep slopes can hurt readability at in-between sizes.
Everything runs on your device; nothing is uploaded.

FAQ

What does clamp() do?: clamp(min, preferred, max) keeps a value between a minimum and maximum while letting the preferred value scale in between — perfect for responsive sizing.
How is this better than just using vw?: Plain vw keeps shrinking or growing without limit. clamp() bounds it so text stays readable on very small and very large screens.
Why rem instead of px?: rem respects the user's browser font-size setting, which is better for accessibility than fixed pixels.
Is fluid type accessible?: It can be, when you keep a sensible minimum and avoid extreme slopes. Using rem also lets users scale text. Always test zoom and large-text settings.
Is my data sent to a server?: No. The clamp() value is generated entirely in your browser.