Headings

Semibold titles that set the hierarchy. Weight carries it, so even a 16px heading reads as one.

Workspace preferences

Settings here apply to everyone in Acme.

Notifications

Choose what reaches your inbox each week.

Fig. 1 A page title and a section title. The section heading is body-sized, yet it still leads.

Four sizes, one weight

Every heading is semibold (600). Size only says how much of the page it covers: the page, a large panel, or a section. That keeps the scale short and lets a small heading sit beside body text without getting bigger.

Build something usefulheading-3636 / 1.15 / -0.025em · 600

Workspace preferencesheading-2424 / 1.3 / -0.015em · 600

Project detailsheading-2020 / 1.4 / -0.015em · 600

Notificationsheading-1616 / 1.5 / -0.015em · 600

Fig. 2 The heading roles, measured: size, line height, tracking, and weight.

Pick the role by place

heading-24 titles a page. heading-16 titles sections, cards, dialogs, and sheets. heading-20 is for one prominent panel, and heading-36 is only for marketing-scale display.

Do

Usage

1,204 of 2,000 runs this month.

heading-16 leads the card without outgrowing it.

Don’t

Usage

1,204 of 2,000 runs this month.

A page-sized title in a card shouts, and the page title above loses its place.

Fig. 3 The same card, titled two ways.

Build it

Each role is a utility from the theme’s typography file. Pair it with the right element:

type-roles.tsx