Editorial Typography

Magazine-inspired type hierarchies with dramatic size contrast.

Overview

Editorial typography borrows from print design: dramatic size differences between heading levels, intentional font pairing, and typographic details that signal craft (ligatures, optical kerning, hanging punctuation). The key is contrast. A 120px display heading paired with 16px body text creates the same visual drama as a magazine spread. Two carefully chosen fonts (one serif for display, one sans for body) create more personality than five fonts used carelessly. Whitespace around type is as important as the type itself. Generous line-height, deliberate letter-spacing, and thoughtful measure (line length) make content feel premium.

Why It Wins

Typography is the single highest-impact design decision
Creates instant brand recognition and personality
Guides reading hierarchy without decorative elements
Separates "designed" from "templated"

Key Principles

01Maximum two font families (display + body)
02Size contrast ratio of at least 4:1 between h1 and body
03Line-height: 1.1-1.2 for display, 1.5-1.7 for body
04Letter-spacing: negative for large text, positive for small caps/labels
05Measure: 60-75 characters per line for body text

Anti-Patterns

More than two font families
Display font used for body text
Uniform sizing across heading levels
Justified text on the web

Code Snippet

.display-heading {
  font-family: 'Instrument Serif', serif;
  font-size: clamp(3rem, 8vw, 7.5rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.body-text {
  font-family: 'Satoshi', sans-serif;
  font-size: 1.125rem;
  line-height: 1.65;
  max-width: 65ch;
}

Libraries

Variable Fonts
Single font file with weight/width/slant axes
Capsize
Trim leading/trailing whitespace from type for pixel-perfect alignment

Performance

low cost

Conversion

positive

Clear hierarchy improves scannability. Users find CTAs faster when headings create a clear visual path.

Audience

creativeluxuryenterprisestartup

Accessibility

Ensure heading hierarchy is semantic (h1→h2→h3). Font size minimums: 16px for body text.

Pairs Well With

typographyeditorialfontshierarchycraft