Display H1 (32px → 72px)
- Input
- min: 32px @ 320px viewport, max: 72px @ 1280px viewport
- Expected output
- font-size: clamp(2rem, 2.5vw + 1.25rem, 4.5rem);
Responsive main heading. Grows smoothly from mobile to desktop.
fluid typography CSS clamp
Fluid typography with CSS clamp(): scale fonts without media queries
Fluid typography with `clamp()` is the technique of continuously scaling fonts between two viewport sizes without using media queries. The function accepts three parameters: minimum, preferred value (viewport expression) and maximum. The preferred value is calculated as the line passing through the two extreme points in the vw × px space.
The slope-intercept formula explained
- The calculation starts by converting min and max to rem (dividing by 16 if the base is 16px). The slope is `(maxRem - minRem) / (maxVp - minVp) * 100` in vw. The intercept is `minRem - slope_vw * minVp / 100` in rem. The final formula: `clamp(minRem, slopeVw + interceptRem, maxRem)`. The slope is positive if max > min (size increases with viewport).
- The reason to use `vw + rem` instead of pure `vw` is that pure `vw` never stops growing — on very large screens, fonts become enormous. `clamp()` solves this: you define exactly where the font starts and stops growing.
Ready-made fluid typography presets
Body text (16px → 18px)
- Input
- min: 16px @ 375px, max: 18px @ 1440px
- Expected output
- font-size: clamp(1rem, 0.19vw + 0.93rem, 1.125rem);
Subtle but perceptible improvement in reading comfort on large screens.
Full tool FAQ
It's a CSS function that constrains a value between a minimum and a maximum. In the middle it accepts any CSS expression — typically `viewport-width + rem-constant` for fluid typography.
Frequently asked questions
Does clamp work for spacing too?
Yes, and it is very useful. Padding, margin, gap and width accept clamp. Fluid spacing eliminates the need for different variables per breakpoint — a single token scales between mobile and desktop.
Do I need `html { font-size: 62.5%; }` to use rem?
No. That technique (10px base) is an old workaround. Use the "rem base" field in the calculator to inform what your project's actual base is. With a 16px base, 1rem = 16px.