Fluid typography calculator
Generates a CSS clamp() that moves a font size linearly between two viewport widths and holds still outside them. The slope is the size difference divided by the viewport difference; the intercept is the constant that puts the line through your minimum at the small width.
How to use the fluid typography calculator
The middle term of the clamp is a straight line: slope × 100vw plus an intercept, where the slope is (maxSize − minSize) ÷ (maxVw − minVw) and the intercept is whatever constant makes that line pass through your minimum size exactly at the small viewport. Sixteen pixels at 320 px growing to 24 at 1280 px is a slope of 0.833vw and an intercept of 0.833rem. Everything else printed here is that one line written a different way.
The units are the part with consequences. A clamp written entirely in px, or a preferred value made of nothing but vw, cannot be scaled by the reader: Safari in particular refuses to let a viewport-unit-only size respond to zoom, and text that will not grow to 200 percent fails WCAG 1.4.4 outright. Keeping the intercept in rem means the browser’s own font-size setting still multiplies through, so a reader who set their default to 20 px gets larger text at every viewport width and keeps the fluid behaviour.
Slope is a design decision more than a technical one. A steep line — a wide size range across a narrow viewport range — makes headings visibly resize while a window is dragged, and it makes two nearby screen widths look like different designs. A shallow line across a wide range reads as deliberate. Past roughly 1vw of slope, the type is changing faster than the layout around it, and the page starts to feel unstable rather than responsive.
What people use it for
- Replacing a ladder of font-size media queries with one rule
- Setting heading sizes that hold up between a phone and a wide monitor
- Fixing type that ignores a reader’s enlarged browser font size
- Building a type scale for a design system in rem
- Working out the slope two mockups at different widths actually imply
Questions
Takes a minimum, a preferred value and a maximum, and uses the preferred value only while it falls between the two.
A px-only clamp ignores the browser font-size setting, and a vw-only preferred value cannot be zoomed in Safari. Either one fails WCAG 1.4.4, which requires text to scale to 200 percent.
The size difference divided by the viewport difference, in the same units. 16 px to 24 px across 320 px to 1280 px is 8 ÷ 960, or 0.833vw.
Rarely. One clamp replaces a ladder of breakpoints and scales smoothly between them instead of jumping at each one.
320 to 1280 covers phone to laptop. A wider range flattens the slope and makes the effect subtler.
Yes, in every browser since 2020.