Editorial Layout on the Web: Type, Rhythm and Restraint

The websites that feel expensive are rarely the ones with the most going on. They are the ones that decided what the page is about and then gave that thing room. Print editors have been solving this for a century; almost all of it transfers.

#Hierarchy is contrast, not size

A page where everything is big has no hierarchy at all. Contrast is what creates it — and size is only one axis. Weight, case, colour, spacing and typeface all do the work, often more cheaply.

The eyebrow-plus-headline pattern is the clearest example: eleven pixels of letter-spaced monospace above a 96px display headline. The eyebrow is nearly invisible by size and completely unmissable by contrast.

#Measure is not negotiable

Around 65 characters per line, give or take ten. Wider and the eye loses the return; narrower and the rhythm breaks. On a full-width layout this means body copy sits in its own column even when images do not.

.container-prose {
  max-width: 44rem;   /* ~65ch at 18px */
  margin-inline: auto;
}

#Whitespace is structure

Vertical rhythm communicates grouping before anyone reads a word. My default on desktop is 120–200px between major sections and roughly a third of that inside them. The exact numbers matter less than the ratio being obvious.

Full-bleed imagery works because it is the exception. A page where every section touches the edges has no edges.

#Line breaks are a design decision

Editorial headlines break where the meaning breaks, not where the container ends. Store the lines as an array in the CMS and render them as one heading with presentational breaks — the outline stays a single h1, and the editor keeps control of the shape.

<h1 className="text-d1">
  {headingLines.map((line, i) => (
    <span key={line} className="block">
      {line}
    </span>
  ))}
</h1>

#Restraint, specifically

• Two type families plus one monospace utility face. Not five.
• One accent colour doing the work; a second reserved for a single motif.
• Motion that reveals, never motion that entertains.
• One idea per section, and the confidence to leave the rest of the screen empty.

The performance argument lands in the same place: fewer families, fewer weights, fewer decorative layers. Restraint is the rare design decision that makes the Core Web Vitals budget easier rather than harder.