Utility · CSS unit tool
Fluid typography clamp calculator
Give the generator a minimum and maximum font size plus the viewport range they apply over, and it derives the slope (in vw) and intercept (in rem/px) for a single `clamp()` that scales type smoothly between your breakpoints.
font-size: clamp(1.1250rem, 0.7624rem + 1.5470vw, 2.0000rem);
/* px-based */ font-size: clamp(18.00px, 12.20px + 1.5470vw, 32.00px);
Keyboard tip: press Tab or Shift+Tab to switch fields.
The interpolation math
Fluid type is linear interpolation between two points: (minViewport, minFont) and (maxViewport, maxFont). The slope is (maxFont − minFont) ÷ (maxViewport − minViewport), and the intercept is minFont − slope × minViewport.
Multiply the slope by 100 to express it as vw, then assemble `clamp(minFont, interceptRem + slopeVw, maxFont)`. The generator outputs both rem-based and px-based variants.
Keep it accessible
Anchor your minimum to a readable size at 320px—roughly 16px for body copy—so small screens never drop below comfortable reading sizes.
Prefer rem-based bounds so the type still responds to a user's default font-size, and test with OS-level font scaling, not just browser zoom.
Pair with line-height
Fluid font sizes need fluid-friendly leading. Use a unitless line-height so it scales with the computed font-size at every viewport.
After generating the clamp, jump to the line-height calculator to lock in vertical rhythm across the range.
Copy-ready examples
body {
font-size: clamp(1rem, 0.964rem + 0.179vw, 1.125rem);
}Frequently asked questions
- Should the clamp bounds use rem?
- Yes—rem-based minimums align with the user's root settings, so the generator outputs rem plus a px variant for reference.
- How do I avoid text that's too small on phones?
- Set the minimum to your smallest acceptable reading size (often 16px) at your smallest target viewport, and verify at 320px.
- Is fluid typography clamp calculator free to use?
- Yes. UnitCraft calculators are free and run entirely in your browser.
- Does UnitCraft send my input values to a server?
- No. Calculator inputs are processed locally in the browser tab.
- Can I copy the generated CSS output?
- Yes. Each tool provides copy-ready snippets so you can paste values directly into code.