Editorial / Research-Report Design

Pair with design-system. This skill = reading experience, prose typography, and the editorial look. ✅ verified · ◐ judgment.

Reading measure & body ✅

• Wrap prose in max-width: 65ch (66 ideal; research converges on 45–75 CPL). Figures, charts, and pull quotes may break out wider than the text column.
• Body 18–20px, line-height: 1.6, a screen-tuned serif for sustained reading.
• One modular ratio 1.25–1.333; headings on the same fluid clamp() scale as the body.

Type pairings ✅◐

• Newsreader (body, opsz) + Inter (UI/labels/captions) — warm, screen-tuned for long reading.
• Source Serif 4 + Source Sans 3 — matched superfamily, excellent cross-OS hinting.
• Fraunces (display/body, soft+wonky axes) + IBM Plex Sans (UI) — distinctive masthead.
• EB Garamond is the OSS book-serif option (lower screen contrast — use ≥18px). All via next/font/google; enable font-optical-sizing: auto on opsz families.

Prose details ✅◐

• Paragraphs: pick ONE — space-between (margin-block: .75–1em, "web") or first-line indent (text-indent: 1.5em, no top margin, "book"). Never both.
• Drop cap (one per article opener, never per section):

  .prose > p:first-of-type::first-letter{
    float:left; font-size:3.2em; line-height:.8; padding-right:.06em; font-weight:600; }

• Pull quotes: 1.3–1.5× body, lighter weight, slight negative tracking, indented or full-bleed with a hairline rule. Restate, never duplicate body verbatim.
• Footnotes: superscript <sup> refs with tabular figures; render as margin notes (ch-wide aside on wide viewports, collapse inline/bottom on mobile); focusable back-links.
• text-wrap: pretty on body, balance on headings; hang punctuation for premium editorial.

Structure ✅

• TOC / scroll-spy for anything long: sticky right rail (desktop) highlighting the current section via IntersectionObserver; collapses to a top dropdown on mobile.
• Section dividers as hairlines or generous whitespace, not heavy rules. Reading-progress bar ◐ optional.
• Charts in prose: embed Recharts/figures full-measure or wider with a caption; keep chart type minimal (line/area/bar); reference design-system / dataviz-design tokens — never default chart colors. Number callouts inline use tabular-nums.

Look ✅◐

• ✅ Editorial/Magazine (typography-forward, strong hierarchy, asymmetric columns) + ✅ Swiss grid for rigor. ◐ Luxury serif (wide tracking, restrained gold/foil accent) for the cover/title moment.
• Mostly light-first (paper-like --bg near-white, warm-neutral ink) — long reading on dark is fatiguing; offer a dark toggle but tune it (ink ~#E8E4DC, not pure white, to cut halation).
• Imagery: atmospheric, full-bleed openers; consistent caption style; one accent color, used in links + pull-quote rules only.

Pitfalls

Full-width body text (>75ch) · sans-serif body for long reading · drop caps everywhere · pull quotes that repeat the paragraph · default chart colors · no TOC on a 3,000-word page · dark mode with pure-white ink.

Sources

baymard.com & fonts.google.com/knowledge (measure) · pimpmytype.com (line length/height) · typewolf.com (serif picks) · moderncss.dev & utopia.fyi (fluid scale) · MDN font-variant-numeric.