Dev Tools · CSS

Fluid Type Scale_

Generate responsive clamp() font sizes that scale smoothly between two viewport widths — no breakpoints. Set your range, base sizes, and ratios; copy the CSS. The preview below is live: resize the window to watch it flow.

Min viewport

Max viewport

Base size @ min

Base size @ max

Scale ratio @ min

Scale ratio @ max

Steps up (larger)

Steps down (smaller)

−

Variable prefix

Root size (for rem)

Common ratios: 1.2 minor third · 1.25 major third · 1.333 perfect fourth · 1.5 perfect fifth · 1.618 golden.

Viewport: —

How it works

A fluid size interpolates linearly with the viewport between a minimum and a maximum, then clamps at each end. For every step the calculator finds the size at the min viewport and at the max viewport, then expresses the line through those two points as clamp(min, intercept + slope·100vw, max).

slope = (size@max − size@min) ÷ (maxVw − minVw) · preferred = (slope × 100)vw + interceptRem

Each step's two endpoint sizes come from the type ratio: size = base × ratio^step, computed separately at the min and max ends so the scale can tighten on small screens and open up on large ones. Output is in rem (relative to your root size) so it respects the user's browser font setting.

Tip: paste the variables into :root, then use them like font-size: var(--step-1). The middle term needs no calc() — clamp() is already a math context.

Built with AI assistance. The clamp values are computed from standard fluid-typography math; preview rendering uses the actual generated CSS so what you see is what you'll ship.