How to use the Clamp Calculator
- Enter the min and max size (in px or rem) and the viewport widths where scaling should start and stop.
- Copy the
clamp()value — choose rem output (recommended for accessibility) or px. - Drag the viewport slider to see the exact size at any screen width, and read the step-by-step maths below.
- Generate a complete fluid type scale or space scale and copy it as CSS custom properties.
What is CSS clamp()?
clamp(MIN, PREFERRED, MAX) returns the preferred value, but never less than MIN or more than MAX. With a preferred value that grows with the viewport — such as 0.8239rem + 0.7512vw — you get fluid font sizes and spacing that scale smoothly between a mobile and a desktop size, without a stack of media queries. It works in every modern browser.
The formula, step by step
Fluid sizing is a straight line between two points: (min viewport, min size) and (max viewport, max size). For 16px at 375px and 24px at 1440px:
- Slope = (24 − 16) ÷ (1440 − 375) = 0.007512 — the size grows 0.0075px per pixel of viewport.
- vw part = slope × 100 =
0.7512vw, because 1vw is 1% of the viewport width. - Intercept = 16 − 0.007512 × 375 = 13.183px =
0.8239remat a 16px root. - Result:
clamp(1rem, 0.8239rem + 0.7512vw, 1.5rem). At a 768px viewport that’s 13.183 + 0.007512 × 768 ≈ 18.95px.
Why mix rem and vw?
A size made only of vw ignores browser zoom and the user’s default font size, which can fail WCAG 1.4.4 (Resize text). Keeping a rem intercept means the value still responds when someone zooms or sets a larger default font. As a rule of thumb, if the maximum is no more than 2.5× the minimum, text can still reach 200% zoom — the calculator flags ranges that exceed this.
Fluid type and space scales
Instead of calculating every heading separately, define a modular scale: each step multiplies the base by a ratio. A smaller ratio on mobile (e.g. 1.2, minor third) and a larger one on desktop (e.g. 1.25, major third) keeps headings dramatic on big screens without overwhelming phones — the approach popularised by Utopia. The space scale multiplies the same base (0.25×, 0.5×, 1×, 1.5×, 2×…) so paddings and gaps grow in step with the text.
How to use clamp() in Webflow
- Directly in the Style panel: Webflow accepts CSS math functions in size fields. Click into Font size, Padding or Gap, paste the
clamp(…)value and press Enter. - As variables: create a Size variable for each step (e.g. “Step 0”, “Space M”) in the Variables panel, paste the clamp() value, then apply the variable to fonts and gaps across classes — change it once, update everywhere.
- Via custom code: paste the generated
:root { … }block inside a<style>tag in Site settings → Custom code → Head code, then typevar(--step-0)into any size field. - Fluid gaps such as
clamp(2rem, …, 4rem)keep sections from feeling oversized on tablets — use the Gap quick-start chip.
Converting design specs first? The PX to REM Converter turns pixel values into rem.
Tools that pair well with the Clamp Calculator
- Box Shadow Generator — Stack multiple shadow layers, tweak offsets, blur, spread and opacity on a live card, then copy the box-shadow or text-shadow CSS.
- CSS Gradient Generator — Design a gradient visually — drag colour stops, change the angle or type, start from a preset — and copy production-ready CSS with a solid fallback colour.
- Unit Converter — Convert between metric, imperial and technical units in ten categories — with a two-way converter and a table of every unit at once.
- Aspect Ratio Calculator — Resize images and videos without distortion: fill in a ratio and one side to get the other, or enter a size to find its ratio — with ready-to-paste CSS.
Frequently asked questions
What is a good min and max viewport for fluid typography?
Should the clamp() output use rem or px?
Can clamp() make a value shrink on bigger screens?
clamp(), as CSS requires.Does clamp() work in Webflow?
var().Why does my fluid font size not change when I resize the browser?
vw includes the vertical scrollbar width on desktop.