Editorial Typography

Editorial typography is the craft of making long text inviting, navigable, and trustworthy. Unlike UI type — optimized for scans and clicks — editorial type must sustain attention across thousands of words. Magazines, books, newspapers, and long-form web articles share the same fundamental problems: how to structure hierarchy, how to break monotony without breaking rhythm, and how to honor the reader's eye across pages and screens.

The editorial mindset

Editorial design treats the page as a grid of text zones. Every element — headline, deck, byline, body, pull quote, caption, sidebar — occupies a defined relationship to columns and baselines. Ad hoc placement reads as amateur; grid discipline reads as authority.

Three principles anchor editorial work:

1. Hierarchy serves navigation — Readers skim before they commit. Headlines, decks, and subheads are wayfinding.
2. Rhythm sustains reading — Consistent leading, measure, and paragraph spacing reduce cognitive load.
3. Variation has rules — Pull quotes, sidebars, and breakouts interrupt pattern deliberately, not randomly.

Grids and columns

Print editorial traditionally uses multi-column grids. A six-column grid might allocate four columns to body text and two to margins for notes or images. Newspapers compress to narrow columns (35–45mm) for scanability; literary magazines expand to two wide columns for immersion.

On the web, the grid translates to max-width containers and CSS Grid or flex layouts:

• Single column (620–720px) for focused long-form — Medium, Substack defaults.
• Two column for desktop magazine layouts — body in the primary column, related links or ads in secondary.
• Asymmetric splits (7fr / 3fr) create editorial tension without sacrificing measure.

Measure and leading for long-form

Editorial body text typically runs 45–75 characters per line (CPL). Book typography often targets 60–66 CPL. Newspapers go narrower because columns sit side by side.

Leading (line height) scales with measure: wider lines need more leading. A starting point:

• Serif body at 18px — line height 1.55–1.7 (28–30px)
• Sans body at 17px — line height 1.5–1.65
• Narrow newspaper column — line height 1.3–1.4 acceptable due to short measure

First-line indent (1em) or paragraph spacing (0.75–1em) separates blocks — never both in web typography unless mimicking print books deliberately.

Headlines, decks, and subheads

Magazine hierarchy typically stacks:

1. Masthead / section label — small caps or bold sans, tracked
2. Headline — display serif or sans, tight leading, negative letter-spacing optional
3. Deck (standfirst) — one size down from headline, often italic or lighter weight, summarizes the article
4. Byline and dateline — metadata, muted color, 14–15px
5. Subheads (H2, H3) — break long articles every 300–500 words

Newspaper headlines prioritize density and urgency — tighter tracking, heavier weights, shorter measure. Book chapter titles prioritize elegance and whitespace.

Pull quotes

Pull quotes extract a compelling sentence into display treatment. They reward skimmers and break the visual rectangle of body copy.

Rules for effective pull quotes:

• Quote real text from the article — never fabricated teaser copy that misrepresents the argument.
• Size 1.5–2× body, often in display serif or brand accent face.
• Position at column break or grid intersection — straddling columns in print, floating with float or grid placement on web.
• Avoid quotation mark clichés — oversized " marks date quickly unless part of established brand language.
• Limit to one per 800–1000 words — more dilutes impact.

Captions and credits

Captions sit below images, figures, and charts. They are secondary text — smaller, often sans serif even when body is serif — but must remain legible (minimum 13px on web, preferably 14px).

Structure captions consistently:

• First sentence: describe what the image shows (accessibility requirement, not optional).
• Second sentence: credit, date, or context.
• Typography: 0.85–0.9× body size, line height 1.4, muted but WCAG-compliant contrast.

Figure numbers ("Figure 2.3") in bold or small caps aid academic and technical publishing cross-references.

Footnotes and sidenotes

Footnotes serve citations, tangents, and definitions without interrupting the main argument. Print places them at page bottom; web offers three patterns:

1. Bottom footnotes — numbered superscripts link to footer list (Wikipedia model). Best for accessibility.
2. Sidenotes — margin notes on wide viewports; collapse to bottom on mobile.
3. Popovers — click superscript reveals overlay. Use sparingly; keyboard and screen reader support required.

Superscript numerals should not disrupt line rhythm excessively — use font-variant-numeric: ordinal or dedicated superscript sizing at 0.75em raised.

Books vs magazines vs newspapers

| Medium | Typical body | Column structure | Distinctive trait | |--------|-------------|------------------|-------------------| | Books | Serif 10–12pt print / 18px web | Single or facing pages | Running heads, chapter openers | | Magazines | Serif or sans 9–11pt / 17–20px web | Multi-column, asymmetric | Display type as art direction | | Newspapers | Narrow serif/sans 8–10pt | Many narrow columns | Headline hierarchy, urgency | | Long-form web | Sans or serif 17–21px | Single column, max-width | Progressive disclosure, sticky nav |

Book typography uses running heads (author/title on verso, chapter on recto), folio placement, and chapter openers with dropped caps or whitespace half-pages. Digital books simplify but retain chapter title treatment.

Newspapers use Agate (5–8pt) for stock tables and classifieds — a reminder that editorial systems span extreme size ranges.

Drop caps and opening treatments

Magazine and book openers often feature drop caps — the first letter set large across 2–4 lines. Implementation notes:

• Align cap height to x-height of adjacent lines for clean join.
• Use genuine initial caps from the font's stylistic sets when available.
• On web, initial-letter CSS property handles drop caps with less markup hackery than floats.

Opening paragraphs may also use bold lead-ins (first few words small caps) — a newspaper technique adapted for web listicles.

Editorial typography on the web

Digital editorial inherits print rules but adds constraints: responsive breakpoints, dark mode, link styling, and performance. Best practices:

• Serif for body signals "article" to readers trained by decades of print — but high-quality sans (Inter, Source Sans) works when leading and measure are tuned.
• Sticky table of contents for pieces over 2,000 words.
• Progress indicator optional; never at the expense of headline hierarchy.
• Print stylesheet still matters for recipes, legal docs, and academic content.

Editorial quality checklist

Before publishing long-form content:

• [ ] Body measure 45–75 CPL on desktop; shorter on mobile
• [ ] Line height appropriate for size and measure
• [ ] Headline / deck / byline hierarchy distinct
• [ ] Subheads every 3–5 paragraphs in long pieces
• [ ] Pull quotes aligned to grid, used sparingly
• [ ] Captions describe image content; credits included
• [ ] Footnotes accessible on keyboard and mobile
• [ ] Contrast passes WCAG for all text levels including captions

Editorial typography rewards patience. The grid is invisible when done well — readers simply feel that the content is worth their time. That feeling is the product.