Type hierarchy headline-subhead-body demo

Summary

A hierarchy page that connects role labels (Headline, Subheadline, Body) to a live marketing sample, then diagrams x-height and cap-height beneath it.

Visual description

Standard guideline layout on white. The left column holds "Hierarchy", an intro, and two labeled blocks (Weights, Scale) with bullet points. The upper-right is a rounded deep-violet panel: three left-side labels (Headlines and Titles: DS Indigo Light; Subheadlines: DS Indigo Regular; Body Text: DS Indigo Medium or Regular), each with a thin leader line pointing right to a real sample, the headline "Grow your business with Docusign", the subhead "Move with Agility", and a two-line body paragraph, all in white. Below, on a cream panel, a measurement diagram shows the word "Headline" with an "x-height" caret, "Subheadline" with a "cap height" caret, and "Body Text", in dark violet with red tick marks. Two captions define x-height and cap height. Running header: "Typography / Hierarchy / 41".

Key takeaway

Wiring abstract role labels to a single believable marketing sample with leader lines shows hierarchy in context, not in isolation. Folding the x-height/cap-height definitions into the same page ties the rule to the geometry that explains it.

Reuse notes

An effective hierarchy reference for a brand or design-system guide. The labels-to-live-sample leader-line device is reusable for any type scale. Use a real headline/subhead/body example rather than lorem so designers can judge the relationships.