Philosophy
Editorial design borrows the machinery of print magazines: a dominant serif voice, rigorous typographic hierarchy, generous margins, and layout that leads the eye down the page like a well-set article. Whitespace is not emptiness — it is pacing. The craft shows in details: hanging punctuation, real small caps, baseline-aware spacing, rules that separate sections like column dividers.
Where brutalism shouts, editorial converses. It suits writing-heavy sites: essays, journals, portfolios with case studies, documentation that wants dignity.
Typography
The pairing must be deliberate — one voice for headlines, one for reading:
- Display: Fraunces (with its optical size axis pushed up), Playfair Display, Libre Caslon Text, or Newsreader at 500–600. Use italic sparingly for emphasis — it's the strongest card editorial holds.
- Body: Source Serif 4, Lora, or Newsreader text sizes at 17–19px with line-height 1.65–1.75. Measure matters more than anything: 60–72 characters per line.
- Labels & captions: a quiet grotesque (Archivo, Public Sans) or the same serif in caps with tracking. Reserve monospace for data, not prose.
Drop caps, deck paragraphs (a larger standfirst under the headline), and numbered footnotes are all idiomatic.
Color
Paper tones beat pure white: oklch(0.97 0.008 85) rather than #fff. Ink is warm-black, never #000. One accent drawn from print tradition — oxblood, rust, forest, or navy — used for links, kickers, and rules only. Dark-mode editorial works when it mimics lamplight on ink: warm near-black paper, cream text, the same single accent brightened.
Surfaces & backgrounds
Texture is subtle or absent: a faint paper grain at 2–3% opacity maximum. Structure comes from hairline rules (1px, 12–20% ink), section numbers, and folio-style running heads. Photography is treated like print plates — consistent duotone or slight sepia, generous captions.
Layout grammar
- A strong vertical rhythm: establish a baseline grid and let sections snap to it.
- Asymmetric two-column article layouts with a narrow margin column for notes/pull quotes.
- Pull quotes set 2× body size in the display face, indented into the margin.
- Full-bleed images act as chapter breaks; everything else stays inside the measure.
Motion
Almost none, and slow when present: fades of 400–600ms, no parallax, no bounce. Hover states underline or shift color. The one indulgence worth keeping: a gentle staggered reveal on load for hero elements only.
Reference theme
[data-theme="press"] {
color-scheme: light;
--color-base-100: oklch(0.965 0.01 85);
--color-base-200: oklch(0.93 0.012 85);
--color-base-content: oklch(0.22 0.015 70);
--color-primary: oklch(0.48 0.14 40);
--color-primary-content: oklch(0.97 0.01 85);
--color-secondary: oklch(0.55 0.08 250);
--color-neutral: oklch(0.3 0.012 70);
--color-neutral-content: oklch(0.96 0.01 85);
--radius-box: 0.25rem;
--radius-field: 0.25rem;
--radius-selector: 0.25rem;
--border: 1px;
--depth: 0;
}
Set headings in "Fraunces" with font-variation-settings: "opsz" 144, body in "Source Serif 4".
Pitfalls
- Don't center long-form text; editorials left-align with a firm measure.
- Don't mix three typefaces — two voices plus a caption face is the ceiling.
- Don't let cards and shadows creep in. Editorial separates with rules and space, not boxes.