Hierarchy & Scale

A typographic hierarchy tells the reader where to look first, what to read next, and what to skip. Without it, a page is a flat wall of text. With it, the structure of the content is visible before a single word is read.

Hierarchy is built from four axes: size, weight, style (italics, caps), and colour. The trick is changing one axis at a time. Bold + large + caps + coloured is noise, not hierarchy.

Modular scales

A modular scale is a series of font sizes derived by repeatedly multiplying a base size by a fixed ratio. Common ratios, borrowed from musical intervals:

| Ratio | Name | 16px base | |-------|------|-----------| | 1.125 | Major second | 16 / 18 / 20 / 23 | | 1.200 | Minor third | 16 / 19 / 23 / 28 | | 1.250 | Major third | 16 / 20 / 25 / 31 | | 1.333 | Perfect fourth | 16 / 21 / 28 / 38 | | 1.500 | Perfect fifth | 16 / 24 / 36 / 54 |

The scale gives you a starting palette of sizes that feel related. It does not replace the eye. Break the scale in two situations:

1. The typeface has a sweet spot. If 18px reads better than 16 or 20, use 18 — even if that was not on the scale.
2. Optical adjustment. Headings often need to be a little smaller than the math suggests so they do not dominate; small text often needs to round up so it does not look weak.

The point of the scale is to keep sizes clearly different from each other. 16 / 18 / 20 looks intentional. 16 / 17 / 18 looks like indecision.

:root {
  --text-xs: 10.24px;
  --text-sm: 12.8px;
  --text-base: 16px;
  --text-lg: 20px;
  --text-xl: 25px;
  --text-2xl: 31.25px;
  --text-3xl: 39.06px;
  --text-4xl: 48.83px;
  --text-5xl: 61.04px;
}

Size contrast

Size contrast is the deliberate difference in font size between two text elements that play different roles. The rule: sizes should be clearly different or exactly the same — never almost the same.

Practical floor: at least a 20–25% size jump between adjacent levels. If your scale gives you 16 / 18 / 20 / 24, consider skipping every second step (16 / 20 / 28) so the levels separate clearly.

Past a few levels of size contrast, headings get unwieldy and the page feels like a poster. Layer in a second axis — weight, style, or colour — instead of pushing size further.

Weight contrast

Weight is the thickness of a typeface's strokes. Most fonts ship three to six weights; variable fonts allow any value.

For body, use 400–500 (Regular, Book, or Medium). Bold is for selective emphasis and headings, not entire paragraphs.

Counter-intuitive but reliable: as headings grow, their weight should drop. A 48px Bold headline feels overwhelming next to 18px body; the same 48px in Regular feels balanced.

For a balanced page, the weight should decrease slightly, not increase, as the size increases. — Robert Bringhurst

Web alternative: keep the weight but lighten the colour slightly. A darkened brand hue feels deliberate; flat grey feels lifeless.

Heading colour

Adjusting heading colour is a free hierarchy axis on the web and an underused one. A 48px headline set in the same black as 16px body text looks much darker than the body — there is more ink per square inch. The page feels unbalanced.

Two fixes:

• Drop the weight (Bringhurst's preferred move).
• Lighten the colour. A slight tint — #1a1a2e or a darkened brand hue — is enough. Pure flat grey looks lifeless; tinted hues look intentional.

Do not match link colour. If your link colour is blue, headings should not also be blue. Readers learn link colour as "click me" and will click headings, get nothing, and feel mildly tricked.

Caps as subheads

Set short subheadings in letterspaced uppercase or small caps rather than larger text. The result is a quiet, formal secondary heading that does not disrupt the vertical rhythm:

.subhead {
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  font-weight: 600;
}

Size down, not up. Uppercase at body size feels like shouting; sized down by 20–30% it reads as a label. Always add tracking (0.05–0.15 em) — capitals need extra air.

Heading levels

HTML provides six levels (h1–h6); most designs use only two or three. Past three levels, content usually wants restructuring into sub-articles, lists, or different pages.

Each page should have one h1. h2 marks major sections; h3 subdivides those if needed. h4 and below are exotic — if you reach for them, the document is probably trying to be two documents.

Headings should be descriptive and skimmable. Install on macOS, Linux, or Windows tells a reader what they will find; Getting started does not.

Use text-transform: uppercase in CSS rather than typing capitals in HTML. Keep content semantic; let styling change independently.