Typographic hierarchy headline subhead body

Summary

The hierarchy page: it ties the headline, subheadline, and body roles to specific DS Indigo weights, shown both on a real marketing layout and on an annotated x-height versus cap-height diagram.

Visual description

White background, standard header ("Typography" / "Hierarchy", page "41"). The left column holds "Hierarchy" and short Weights and Scale notes. The upper right is a deep-violet panel split in two: on the left, three labeled rows ("Headlines and Titles: DS Indigo Light", "Subheadlines: DS Indigo Regular", "Body Text: DS Indigo Medium or Regular") connect by leader lines to a live example on the right ("Grow your business with Docusign" as a light headline, "Move with Agility" as a regular subhead, and a two-line body paragraph). Below sits a cream panel with a measurement diagram: the words "Headline", "Subheadline", and "Body Text" set at descending sizes with red tick marks calling out "x-height" and "cap height", and two captions at the bottom defining each term.

Key takeaway

Explaining hierarchy twice in one page: once functionally, mapping each role to a named weight via leader lines on a real layout, and once mechanically, with an x-height and cap-height diagram that grounds the scale rules in type anatomy. The pairing makes an abstract rule ("subheadlines no larger than the headline's x-height") concrete.

Reuse notes

An excellent reference for the hierarchy page of a type system, especially when scale rules are defined relative to type metrics rather than fixed sizes. The role-to-weight leader-line panel and the anatomy diagram are independently reusable. Needs a real headline example to carry the top half.