CSS Clamp() Fluid Typography Calculator

How it works

A fluid size is just a straight line between two points — your min size at the min viewport width, and your max size at the max viewport width — expressed with CSS's clamp(MIN, PREFERRED, MAX), where PREFERRED is a rem + vw expression that traces that exact line. Below the min viewport width the font-size holds at the min size; above the max viewport width it holds at the max size; in between, it scales smoothly with the viewport.

Everything is computed in rem rather than px, so the result still respects a visitor's own browser font-size setting instead of overriding it — the root font size field above only affects the rem math, exactly like a real browser's default (or user-overridden) root size would.

The preview text's font-size is set to the generated clamp() value directly, so it reflects the true rendered size at your current browser width — resize the browser window itself (not just this page) to see it move between the min and max sizes.