CSS Clamp Calculator: Instant Fluid Typography & Responsive Layouts
The CSS clamp() function lets a value scale fluidly between a minimum and maximum, using a viewport-relative unit as the middle argument, so you avoid dozens of media-query breakpoints. This calculator does the algebra for you and outputs a ready-to-paste clamp() string for font-size, padding or any length property.
Copy: font-size: clamp(1.0000rem, 0.2958rem + 3.0047vw, 3.0000rem); scales smoothly from 16.0px at 375px viewport to 48.0px at 1,440px viewport.
| Viewport width | Font size (px) | Font size (rem) |
|---|---|---|
| 375px (min) | 16.00 | 1.000 |
| 908px (mid) | 32.00 | 2.000 |
| 1,440px (max) | 48.00 | 3.000 |
- 1.
slope = (maxFont − minFont) / (maxWidth − minWidth) - 2.
intercept = −minWidth × slope + minFont - 3.
clamp(minRem, interceptRem + slope×100vw, maxRem)
How to Use This Calculator
1. Enter your details
Use the labelled fields and units that match your situation.
2. Calculate instantly
The result, visual comparison, and working update as values change.
3. Review your result
Check assumptions, then copy, print, or share the calculation.
Formula & step-by-step maths
- slope
- Rate of font growth per pixel of viewport width
- intercept
- Base font value extrapolated to a 0px viewport
- minRem/maxRem
- Min/max font size converted to rem units
How the fluid slope is derived
Fluid typography treats font size as a straight line between two points: (minWidth, minFont) and (maxWidth, maxFont). The slope of that line, expressed as a percentage of viewport width, becomes the vw component; the y-intercept becomes the rem offset. Below minWidth and above maxWidth, clamp() locks the value to the min or max bound instead of extrapolating.
Why rem instead of px in the output
Using rem units for the bounds respects a user's browser font-size preference for accessibility, while the vw component still responds to viewport changes. Mixing rem and vw in one calc() expression, wrapped in clamp(), is the standard modern approach recommended by most CSS specifications and browser vendors.
Common use beyond typography
The same clamp() math works for padding, margin, gap, and even border-radius — anywhere you want smooth, breakpoint-free scaling. Just plug your target min/max pixel values and viewport range into this tool regardless of which CSS property you're styling.
Browser support and fallbacks
clamp() has been supported in all major browsers since 2020, so a fallback is rarely necessary today. If you must support very old browsers, pair the clamp() rule with a plain px fallback declared immediately before it, since CSS applies the last valid rule it understands.
Typical fluid type scale references
| Use case | Min font (px) | Max font (px) | Typical viewport range |
|---|---|---|---|
| Body text | 16 | 18 | 375px – 1440px |
| Small caption | 12 | 14 | 375px – 1440px |
| H3 heading | 20 | 28 | 375px – 1440px |
| H2 heading | 28 | 40 | 375px – 1440px |
| H1 heading | 32 | 56 | 375px – 1440px |
| Hero display | 40 | 96 | 375px – 1920px |
Frequently Asked Questions
Three worked examples
Same engine, three different starting points — useful if you want to see how sensitive the answer is before you type your own numbers in.
Example 1: min screen width 292.5 px
On the lower / more conservative end. Copy: font-size: clamp(1.0000rem, 0.4902rem + 2.7887vw, 3.0000rem); scales smoothly from 16.0px at 293px viewport to 48.0px at 1,440px viewport.
Example 2: min screen width 375 px
A typical middle-of-the-road setup. Copy: font-size: clamp(1.0000rem, 0.2958rem + 3.0047vw, 3.0000rem); scales smoothly from 16.0px at 375px viewport to 48.0px at 1,440px viewport.
Example 3: min screen width 487.5 px
On the higher / more demanding end. Copy: font-size: clamp(1.0000rem, -0.0236rem + 3.3596vw, 3.0000rem); scales smoothly from 16.0px at 488px viewport to 48.0px at 1,440px viewport.
Quick answers about the CSS Clamp Calculator
What exactly does the CSS Clamp Calculator work out?
The CSS clamp() function lets a value scale fluidly between a minimum and maximum, using a viewport-relative unit as the middle argument, so you avoid dozens of media-query breakpoints. You enter min screen width, max screen width, min font size and max font size (plus 1 more optional details) and the result panel updates straight away, so you can compare two or three versions of the same question in a few seconds.
What do I need before I start?
Only 5 fields: min screen width, max screen width, min font size, max font size and root font size. Nothing else is needed and nothing is stored.
How the fluid slope is derived?
Fluid typography treats font size as a straight line between two points: (minWidth, minFont) and (maxWidth, maxFont). The same maths runs inside this page, so hand-checking the result on paper gives you the identical figure.
Why do two calculators give me different answers for cSS Clamp?
Using rem units for the bounds respects a user's browser font-size preference for accessibility, while the vw component still responds to viewport changes. Different sites pick different assumptions, so always check which method a calculator states before you trust the gap between two numbers.
What does the "Typical fluid type scale references" table on this page tell me?
It is the reference range this tool works against — 6 rows from "Body text" (16) up to "Hero display" (40). Use it to sanity-check whether the number you just calculated sits where you expected it to.
Do I have to press a button or reload the page to see the result?
No. CSS Clamp Calculator runs completely inside your browser, so the moment you change a value the cards recalculate — there is no submit step, no page reload and no waiting for a server round trip. That also means it keeps working on a weak or intermittent mobile connection.
Is it free, and do you keep what I type?
It is free with no sign-up, no app install and no usage limit. Nothing you enter into CSS Clamp Calculator leaves your device — the calculation is JavaScript running locally, so there is no upload of your figures to DrHint or anyone else.
Can I use it on a phone?
Yes — the layout stacks to a single column on small screens and the number fields open the numeric keypad on both Android and iOS. Many people bookmark this page or add it to their home screen and re-open it whenever the question comes up.
Anything to be careful about with the result?
clamp(min, preferred, max) picks the preferred value unless it falls outside the min/max bounds, in which case it locks to whichever bound was exceeded, giving smooth fluid scaling with hard limits. Treat the output as a well-grounded estimate for planning, not as a professional, legal or medical decision on its own.
Related Calculators & Tools
LLM GPU VRAM Calculator
Calculate total GPU VRAM needed instantly. Free online LLM VRAM calculator with live formulas, unit conversion and a step-by-step breakdown.
TikTok Live Gift to USD / Local Payout Calculator
Calculate net creator payout instantly. Free online TikTok live gift to cash calculator with live formulas, unit conversion and a step-by-step breakdown.
CCTV IP Camera Storage Calculator
Calculate total storage needed instantly. Free online CCTV storage calculator with live formulas, unit conversion and a step-by-step breakdown.
Podcast Mic Gain & Distance Calculator
Calculate required preamp gain instantly. Free online podcast mic gain calculator with live formulas, unit conversion and a step-by-step breakdown.
Aspect Ratio & Pixel Crop
Convert any width or height into the matching pixel dimensions for 16:9, 9:16, 1:1, 4:5 and 21:9, with safe-zone guidance for Reels, Shorts and TikTok.
Reading & Speech Duration
Convert a word count into silent reading time, presentation speaking time and audiobook narration length, with WPM control and a speech-length reference table.