GFX-301f · Module 1

Type Hierarchy Specification

3 min read

A type hierarchy is not a list of font sizes — it is a system of relationships. The headline must be visually dominant. The subhead must be clearly subordinate. The body must be comfortable to read. The caption must be present but unobtrusive. These relationships are ratios, not absolute values.

Our brand type scale uses a 1.333 (perfect fourth) ratio: if body text is 16px, subheads are 21px (16 * 1.333), headlines are 28px (21 * 1.333), display is 38px (28 * 1.333). The ratio creates a mathematical harmony that the eye perceives as intentional, not arbitrary. Weight complements size: display uses Black (900), headlines use Bold (700), subheads use SemiBold (600), body uses Regular (400).

For AI-generated assets, the type hierarchy specification is part of the style specification. The specification defines not just the sizes and weights but the spatial relationships: headline-to-subhead spacing ratio, line height per level, maximum line length per level. The critic evaluates adherence to the hierarchy — a generated layout where the subhead is visually competing with the headline has failed the hierarchy specification, even if both are technically the correct sizes.

Do This

  • Define type hierarchy as ratios, not absolute sizes — ratios scale; absolutes do not
  • Specify weight, spacing, and line height per hierarchy level — size alone is insufficient
  • Evaluate visual dominance, not just measurements — a bold 21px subhead can overpower a light 28px headline

Avoid This

  • Pick font sizes ad hoc per asset — consistency requires a system, not individual decisions
  • Use the same weight across hierarchy levels — weight differentiation is half the hierarchy
  • Assume the model will maintain hierarchy automatically — it will not; the critic must verify