# Editorial magazine — style recipe

## The idea

- Reads like a well-set magazine: confident serif headlines, generous columns, pull quotes and fine rules.

## Use it when

- Publications, blogs and journals
- Brands built on writing and stories
- Long pages people actually read

## Avoid it when

- The page is mostly buttons and forms
- The audience scans rather than reads

## Principles

- A strong serif for headlines, a readable serif for text
- Text columns of 60–75 characters
- Pull quotes and drop caps break up long text
- Fine horizontal rules and small caps for section labels
- Warm off-white paper colour instead of pure white
- Images are captioned like in print

## Colour

- Newsprint (background): #faf7f2
- Linen (surface): #f0ebe3
- Press black (text): #1c1a17
- Caption grey (muted): #5c5650
- Oxblood (accent): #9b2c1f
- Fine rule (border): #d9d1c5
- Text on background contrast: 16.25:1

## Type

- Headings: Fraunces, weights 600, 800 — High-contrast display serif; use the heavy weight for the lead story
- Body: Source Serif 4, weights 400, 600 — Comfortable reading size, 18–20 px, generous line height
- Scale: 14px, 18px, 22px, 30px, 44px, 68px
- Two serifs with different jobs; italic for standfirsts and quotes.

## Spacing and shape

- Base unit: 8px
- Spacing steps: 8px, 16px, 24px, 40px, 72px
- Vertical rhythm follows the body line height.
- Corner radii: 0px, 2px
- Borders: Hairline rules between stories and around pull quotes
- Shadows: None

## Imagery and motion

- Imagery: Captioned images in a frame-like crop; small line illustrations work too.
- Motion: None; the page should feel still and printed.

## Do

- Lead with a big headline and a one-line standfirst
- Use a pull quote to break a long section
- Label sections in small caps

## Don't

- No sans-serif headlines
- No full-width text lines on desktop
- No bright gradients