px, rem and clamp() calculator
Convert pixels to rem, and generate fluid clamp() values and type scales that scale smoothly between two viewport widths.
Viewport range: uses the min and max viewport from the Fluid tab (320 to 1280 by default).
Sizes that scale without breakpoints
Responsive typography used to mean a stack of media queries, each jumping the font size at a breakpoint. Fluid type replaces that with a single declaration: font-size: clamp(1rem, 0.667rem + 1.667vw, 2rem) grows from 16px on a 320px-wide phone to 32px on a 1280px desktop, and holds at each end. The same trick works for spacing, margins, gaps and heading sizes.
The maths is simple but fiddly: you need a linear function of the viewport width that passes through two points, expressed as a rem constant plus a vw coefficient. This calculator does it for you. Enter the smallest and largest size and the viewport widths where they should apply, and copy the clamp() value. The preview table shows the computed pixel size at several viewport widths so you can sanity-check it.
Three tools in one
- px โ rem converts between pixels and rem using your root font size.
- Fluid clamp() builds the formula for any property: font-size, padding, gap or margin.
- Type scale generates a whole modular scale (for example minor third at 320px growing to major third at 1280px), with a clamp() for every step.
Use rem for text and for anything that should respect the user's font size setting, and px for hairlines and borders. Test with the browser's zoom and with a larger default font size. All calculations happen in your browser.
Frequently asked questions
What is clamp() and why use it for font sizes?
clamp(min, preferred, max) picks the preferred value but never goes below the minimum or above the maximum. With a preferred value that mixes rem and vw, text scales smoothly with the viewport between two sizes, without media queries.
Why include a rem part, not just vw?
A size in vw alone ignores the user's browser font size setting, which hurts accessibility. Adding a rem term keeps the size responsive to the user's preference (and lets WCAG zoom work).
How is the formula calculated?
Slope = (max - min) / (max viewport - min viewport). The vw coefficient is the slope times 100, and the rem term is the intercept: min size minus slope times min viewport, divided by the root font size.
What root font size should I use?
Browsers default to 16px, and that is what rem is relative to. Only change it if your CSS sets html { font-size } to something else.