Editorial Hierarchies
Heading hierarchy carried by weight and colour, not by explosion of size — same 24px, different voice. A page that respects its reader.
Most web typography stacks size as a way of yelling. A page that respects its reader instead separates hierarchy through small structural moves: a 600-weight green heading followed by a 400-weight black subheading, both sitting at the same height.
The reader feels the difference without their eye having to travel further down the page.
When to use it
- Long pages with many sibling sections.
- Documentation, knowledge bases, design system catalogues.
When to avoid it
- Hero sections where size is the point.
What changes when you do this
The page reads as a sequence of equal voices, separated by weight and colour rather than shouting at each other through size. The reader’s eye moves horizontally through each section rather than vertically across a hierarchy of escalating fonts. Long pages feel like prose, not like a slide deck.