Type size relationship demo

Summary

A type-hierarchy page: the rule that subheads are no larger than 50% of the headline's ascender and body no larger than 50% of the subhead's cap height, shown with three live words on a shared baseline.

Visual description

Red ground, cream type. A left column holds the "Type Size Relationship" heading and a paragraph stating the 50%-step sizing rule. Below a thin horizontal rule spanning the slide, three words sit on a common baseline at descending sizes: a huge rounded-serif "Headline" (labelled Flame Bold), a medium "Subhead" (Flame Regular), and a small "Body Copy" (Flame Sans), each captioned with its style name. The relative sizes visibly demonstrate the ratio described in the copy. Header chrome and page number "071" run along the top.

Key takeaway

Proving a sizing ratio by setting the three levels side by side on one baseline instead of quoting point values alone. The shared baseline rule makes the proportional relationship immediately readable.

Reuse notes

A clean template for the type-hierarchy page of a guideline. Reuse the headline/subhead/body-on-one-baseline demo whenever you define size steps. Pairs well with a separate page giving exact point sizes and line heights.