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 |
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 |
People also ask
What does the CSS clamp() function do?
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.
Why use vw units inside clamp() instead of just percentages?
vw is relative to the viewport width regardless of the element's parent container, giving predictable scaling tied directly to screen size, which is what fluid typography needs.
Can I use clamp() for spacing, not just font-size?
Yes, clamp() works for any CSS length property including padding, margin, width, and gap; the calculator's slope and intercept math applies identically.
What happens below my minimum screen width?
The clamp() value freezes at the minimum bound; the font will not shrink further even on very narrow screens, preventing illegibly small text.
How precise should the vw/rem decimals be?
Four decimal places is generally sufficient for pixel-accurate rendering; browsers round sub-pixel values anyway, so extra precision rarely changes the visual result.
Does clamp() replace media queries entirely?
For simple linear scaling, yes, but complex layout changes like reflowing a grid still need media queries; clamp() is best suited to continuous properties like size and spacing.
Why is my clamp() output showing the max value on desktop-sized screens?
If your max viewport width is set too low, screens larger than that will always compute a preferred value above the max and get clamped, which is expected behavior.
Is clamp() supported in all browsers?
Yes, all major browsers (Chrome, Firefox, Safari, Edge) have supported clamp() since 2020, so it's safe to use in production without fallbacks in most projects.
How do I convert rem back to px?
Multiply the rem value by your root font size, typically 16px unless the user or site has changed it; this calculator's table shows both units directly.
What is a sensible min/max width range for fluid type?
375px (small mobile) to 1440px (standard desktop) covers the vast majority of real-world viewports and is the most commonly used range in production design systems.
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.
Next useful tool
Calculate total GPU VRAM needed instantly. Free online LLM VRAM calculator with live formulas, unit conversion and a step-by-step breakdown.
Calculate net creator payout instantly. Free online TikTok live gift to cash calculator with live formulas, unit conversion and a step-by-step breakdown.
Calculate total storage needed instantly. Free online CCTV storage calculator with live formulas, unit conversion and a step-by-step breakdown.
Calculate required preamp gain instantly. Free online podcast mic gain calculator with live formulas, unit conversion and a step-by-step breakdown.
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.
Convert a word count into silent reading time, presentation speaking time and audiobook narration length, with WPM control and a speech-length reference table.