Responsive type generator

Enter your root font size, the viewport range you want the typography to scale across, and the mobile and desktop font sizes for body text and headings. This generates the clamp values and a ready-to-paste stylesheet in plain CSS.

Input values

The root font size is prefilled from the browser’s computed HTML font size.

Root font size (px)

Minimum mobile width (px)

Maximum desktop width (px)

Element

Mobile size (px)

Desktop size (px)

Please make sure the root font size is above 0, the desktop width is greater than the mobile width, and all font sizes are positive numbers.

Generated clamp values

These values are calculated from your chosen mobile and desktop sizes.

Ready-to-paste stylesheet

This outputs CSS variables plus body and heading selectors.