Production Blog

All

Typography Scale

Changes apply to this page instantly and are remembered in your browser only. Nothing is saved on the site.

Bigger ratio = more contrast between headings (like typescale.com).

The ratio used at 375px wide. The scale eases from this to the main ratio by 1260px, so type and spacing tighten on phones without media queries.

Body text size. The whole scale is built from this.

Snaps every text step to even pixels (2px).

Sets Small / X-Small / XX-Small to 0.95rem / 0.8rem / 0.75rem instead of dividing by the ratio, which can make them too small to read.

Resulting sizes at this viewport
Display / H1 –
Huge / H2 –
Extra Large / H3 –
Large / H4 –
Medium / Body –
Small / H6 –
X-Small –
XX-Small –