# Editorial / Magazin

Auch bekannt als: Editorial Design, Magazinlayout, Zeitungs-Web, Longform-Editorial  
Ära: Print-Erbe; Web-Hochphase 2012 bis heute (NYT Snow Fall 2012 als Meilenstein)  
Seite: https://designforai.dev/de/style/editorial-magazine

## Merkmale

- Serifen-Display-Headlines gepaart mit einer klaren Sans für UI und Bildunterschriften
- mehrspaltiges Artikellayout, Initialen, Pull-Quotes, Autorenzeilen, Datumszeile
- großzügige Zeilenlänge (60-75 Zeichen), großer Durchschuss, klarer vertikaler Rhythmus
- randloses Hero-Bild mit Bildunterschrift, dann eine schmale Lesespalte
- Haarlinien, Kapitälchen als Abschnittslabels, nummerierte Abschnitte
- zurückhaltende Palette: Papierweiß, Tintenschwarz, ein redaktioneller Akzent
- Motion sind langsame Scroll-Reveals von Bildern, sonst nichts

Palette: #fbfaf7 Papier, #141414 Tinte, #8a1c1c Akzent (Ochsenblut), #6b6b6b Bildunterschriftengrau, #e6e2da Linien

Schrift: Playfair Display, Fraunces oder Newsreader für Headlines (700-900, 48-96px), Source Serif 4 oder Lora für Fließtext bei 19-21px mit line-height 1.7, IBM Plex Sans oder Work Sans 12-13px Versalien für Labels

## Do

- setze Fließtext bei 19-21px in einer 680px-Spalte; Lesekomfort ist das Produkt
- nutze eine echte typografische Hierarchie: Kicker, Headline, Deck, Autorenzeile, Fließtext, Pull-Quote, Bildunterschrift
- gib jedem Bild eine Bildunterschrift und einen Credit

## Don't

- nutze keine Karten für Artikel; trenne sie mit Linien, Weißraum und Schriftgrößen
- zentriere keinen Fließtext
- nutze nicht mehr als zwei Schriften plus eine Mono für Daten

Bekannt dafür: 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

Baue die Seite als redaktionelles Magazinlayout. Papierhintergrund #fbfaf7, Tinte #141414, Akzent #8a1c1c, Bildunterschriftengrau #6b6b6b, Haarlinien #e6e2da bei 1px. Headlines in Fraunces 800 bei 88px Desktop / 44px mobil, line-height 1.02, letter-spacing -0.02em; Decks in Fraunces 400 kursiv bei 24px; Fließtext in Source Serif 4 bei 20px, line-height 1.7, Spalte max-width 680px; Kicker und Autorenzeilen in IBM Plex Sans 12px Versalien mit 0.1em Tracking. Randloses Hero-Bild 16:9 mit Bildunterschrift darunter. Ergänze eine Initiale im ersten Absatz (3 Zeilen hoch), Pull-Quotes bei 32px, die auf Desktop 80px über die Spalte hinausragen, und nummerierte Abschnittsüberschriften. Keine Karten, keine Schatten, kein Radius; trenne Abschnitte mit 1px-Linien und 96px Abstand. Bilder blenden beim Scrollen über 600ms ein; sonst bewegt sich nichts. Footer als dreispaltiges Impressum in Kapitälchen.