Category: Developer tools
CSS Clamp Generator
Fluid font sizes without media queries
Give a minimum and maximum size and the viewport widths they belong to, and get the clamp() declaration that scales smoothly between them, with a table of what it renders at common widths.
font-size: clamp(1.125rem, 0.7826rem + 1.5217vw, 2rem);
| Viewport width | Rendered size |
|---|---|
| 360px | 18px |
| 768px | 24.21px |
| 1024px | 28.1px |
| 1280px | 32px |
| 1600px | 32px |
Preview
Fluid type stays readable on a phone and in proportion on a desktop.
The declaration is built in the page. Nothing is uploaded.
Everything on this page is processed in your browser. Nothing is uploaded.
What this tool does
clamp() replaced the stack of media queries that used to step a heading through four sizes. The awkward part is the middle term, which has to be the straight line through your two points: a slope times the viewport plus an intercept, written as a vw value added to a rem value. That arithmetic is done for you here. Both bounds stay in rem so a visitor who has enlarged their default text still gets larger type, and the table shows the size a browser would actually render at 360, 768, 1024, 1280 and 1600 pixels, so you can see the curve rather than trust it. The same value works for padding, gaps and margins, not only for type.
How to use it
- Enter the smallest size and the viewport width where it should apply.
- Enter the largest size and the viewport width where it should stop growing.
- Copy the clamp() declaration and check the preview table.
Privacy
This tool runs entirely in your browser. Your input is never uploaded, stored or shared — closing the tab removes it.
Frequently asked questions
- Why are the bounds in rem rather than px?
- A size expressed purely in viewport units ignores the browser text-size setting, which is an accessibility failure. Bounds in rem scale with the visitor own default, so the type stays adjustable.
- Can I use it for spacing as well?
- Yes. The value is just a length, so it works for padding, margin, gap, width and anything else that takes one.
- Is anything sent to a server?
- No. The declaration is calculated in the page from the numbers you type, which is why it updates instantly.