The Quiet Authority of a Well-Set Page

Why hierarchy lives in the type, not the chrome — and why removing every box, color, and icon is the fastest way to see whether your scale actually works.

§ 01 — Foundations

A type scale is a contract with the reader.

Every choice about size, weight, and spacing is a promise about what matters and in what order. Get the scale right and the reader never has to wonder where to look. Get it wrong and no amount of color or ornament will rescue the page.

A modular scale is built by multiplying a base size by a consistent ratio. The ratio most editorial designers settle on is the major third — 1.250 — because it produces steps large enough to read as distinct levels without exploding past the line length a column can comfortably hold. At 16px base, the ladder runs 13, 16, 20, 25, 31, 40, 50, 63 — six useful steps above the caption floor.

The point is not the math. The point is that once you commit to a ratio, every size decision becomes a position on the ladder rather than a vibe. "Make the heading bigger" stops being a negotiation and becomes "move it up one step." That constraint is what produces the feeling of calm authority a well-set page has — the sense that someone decided, rather than guessed.

"The scale does the work the designer would otherwise have to do with shouting — color, boxes, rules. Shouting is exhausting to read." — Dieter Hall, Notes on Editorial Structure

Why six levels, and not four or nine

Four levels collapse the middle: you can show display, heading, body, and caption, but you have no room for the subsection and the minor label that real articles need. Nine levels fragment the eye — adjacent steps stop reading as distinct and start reading as noise. Six is the count where each level has exactly one job and the gaps between them are perceptible without a ruler.

The six jobs

Display

The single focal point. One per page. If two elements compete for this role, neither wins.

Section opener

Marks a new major part. The reader scans these to understand the shape of the whole.

Subsection

A labeled chunk within a section. The texture break (serif→sans, or weight jump) carries the separation.

Minor heading

A labeled paragraph group. Same family as the subsection but smaller — reads as "a thing within the thing."

Body

The reading layer. Everything the reader is here to actually read lives here.

Caption

The quietest layer. Metadata, footnotes, the things you read only if you want to.

§ 02 — Weight and Family as Hierarchy

Size is half the signal. Texture is the other half.

Two headings at the same size can still read as different levels if one is a serif and the other a sans, or if one is weight 400 and the other 600. Mixing family and weight lets you compress the size ladder without flattening the hierarchy — which matters most on narrow screens where aggressive size jumps break line length.

This page uses two families deliberately. Fraunces, a variable serif, carries the display and the section openers — its optical sizing and generous x-height make large sizes feel composed rather than loud. Inter, a neo-grotesque sans, carries the subsections and body, where the goal is neutral readability. The handoff from serif to sans at the subsection level is a texture break: it separates "structural headings" from "reading text" without a single rule line or background fill.

Weight as emphasis, not decoration

Within a single family, weight shifts carry emphasis. This page's body is weight 400; the minor headings are 600. That 200-unit jump is the smallest weight contrast the eye reliably reads as "different" at body sizes — anything less bleeds together, anything more starts to feel like a different voice. The same logic applies to the lead paragraph: it stays weight 400 but moves up one size step and darkens one ink level, so it reads as "the entry point" without becoming a heading.

The lead paragraph is set in --ink-700, one step darker than body --ink-500. That single luminance step is doing the work a bold weight or a colored background would otherwise do.

The hanging indent for notes

Notice the footnotes at the bottom of this page. Each one uses a negative text-indent so the number hangs left and the wrapped lines align to the text, not to the number. This is a typographic convention older than the web — it lets the eye scan the numeral column vertically while reading the prose horizontally. No table, no list bullets, no card. Just an indent.

§ 03 — Spacing as Hierarchy

Whitespace is the silent level of the scale.

The space above a heading communicates its rank as clearly as its size does. A section opener gets 80px of air above it; a subsection gets 48px; a minor heading gets 32px. These margins are not arbitrary — they mirror the size ladder, so the eye perceives a consistent relationship: bigger headings earn more approach space.

The relationship is roughly margin-top ≈ 1.5 × font-size for body-adjacent levels and scales up for major breaks. This produces a page that breathes unevenly on purpose: tight clusters of thought inside a section, generous pauses between sections. A page with uniform spacing reads as a list; a page with scaled spacing reads as an argument.

The cost of a single line

A one-line paragraph at the end of a section — a widow — breaks the rhythm the spacing worked to establish. This page uses text-wrap: pretty on body text so the browser balances the last lines of each paragraph, avoiding both widows and orphans without manual fiddling. It is the smallest typographic decision on the page, and it is the one that separates a page that feels set from one that feels typed.