hierarchy-and-scalelisted

# Hierarchy and scale Hierarchy is the reader's answer to "what do I look at, and in what order." Scale is the finite set of sizes you allow yourself so that answer stays consistent. ## 1. When to invoke - Defining a type scale for a product, site, or design system. - Headings compete, or everything reads at the same importance. - A codebase has accumulated arbitrary sizes (13px, 15px, 17px, 22px…). - Content structure exists but is not visible. **Do not** invoke for body-copy tuning alone (`body-text-and-reading`) or for spacing detail (`microtypography`). ## 2. Required context - The **content's real structure** — how many genuine levels exist? Most interfaces need 3–4, not 8. - Whether a **design system or token set** already constrains sizes. - The **densest** screen the scale must serve, and the **most editorial** one. - Whether headings must survive translation (German/Finnish run long). - Body size, since the scale should be anchored to it. ## 3. Invariant principles - **Hierarchy is relative, not absolute.** A 20px heading is only a heading because the body is 16px. Define relationships, not values. - **Size is the weakest hierarchy tool available, and the most overused.** Weight, spacing, colour, position, and case all carry hierarchy. Reach for space and weight before size. - **A scale is a constraint, not a menu.** Its value is in what it forbids. If every size is available, there is no scale. - **Fewer levels read faster.** If two levels are hard