Generate a fluid clamp() font size that scales between two viewport widths. Enter min and max sizes, copy the clamp(), and watch a live preview scale.
Runs entirely in your browser — your data never leaves your device.
How to use CSS clamp() Generator
What it does & when you need it
Fluid typography lets a font size grow smoothly with the viewport instead of
jumping at media-query breakpoints, and the modern way to write it is a single
clamp(). The trouble is the middle term: a vw slope plus a rem offset that
has to be solved so the text hits your minimum size on a phone and your maximum on
a desktop. This generator does that algebra. Give it the two font sizes and the
two viewport widths, and it returns a clamp() you can paste onto any property,
with a live line of text that scales as you resize the window. It runs entirely in
your browser.
Reach for it for headings, hero copy, section padding, or any value you want to
scale between a small screen and a large one without a stack of breakpoints.
How to use
Enter the Min and Max font size in pixels — the smallest and largest
you will allow.
Enter the Min and Max viewport widths where those sizes should apply.
Copy the font-size: clamp(…) line, or press Ctrl/Cmd + Enter.
Things worth knowing
clamp() takes a minimum, a preferred value, and a maximum. Below the min
viewport the text holds at your minimum size; above the max viewport it holds at
your maximum; in between it follows the vw-based line. Because the sizes are
expressed in rem, the whole scale still respects a reader who bumps up their
browser's default font size.
The min must be smaller than the max. If the two sizes or the two viewport
widths are equal or reversed, there is no rising line to describe, so the tool
returns an error instead of a broken value. To translate a fixed pixel size into
rem by hand, use the CSS units converter.
Examples
Body text 16 to 24px
16 24 320 1280
Scales from 16px on a 320px phone to 24px on a 1280px desktop.
Large heading 18 to 40px
18 40 360 1440
A bolder ramp for hero headings between a small phone and a wide screen.
Subtle caption 14 to 18px
14 18 320 768
A gentle scale that finishes by tablet width for secondary text.
Frequently asked questions
What do the three values inside clamp() mean?+
clamp(min, preferred, max) returns the preferred value but never lets it drop below the min or rise above the max. This tool computes the preferred term as a vw slope plus a rem offset, so the size grows with the viewport between your two breakpoints and holds steady outside them.
Why are the sizes expressed in rem instead of px?+
Converting to rem ties the scale to the user root font size, so a reader who increases their browser default font still gets proportionally larger text. This tool converts your pixel inputs to rem using a 16px root, which is the CSS default.
What happens below the minimum viewport width?+
Below your minimum viewport the vw term is small enough that clamp returns the minimum size, and above your maximum viewport it returns the maximum. Between the two the value rises linearly, giving smooth fluid typography without media-query breakpoints.
Why do I get an error for some inputs?+
A fluid scale needs a rising line, so the minimum font size must be smaller than the maximum and the minimum viewport must be smaller than the maximum. If the values are equal or reversed there is no valid slope, so the tool reports an error instead of emitting a broken clamp.
Can I use clamp() for things other than font size?+
Yes. The generated clamp() works on any length property — padding, margin, gap, width — so you can fluidly scale spacing and layout, not just type. It is generated locally in your browser with no network request.