Preview image. Unlock full-res
A type-scale spread, four big ghosted "Title style" sizes on the left and a stacked ladder of display, body, heading and quote styles with specs on the right.
Summary
The type-hierarchy spread: four oversized "Title style" specimens on the left set the display scale, while the right column lays out the full ladder of display, body, heading and quote styles with point sizes and tracking.
Visual description
Warm cream page, thin left rail with "2.6.6 Typography styles", a note on proportional rescaling, the half-circle glyph and the contents list with "Type" highlighted. The white panel splits into two columns. The left stacks four pale-grey specimens, "Title style 1" down to "Title style 4" in decreasing size, each annotated with face (Display Pro 65 Medium), size/leading (e.g. 140pt / 130pt) and tracking (-30). The right column is a denser ladder of smaller styles: Display Style A through D, Body Copy, Heading Style E, a serif Quote Style B reading "If we truly believe recreation can be more than just physical activity, we must invest in the spaces between the boxes.", and Heading/Small styles down to an image caption, each row carrying its own size and leading spec. Standard footer along the bottom.
Key takeaway
Splitting the type system into a visual scale (the four big Title styles you can feel) and a tabular spec ladder (every style with exact size, leading and tracking) so the page serves both eye and production. Dropping a real serif pull-quote into the ladder shows tone alongside the numbers.
Reuse notes
A model type-hierarchy page for any thorough brand book or design system. The exact pt sizes assume print or fixed layouts; translate to a responsive scale for web. Keep the big-specimen-plus-spec-table split, it satisfies both designers and the people implementing the styles.
From this deck: HCMA typography styles and hierarchy
View deck
