Overview
A calculator for fluid font sizes with clamp(). Enter minimum and maximum viewport widths and the font sizes you want at those widths, and the tool solves the linear equation for you, emitting a single clamp(min, vw + rem, max) declaration. A viewport simulator slider shows the rendered pixel size at any screen width between 300 and 1600.
How It Works
Set the minimum and maximum viewport widths, by default 360 and 1280, and the font sizes you want at each, by default 16 and 32 pixels. The tool computes the scale factor and intercept, then displays the clamp() formula in rem units. Drag the viewport simulator slider to watch a sample headline resize between the bounds, with the exact rendered pixel size shown beside the slider. Copy the formula and apply it as a font-size value.
Step-by-Step Usage Guide
- Enter the viewport range where the size should scale.
- Enter the minimum and maximum font sizes.
- Check the simulator to preview the rendered size at any width.
- Copy the clamp() font-size declaration.
Technical Specifications & Standards
The algebra treats font size as a line over viewport width: the slope is the size difference divided by the viewport range, and the intercept is derived so the line passes exactly through the minimum point. The preferred value is then expressed as slope times 100 in vw units plus the intercept converted to rem by dividing by 16. That rem component is what makes the output accessible: a pure vw font size scales with the browser window but ignores user font-size preferences and zoom, which harms accessibility, whereas clamp with a rem floor keeps text user-scalable. WCAG 1.4.4 requires text to survive 200 percent zoom, and viewport units alone fail that. The tool hardcodes a 16 pixel root font size for the conversion, so if your project resets the root to another value, rescale the rem figures yourself. clamp() support is universal in current browsers.
Targeted Use Cases
- Hero headlines that grow smoothly from phone to desktop without media queries.
- Body text that respects accessibility floors while scaling on large screens.
- Replacing stacks of breakpoint font-size overrides with one declaration.
- Design systems that document one fluid token per text role.
Notes & Gotchas
- Keep the rem component in the preferred value so user font-size preferences still apply.
- Match the minimum viewport to your smallest supported width so the floor engages exactly there.
- If your site changes the root font size, adjust the emitted rem numbers accordingly.
- Apply fluid sizing to display text first; body text often reads better with a modest range.
Frequently Asked Questions
How is the clamp() formula derived?
The tool fits a straight line between your two viewport-size points. The slope becomes the vw coefficient, the intercept becomes the rem component after dividing by 16, and the two sizes become the clamp bounds.
Why is there a rem part instead of just vw?
A pure vw size ignores the user's browser font-size setting and does not scale under text-only zoom. Adding a rem term keeps the declaration anchored to user preferences, which accessibility guidelines require.
What root font size does the conversion assume?
16 pixels, the browser default. The tool divides pixel intercepts by 16 to get rem. If your stylesheet sets html font-size to something else, rescale the rem values.
What does the simulator show?
It clamps the slider's viewport width to your range, applies the same linear interpolation, and renders sample text at the resulting pixel size, with the exact number displayed next to the slider.