# Editorial / magazine

Also called: editorial design, magazine layout, newspaper web, long-form editorial  
Era: print heritage; web peak 2012-present (NYT Snow Fall 2012 as milestone)  
Page: https://designforai.dev/style/editorial-magazine

## Traits

- serif display headlines paired with a clean sans for UI and captions
- multi-column article layout, drop caps, pull quotes, bylines, dateline
- generous measure (60-75 characters), big leading, clear vertical rhythm
- full-bleed hero image with a caption, then a narrow reading column
- hairline rules, small caps section labels, numbered sections
- restrained palette: paper white, ink black, one editorial accent
- motion is slow scroll reveals of images, nothing else

Palette: #fbfaf7 paper, #141414 ink, #8a1c1c accent (oxblood), #6b6b6b caption grey, #e6e2da rules

Type: Playfair Display or Fraunces or Newsreader for headlines (700-900, 48-96px), Source Serif 4 or Lora for body at 19-21px with line-height 1.7, IBM Plex Sans or Work Sans 12-13px uppercase for labels

## Do

- set body text at 19-21px in a 680px column; reading comfort is the product
- use a real typographic hierarchy: kicker, headline, deck, byline, body, pull quote, caption
- give every image a caption and credit

## Don't

- do not use cards for articles; use rules, whitespace and type sizes to separate them
- do not centre body text
- do not use more than two typefaces plus one mono for data

Known for it: The New York Times, The Atlantic, Bloomberg Businessweek, Kinfolk

## CSS seed

```css
:root{--bg:#fbfaf7; --fg:#141414; --accent:#8a1c1c; --muted:#6b6b6b; --rule:#e6e2da; --radius:0; --font:'Fraunces',serif; --font-body:'Source Serif 4',serif}
```

## Prompt

Build the site as an editorial magazine layout. Paper background #fbfaf7, ink #141414, accent #8a1c1c, caption grey #6b6b6b, hairline rules #e6e2da at 1px. Headlines in Fraunces 800 at 88px desktop / 44px mobile, line-height 1.02, letter-spacing -0.02em; decks in Fraunces 400 italic at 24px; body in Source Serif 4 at 20px, line-height 1.7, column max-width 680px; kickers and bylines in IBM Plex Sans 12px uppercase 0.1em tracking. Full-bleed hero image 16:9 with a caption underneath. Add a drop cap on the first paragraph (3 lines tall), pull quotes at 32px spanning outside the column by 80px on desktop, and numbered section headings. No cards, no shadows, no radius; separate sections with 1px rules and 96px of space. Images fade in over 600ms on scroll; nothing else moves. Footer as a three-column masthead with small caps.