Skip to content

hierarchy

Defines hierarchy, typographic hierarchy

In typography, hierarchy is the system of visual distinctions that tells a reader which elements are most important, how content is organized, and where to look next. It differentiates headings, body text, captions, and other elements so that the structure of a document is visible before a single word is read.

Typographic hierarchy is established through contrasts in size, weight, color, spacing, and position. A heading set larger and bolder than the surrounding text signals that it names what follows. A caption set smaller and lighter signals that it comments on something adjacent. These contrasts must be strong enough to be perceived at a glance but consistent enough to form a predictable system.

Most documents use three to four levels of hierarchy. Fewer levels risk ambiguity about how content relates; more levels risk overwhelming the reader with distinctions that stop being meaningful. Each level should differ from its neighbors by enough to be unmistakable — a common guideline is to change the font size by at least 20 to 25 percent between levels.

Hierarchy interacts with line height and margins: headings typically carry more space above them (to separate from what came before) and less below (to bind them to what they introduce). This use of whitespace to group and separate is as much a part of hierarchy as the type itself.

Relations

Date created

Cite

@misc{emsenn2025-hierarchy,
  author    = {emsenn},
  title     = {hierarchy},
  year      = {2025},
  url       = {https://emsenn.net/library/design/domains/typography/terms/hierarchy/},
  publisher = {emsenn.net},
  license   = {CC BY-SA 4.0}
}