Editorial / Magazine Font Stack

Editorial / Magazine Font Stack

Magazine and editorial websites need typographic sophistication. This stack pairs display serif fonts for impact headings with highly readable body serifs.

Heading Stack

.heading {
  font-family: "Playfair Display", Didot,
    "Bodoni MT", "Noto Serif Display",
    "URW Palladio L", P052, Sylfaen, Georgia, serif;
}

Body Stack

.body {
  font-family: "Source Serif 4", "Libre Baskerville",
    "Iowan Old Style", "Palatino Linotype",
    Palatino, Georgia, "Times New Roman", serif;
}

Heading Font Breakdown

Font	Where
Playfair Display	Google Font — high-contrast Didone style
Didot	macOS — classic French Didone
Bodoni MT	Windows — Italian Didone
Noto Serif Display	Google Fonts — excellent international coverage
URW Palladio L / P052	Linux — free Palatino-like faces
Sylfaen	Windows — wide Unicode serif
Georgia	Universal — screen-optimised fallback

Contrast and Rhythm

Editorial typography relies on typographic contrast between headings and body text. The heading stack uses high-contrast Didone fonts (thick/thin stroke variation), while the body stack uses old-style serifs with more even stroke width for sustained reading comfort.

CSS for Magazine Layout

.heading {
  font-family: "Playfair Display", Didot, Georgia, serif;
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.body {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: clamp(1.05rem, 1.2vw, 1.25rem);
  line-height: 1.7;
  max-width: 65ch;
}

.drop-cap::first-letter {
  font-family: "Playfair Display", Didot, Georgia, serif;
  font-size: 3.5em;
  float: left;
  line-height: 0.8;
  margin-right: 0.1em;
}