Typography-led · 2010s–present
Serif Revival
A return to classical serif typefaces and generous leading, treating reading as the core interaction.
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(22% 0.048 148) - --fg
oklch(93% 0.018 80) - --muted
oklch(66% 0.028 120) - --surface
oklch(28% 0.052 148) - --surface-2
oklch(18% 0.04 148) - --border
oklch(36% 0.042 148) - --accent
oklch(80% 0.13 78) - --accent-fg
oklch(18% 0.035 50) - --focus
oklch(80% 0.13 78)
| Token | Value |
|---|---|
| --font-body | 'Lora', Georgia, 'Times New Roman', serif |
| --font-display | 'DM Serif Display', Georgia, serif |
| --font-mono | ui-monospace, 'SFMono-Regular', monospace |
| --radius | 4px |
| --radius-sm | 3px |
| --shadow | 0 1px 3px oklch(0% 0 0 / 0.3) |
| --shadow-lg | 0 10px 32px -4px oklch(0% 0 0 / 0.4) |
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Lora:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap');
:root {
--bg: oklch(22% 0.048 148);
--fg: oklch(93% 0.018 80);
--muted: oklch(66% 0.028 120);
--surface: oklch(28% 0.052 148);
--surface-2: oklch(18% 0.04 148);
--border: oklch(36% 0.042 148);
--accent: oklch(80% 0.13 78);
--accent-fg: oklch(18% 0.035 50);
--focus: oklch(80% 0.13 78);
--font-body: 'Lora', Georgia, 'Times New Roman', serif;
--font-display: 'DM Serif Display', Georgia, serif;
--font-mono: ui-monospace, 'SFMono-Regular', monospace;
--radius: 4px;
--radius-sm: 3px;
--shadow: 0 1px 3px oklch(0% 0 0 / 0.3);
--shadow-lg: 0 10px 32px -4px oklch(0% 0 0 / 0.4);
}Where it came from
Origin: Long-form publishing, literary magazines, editorial web
Screen serifs were dismissed as hard to render until sub-pixel hinting and high-DPI displays made them practical. Long-form platforms adopted serif body text as a signal of considered, unhurried reading. Typefaces designed specifically for screens — not just converted from print metal — drove the revival, and independent publishing platforms made it a common look for text-first products.
How to spot it
- Serif typeface for both body and display
- Generous line-height and measure, typically 60–75 characters
- Warm neutral palettes — cream, charcoal, near-black ink
- Restrained decoration: the type itself is the ornament
Trade-offs
| Strengths | Weaknesses |
|---|---|
| Signals craft and editorial intent | Weights under 400 disappear on older LCDs |
| Excellent reading endurance for long-form content | Strong personality can overshadow product chrome |
| Distinctive in a sans-heavy web landscape | Bad pairing choices undercut the intended refinement |
In the wild
- Long-form editorial and digital publishing platforms
- Literary and cultural brand identities
- Book-like reading experiences built on the web
Use it when
The product is words — articles, books, essays — and reading quality is the primary metric.