CSS Clamp() Fluid Typography Calculator
Set the smallest and largest size you want and the viewport widths where each should apply; you get a ready-to-paste clamp() and can drag a slider to see the size at any screen width.
Overview
Fluid typography lets text grow gradually with the screen instead of jumping between fixed sizes at breakpoints. CSS clamp(min, preferred, max) does this in one line: the preferred value mixes a fixed amount with a viewport-relative vw amount, and the min and max stop it from getting too small on phones or too large on wide monitors.
Working out the preferred value by hand means solving a straight-line equation between two points, which is easy to get wrong. This calculator does that for you and outputs the bounds in rem, so the result still respects a visitor's browser font-size setting, an accessibility requirement that pure vw values break.
Examples & Sample Data
16px on phones to 32px on desktops
Min 16px, max 32px, viewport 375px to 1440px, root 16px
font-size: clamp(1rem, 0.6479rem + 1.5023vw, 2rem);
Values entered in rem
Min 1rem, max 1.5rem, viewport 320px to 1280px
font-size: clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem);
How It Works
- Enter the minimum and maximum size, and choose whether they're in px or rem.
- Enter the viewport widths where the size should reach its minimum and maximum. Below and above those widths, the size stays fixed.
- Copy the clamp() value, and drag the preview slider to check the size at any width.
Common Use Cases
A fluid type scale
Generate a clamp() for each heading level so the whole hierarchy scales together, with no breakpoint-specific font sizes.
Fluid spacing
The same formula works for padding, margins, and gaps: section padding that's compact on phones and generous on wide screens.
Tips & Best Practices
- Keep the maximum size no more than about 2.5 times the minimum. Larger ratios can stop text from scaling properly when a user zooms, which matters for WCAG's resize-text requirement.
- Use the same minimum and maximum viewport widths for every value in your design system so everything scales in step.
- If the maximum size is smaller than the minimum, the value shrinks as the screen gets wider. That's occasionally useful for spacing on very wide layouts.
Frequently Asked Questions
No. Everything is calculated in your browser.
It's a straight line through two points: (minimum viewport, minimum size) and (maximum viewport, maximum size). The slope becomes the vw part (slope × 100 vw) and the line's value at a 0px viewport becomes the rem part. clamp() then limits the result to your minimum and maximum.
rem values scale with the browser's default font size, so people who increase their text size still get bigger text. The rem part of the preferred value keeps that working even as the vw part changes with the screen.
All current browsers: Chrome and Edge 79+, Firefox 75+, and Safari 13.1+.
Related Tools
Explore more high-performance utilities.