Responsive type scale.

A modular type scale that fluid-resizes between viewport widths using CSS clamp(). Pick a base size, pick a scale ratio, get a copy-paste ladder for h1h6 + body. Open on GitHub →

H1 · level 6

The quick brown fox jumps over the lazy dog

H2 · level 5

The quick brown fox jumps over the lazy dog

H3 · level 4

The quick brown fox jumps over the lazy dog

H4 · level 3

The quick brown fox jumps over the lazy dog

H5 · level 2

The quick brown fox jumps over the lazy dog

H6 · level 1

The quick brown fox jumps over the lazy dog

Body · level 0

A modular type scale tunes the rhythm of a page. The base size is what you read most — usually 16–18px on body copy. Each headline level multiplies the base by a fixed ratio: small ratios feel quiet, large ones feel theatrical. Fluid clamp() lets a single CSS rule cover phone-to-desktop without media queries.

CSS custom properties + utility classes


        

Tailwind config