Type Scale

Your page title and body text are 20px and 16px. Technically different. Visually identical. Readers have to compare every element to figure out what ranks above what.

The Principle

A type scaleA type scale is a set of font sizes generated by multiplying a base size by a consistent ratio at each step — for example 1rem, 1.333rem, 1.777rem using a perfect fourth (1.333). defines the relationship between font sizes across an interface. With visual hierarchyThe visual ranking of elements (heading, subheading, body) created through size, weight, and spacing., readers distinguish headings, body text, and captions at a glance. The goal isn't variety. It's clarity.

The Rule I Follow

I start at 16px for body text and build with a 1.333 modular scaleA type scale built by multiplying a base size by the same ratio at each step, e.g. 16px × 1.333 per heading level.. The largest heading should be at least 2× the body size. Below that, hierarchy requires reading instead of registering at a glance.

Try It Yourself

Drag the heading size and watch the ratio beside the slider. At 2.0 or higher, the title reads as a heading before you parse the words.

The Mistake I'd Avoid

Creating a new font size every time something needs emphasis. Too many sizes weaken the hierarchy instead of strengthening it.

Remember This

Hierarchy comes from consistent relationships, not bigger text.

:root {
--base-size: 16px; /* change this for a different body size */
--ratio: 1.333; /* change this for a different scale step */

--caption: calc(var(--base-size) / var(--ratio));
--body: var(--base-size);
--subheading: calc(var(--body) * var(--ratio));
--section: calc(var(--subheading) * var(--ratio));
--page: calc(var(--section) * var(--ratio));
--hero: calc(var(--page) * var(--ratio));
--display: calc(var(--hero) * var(--ratio));
}

.caption {
font-size: var(--caption);
}

body {
font-size: var(--body);
}

h3 {
font-size: var(--subheading);
}

h2 {
font-size: var(--section);
}

h1 {
font-size: var(--page);
}

.hero {
font-size: var(--hero);
}

.display {
font-size: var(--display);
}

:root {
--base-size: 16px; /* change this for a different body size */
--ratio: 1.333; /* change this for a different scale step */

--caption: calc(var(--base-size) / var(--ratio));
--body: var(--base-size);
--subheading: calc(var(--body) * var(--ratio));
--section: calc(var(--subheading) * var(--ratio));
--page: calc(var(--section) * var(--ratio));
--hero: calc(var(--page) * var(--ratio));
--display: calc(var(--hero) * var(--ratio));
}

.caption {
font-size: var(--caption);
}

body {
font-size: var(--body);
}

h3 {
font-size: var(--subheading);
}

h2 {
font-size: var(--section);
}

h1 {
font-size: var(--page);
}

.hero {
font-size: var(--hero);
}

.display {
font-size: var(--display);
}