Skip to main content

Search rules

Search all UI Guides rules by name, category, or source

contentRauno

Fluid Typography with clamp()

SHOULD

SHOULD: Scale type fluidly with `clamp(min, preferred-vw, max)` instead of stacking font-size breakpoints.

Use CSS clamp() for fluid font sizes that scale between viewport sizes without breakpoints

h1 { font-size: clamp(48px, 5vw, 72px); }

Bad

Good

Why it matters

Fixed font sizes require multiple breakpoints to look good across devices. CSS clamp() provides a minimum, preferred, and maximum value that scales smoothly with the viewport, creating responsive typography without media queries.

Built by Gleb Stroganov, design engineer at Evil Martians.

The rules come from other people's skills and guidelines — Vercel, Rauno Freiberg, @Ibelick, impeccable, Emil Kowalski, Tailwind, RAMS — each one credited on the Sources page. The work here is extraction and wiring: every rule is pulled into one corpus, given a good and a bad example you can operate, a MUST/SHOULD/NEVER rule an agent can paste, and a link back to where it came from.