Why use rem in the output?

rem respects the user's root font size, so text still scales if they increase their browser's default size. The pixel inputs are converted to rem for you.

What are good viewport values?

A common range is 320 px (small phones) to 1280 px (laptops), but match it to your design's breakpoints.

Does clamp() need media queries?

No. That is the point: one clamp() value scales smoothly across the range, replacing several media queries.

CSS & Design

CSS clamp() Generator

Build a fluid clamp() value for responsive type and spacing.

Free browser toolRuns in your browserNo sign-up

Min size (px)

Max size (px)

Min viewport (px)

Max viewport (px)

font-size: clamp(1rem, 0.6667rem + 1.6667vw, 2rem);

Fluid preview: this text scales with the viewport width.

clamp(min, preferred, max) keeps a size fluid between two viewport widths, so type and spacing scale smoothly without media queries.

About the CSS clamp() Generator

clamp() lets a size grow fluidly between two viewport widths without media queries, which is perfect for responsive typography and spacing.

Enter the minimum and maximum sizes and the viewport range, and this tool works out the clamp() value with the correct rem and vw parts.

A live preview shows the text scaling as you change the numbers.

Key features

Min and max size and viewport inputs
Outputs a ready-to-use clamp() value
Live fluid preview
rem-based output for accessibility

How to use

1Enter the min and max size in pixels.
2Enter the min and max viewport widths.
3Copy the generated clamp() value.

Examples

Fluid heading

Input: 16-32px over 320-1280px

Output: clamp(1rem, 0.727rem + 1.25vw, 2rem)

Font size grows from 16 px to 32 px as the viewport widens.

Frequently asked questions

Why use rem in the output?: rem respects the user's root font size, so text still scales if they increase their browser's default size. The pixel inputs are converted to rem for you.
What are good viewport values?: A common range is 320 px (small phones) to 1280 px (laptops), but match it to your design's breakpoints.
Does clamp() need media queries?: No. That is the point: one clamp() value scales smoothly across the range, replacing several media queries.

Open a related tool to prepare your files or refine the finished result.