ToolNestFree CSS Clamp Calculator
Last updated: October 25, 2026
Quick answer: Fluid typography means one font size that grows smoothly as the screen grows — no breakpoints, no media-query jumps. This free CSS clamp calculator builds that size for you: enter your minimum size (small screens) and maximum size (large screens), plus the viewport widths those sizes apply at, and it returns a ready-to-paste clamp() rule in both px and rem, a live preview table showing the computed size at 320, 768, 1280, and 1920 px viewports, and the slope and intercept math behind the preferred value so you can check it by hand. Everything runs in your browser; no signup, no install.
Worked example: 16 px at a 320 px viewport growing to 32 px at 1280 px gives slope 1.6667vw and intercept 10.6667 px — clamp(16px, 10.6667px + 1.6667vw, 32px), or in rem: clamp(1rem, 0.6667rem + 1.6667vw, 2rem). The preview table below the result shows the size at each viewport so you can see the ramp before you ship it.
✓ Free forever · ✓ No signup · ✓ Tool inputs stay in your browser — never sent to our servers.
How to Use the CSS Clamp Calculator
- Enter your minimum font size — the size the text should be on the smallest screens you support, for example 16 px for body text or 24 px for a heading. This is the floor: below the minimum viewport, the browser uses exactly this size and never goes smaller.
- Enter your maximum font size — the size on large screens, for example 32 px for that same body text or 48 px for the heading. This is the ceiling: above the maximum viewport, the browser uses exactly this size and never grows past it.
- Set the viewport range: the minimum viewport width (where the minimum size applies, typically 320 px for a small phone) and the maximum viewport width (where the maximum size is reached, typically 1280 px). Use the preset for the common mobile-first (320–1280 px) or desktop (768–1920 px) ranges, or pick Custom and type your own.
- Choose the size unit: px if your design system works in pixels, rem if it works in rem (the calculator converts with your base font size, default 16 px). The result prints both forms either way, so a rem-based codebase and a px-based one both get a paste-ready line.
- Press Calculate clamp() and read three things: the clamp() code in px and rem, the slope and intercept behind the preferred value (for the worked example above, slope 1.6667vw, intercept 10.6667 px), and the preview table — the computed size at 320, 768, 1280, and 1920 px viewports, so you can confirm the ramp looks right at real screen sizes.
- Press Copy CSS to copy both code lines, then paste into your stylesheet — for example
h1 { font-size: clamp(1rem, 0.6667rem + 1.6667vw, 2rem); }. Test at a narrow and a wide viewport: the size should sit at the minimum below 320 px, grow smoothly between, and sit at the maximum above 1280 px.
Why Use Our CSS Clamp Calculator?
- px and rem output together — every result prints the clamp() rule in both units, so the code drops into a rem-based design system or a px-based one without a second converter. Most small clamp tools print one line only.
- Viewport-range presets — mobile-first (320–1280 px) and desktop (768–1920 px) ranges in one click, plus a custom range for anything else, instead of a single fixed range you cannot change.
- Live preview size table — the computed font size at 320, 768, 1280, and 1920 px viewports, so you see the fluid ramp at real screen sizes before shipping, not just one output line you have to trust.
- Slope and intercept shown — the preferred value is not a black box: the result shows the slope in vw and the intercept in px/rem, so you can verify the math, round it deliberately, or hand-tune the preferred value.
- Clamping explained, not just computed — the result states the floor and ceiling behavior explicitly: minimum size below the range, maximum above it, linear growth between. That is the part of clamp() people get wrong most often.
- Unit toggle with a base size you control — rem conversion uses your base font size (default 16 px), not a hardcoded assumption, so projects with a 10 px or 18 px root still convert correctly.
Common Use Cases
- Fluid body text for an article page: Body text at 16 px on phones growing to 19 px on desktop, over 320–1280 px: the calculator returns clamp(16px, 15px + 0.3125vw, 19px) — or clamp(1rem, 0.9375rem + 0.3125vw, 1.1875rem) — and the preview table confirms 16 px at 320 px, about 17.4 px at 768 px, and 19 px at 1280 px and above. One line replaces three media queries.
- A hero heading that scales without breakpoints: A hero heading at 32 px on a small phone growing to 64 px on a wide screen, over 320–1280 px: slope 3.3333vw, intercept 21.3333 px, giving clamp(32px, 21.3333px + 3.3333vw, 64px). The preview table shows the heading at about 46.9 px on a 768 px tablet — the size a designer would otherwise set by hand at a tablet breakpoint.
- Converting an existing px design to rem: A design handed over in px — headings 24 px to 40 px over 360–1440 px — needs to land in a rem-based codebase: switch the unit to rem with a 16 px base and the calculator prints clamp(1.5rem, 1.1667rem + 1.4815vw, 2.5rem) alongside the px form, so the handoff is one paste instead of a manual conversion pass.
- Checking a clamp() rule someone else wrote: A rule found in a codebase — clamp(1rem, 0.5rem + 2vw, 2.5rem) — looks plausible but nobody remembers what it does at real widths: enter its bounds (16 px to 40 px over the project's viewport range) and compare the preview table against the rule's behavior. If the sizes diverge, the preferred value was guessed; replace it with the computed one.
CSS Clamp Calculator vs Alternatives
- Single-output clamp tools (most of the small tools ranking today): They answer one question well — one clamp() line for one min/max pair — with a clean page. What they do not do is print the rem form, show the slope math, or preview the size at real viewports, so verifying the rule means doing the arithmetic yourself or resizing a browser window and squinting. This page prints px and rem, the slope and intercept, and a four-viewport preview in one place.
- CSS tutorial articles about fluid type: Articles from the personal blogs and CSS references ranking today explain the clamp() formula beautifully, and the worked example on this page follows the same math they teach. An article cannot do your arithmetic, though: for your own min/max pair and viewport range, you still need a calculator, and this page is that calculator next to the explanation.
- Design-tool type-scale plugins: Figma and design-tool plugins generate fluid scales visually and are the best tool when the scale is still being designed. They live inside a design file, though, and their output still needs converting to clamp() code for the stylesheet — this calculator is the step that turns the chosen sizes into paste-ready CSS, in px and rem.
- CSS flexbox, grid, shadow, and gradient generators (ToolNest's companion tools): Those tools cover layout and decoration: flexbox and grid for structure, box-shadow and gradients for surfaces. If your question is a layout or a decoration, use them; if your question is a font size that grows smoothly between two bounds, this clamp calculator is the right one, and it pairs naturally with a flexbox or grid layout that also needs fluid type.
Most clamp tools give you one output line and leave the verification to you. This page gives you the clamp() rule in px and rem, the slope and intercept behind it, a preview at four real viewport widths, and presets for the ranges people actually use — the whole fluid-size decision, checked before you paste it into your stylesheet.
Frequently Asked Questions
What is CSS clamp()?
clamp(MIN, VAL, MAX) is a CSS function that picks a middle value but keeps it inside a floor and a ceiling: it returns VAL, unless VAL is smaller than MIN (then it returns MIN) or larger than MAX (then it returns MAX). For fluid type, MIN is the smallest font size, MAX is the largest, and VAL is a fluid preferred value — usually a fixed size plus a viewport-relative size, like 0.6667rem + 1.6667vw — so the text grows with the screen but never escapes the range you set.
How do you calculate the preferred value for clamp()?
From two points: your minimum size at your minimum viewport, and your maximum size at your maximum viewport. Slope = (max size − min size) ÷ (max viewport − min viewport) × 100, in vw units. Intercept = min size − slope ÷ 100 × min viewport. Example: 16 px at 320 px to 32 px at 1280 px gives slope (32 − 16) ÷ (1280 − 320) × 100 = 1.6667vw, and intercept 16 − 1.6667 ÷ 100 × 320 = 10.6667 px. So the preferred value is 10.6667px + 1.6667vw, and the full rule is clamp(16px, 10.6667px + 1.6667vw, 32px). This calculator does that arithmetic and shows both numbers on the result.
How do you convert clamp() from px to rem?
Divide every px size by your root font size (usually 16 px) and leave the vw part alone — vw is already relative to the viewport, not to the font. So clamp(16px, 10.6667px + 1.6667vw, 32px) becomes clamp(1rem, 0.6667rem + 1.6667vw, 2rem), because 16 ÷ 16 = 1, 10.6667 ÷ 16 = 0.6667, and 32 ÷ 16 = 2. If your project sets a different root size, use that number instead: this calculator lets you change the base size for exactly this reason.
Which browsers support CSS clamp()?
All modern browsers since 2020: Chrome 79+, Edge 79+, Firefox 75+, Safari 13.1+, and Opera 66+. That covers effectively all current traffic, so no fallback is needed for most projects. If you must support Internet Explorer or very old Safari, add a fallback declaration above the clamp() line — for example font-size: 16px; followed by font-size: clamp(...) — so old browsers use the fixed size and modern ones override it with the fluid rule.
How do you build a fluid type scale with clamp()?
Pick a scale ratio (for example 1.25, the classic major-third ratio) and a min/max pair for each step: body text might run 16 px to 18 px, a subheading 20 px to 28 px, a heading 28 px to 48 px, all over the same viewport range (say 320 px to 1280 px). Run each pair through the calculator, keep the viewport range identical across steps so every size grows in step, and check the preview table for each: the ratio between steps should stay roughly constant at every viewport, which is what makes a scale feel coherent instead of random.
Should I use clamp() or min(), max(), or media queries?
Use clamp() when a size should grow smoothly between two bounds — the common fluid-type case — because one declaration replaces a stack of media queries. Use min() when you want a size that grows but never passes a ceiling (min(5vw, 48px) grows with the viewport up to 48 px), max() when you want a size that shrinks but never drops below a floor, and media queries when the change should be a step (a layout switch, a different size at a specific breakpoint) rather than a smooth ramp. They compose: a media query can swap the whole clamp() rule at a breakpoint if a section needs a different scale on very large screens.
What are the common mistakes with clamp()?
Four, in order of how often they appear: (1) a preferred value that never reaches the min or max inside the viewport range — usually because the slope was guessed instead of computed, so the text sits at one bound for most screens; (2) mixing units in the preferred value without a fixed part, so the ramp starts from zero and the text is unreadably small on phones; (3) forgetting that clamp() needs all three arguments in MIN, VAL, MAX order — swapped arguments silently clamp to the wrong bound; (4) using clamp() for line-height or spacing without checking the extremes, where a fluid value can produce a cramped or cavernous result at one end. The preview table on this calculator catches the first two before you ship.
Can clamp() be used for things other than font size?
Yes — clamp() works anywhere a length is accepted: padding, margin, gap, width, and border-radius all accept it, and fluid spacing (for example padding: clamp(1rem, 0.5rem + 2vw, 3rem)) is the same technique as fluid type applied to layout. The math is identical: a minimum, a maximum, and a preferred value from the same slope/intercept formula. Check the extremes the same way — a fluid gap that looks generous on desktop can collapse to nothing on a phone if the intercept is too small.