A page title
The h1 is three full steps up the scale, and is the largest
of the headings.
Body copy sits at the base of the scale. Every size and gap in this demo is calculated from this and the ratio.
A major section
The h2 is two full steps up the scale, and opens with the
biggest gap above it.
A subsection
The h3 is one full step up the scale.
A minor heading
The h4 sits on the half step, created using the square root
of the ratio.
A low-level heading
The h5 is body copy size. Its gap above does the work,
with a subtle colour change as an enhancement.
The last resort
The h6 drops to a medium weight, tucks in tightest to its
content, and fades one step further.