Digital era · 2015–present
Editorial
Print-magazine sensibility online: expressive type hierarchies, full-bleed photography, deliberate column grids, and content as the entire design.
Live preview base style — press Wear
$2,100
Revenue, up 12% from last month.
| Customer | Plan | Status | MRR |
|---|---|---|---|
| Northwind | Studio | Active | $1,240 |
| Acme Labs | Team | Trial | $0 |
| Kaldi Coffee | Studio | Active | $860 |
Use this style 16 tokens
- --bg
oklch(98.5% 0.008 72) - --fg
oklch(11% 0.008 55) - --muted
oklch(50% 0.008 60) - --surface
oklch(100% 0.003 75) - --surface-2
oklch(96% 0.01 70) - --border
oklch(85% 0.008 68) - --accent
oklch(40% 0.12 32) - --accent-fg
oklch(99% 0 0) - --focus
oklch(40% 0.12 32)
| Token | Value |
|---|---|
| --font-body | 'Source Serif 4', Georgia, serif |
| --font-display | 'Playfair Display', 'Georgia', serif |
| --font-mono | 'IBM Plex Sans', system-ui, sans-serif |
| --radius | 0px |
| --radius-sm | 0px |
| --shadow | none |
| --shadow-lg | 0 8px 28px oklch(11% 0.008 55 / 0.14) |
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;0,900;1,700;1,900&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;1,8..60,400;1,8..60,600&family=IBM+Plex+Sans:wght@400;500;600&display=swap');
:root {
--bg: oklch(98.5% 0.008 72);
--fg: oklch(11% 0.008 55);
--muted: oklch(50% 0.008 60);
--surface: oklch(100% 0.003 75);
--surface-2: oklch(96% 0.01 70);
--border: oklch(85% 0.008 68);
--accent: oklch(40% 0.12 32);
--accent-fg: oklch(99% 0 0);
--focus: oklch(40% 0.12 32);
--font-body: 'Source Serif 4', Georgia, serif;
--font-display: 'Playfair Display', 'Georgia', serif;
--font-mono: 'IBM Plex Sans', system-ui, sans-serif;
--radius: 0px;
--radius-sm: 0px;
--shadow: none;
--shadow-lg: 0 8px 28px oklch(11% 0.008 55 / 0.14);
}Where it came from
Origin: Print magazine design translated to the web — publications including The Guardian, NYT and Bloomberg
As newspapers and magazines moved online, some — The Guardian, The New York Times, Bloomberg Businessweek's interactive features — brought their full editorial vocabulary: mixed serif/sans pairings, pull quotes, sidebars, full-bleed photos with caption treatment. Medium (2012) made a simplified version accessible to bloggers. The editorial style on the web is a deliberate choice to say 'this is read, not used' — signalling depth of content over interactive utility.
How to spot it
- Mixed typeface system: strong display serif with utility sans for body
- Full-bleed or edge-to-edge image treatment with caption overlays
- Horizontal rules, pull quotes, footnotes — print vocabulary in HTML
- Column grid controlling line length — usually 55–75 characters
Trade-offs
| Strengths | Weaknesses |
|---|---|
| Long-form content is deeply readable | Poorly suited to interactive or data-dense applications |
| Rich typographic hierarchy serves scanning and deep reading both | Large display type at full bleed requires careful responsive handling |
| Photographs and illustrations integrate with text rather than breaking it | Serif-heavy editorial systems often feel wrong in dark mode |
In the wild
- The New York Times digital features
- Bloomberg Businessweek interactive stories
- The Guardian article design
Use it when
Long-form content sites, journalism, knowledge bases or any product where reading is the core experience.