CSS

Fluid Type Calculator

Generate a CSS clamp() font size that scales smoothly between a minimum and maximum viewport width — no media queries needed.

Range

Min viewport width

Max viewport width

Min font size

Max font size

Root font size (for rem) ?

Output unit

Generated CSS

font-size: clamp(...);

Live preview

The quick brown fox jumps over the lazy dog

Size at min width

—

Size at max width

—

How fluid typography works

A fluid type scale ties font size directly to viewport width using a linear function, so text grows and shrinks smoothly as the window resizes instead of jumping at fixed breakpoints. CSS's clamp() function makes this a one-line declaration: a minimum size, a preferred size expressed in viewport-width units, and a maximum size.

The math behind it

slope = (maxSize − minSize) / (maxWidth − minWidth) preferred = minSize − minWidth × slope + (slope × 100)vw font-size: clamp(minSize, preferred, maxSize)

The slope determines how many pixels the font grows per pixel of viewport width; multiplying it by 100 converts it into a vw-based coefficient since 1vw equals 1% of the viewport width.

Also useful: Font System Visualizer and CSS Gradient Generator.

Frequently asked questions

clamp(min, preferred, max) picks the preferred value (usually a viewport-relative unit like vw) but clamps it so it never goes below min or above max — giving you fluid scaling with hard floor and ceiling values.

Media queries jump between fixed sizes at specific widths, which can look abrupt. A clamp()-based fluid value scales continuously with the viewport, so text sizes stay proportional at every width in between, not just at your chosen breakpoints.

clamp() has been supported in all major browsers since 2020, so it's safe to use today without a fallback for the vast majority of visitors.