# Editorial

> Print-magazine sensibility online: expressive type hierarchies, full-bleed photography, deliberate column grids, and content as the entire design.

- Category: Digital era
- Era: 2015–present
- Origin: Print magazine design translated to the web — publications including The Guardian, NYT and Bloomberg
- Lesson: https://design.dawit.dev/styles/editorial
- Try it: https://design.dawit.dev/styles/editorial?style=editorial

## Where it came from

As newspapers and magazines moved online, some — The Guardian, The New York Times, Bloomberg Businessweek's interactive features — brought their full editorial vocabulary: mixed serif/sans pairings, pull quotes, sidebars, full-bleed photos with caption treatment. Medium (2012) made a simplified version accessible to bloggers. The editorial style on the web is a deliberate choice to say 'this is read, not used' — signalling depth of content over interactive utility.

## How to spot it

- Mixed typeface system: strong display serif with utility sans for body
- Full-bleed or edge-to-edge image treatment with caption overlays
- Horizontal rules, pull quotes, footnotes — print vocabulary in HTML
- Column grid controlling line length — usually 55–75 characters

## Strengths

- Long-form content is deeply readable
- Rich typographic hierarchy serves scanning and deep reading both
- Photographs and illustrations integrate with text rather than breaking it

## Weaknesses

- Poorly suited to interactive or data-dense applications
- Large display type at full bleed requires careful responsive handling
- Serif-heavy editorial systems often feel wrong in dark mode

## In the wild

- The New York Times digital features
- Bloomberg Businessweek interactive stories
- The Guardian article design

## Use it when

Long-form content sites, journalism, knowledge bases or any product where reading is the core experience.

## Related styles
[Swiss / International](https://design.dawit.dev/styles/swiss.md), [Monochrome](https://design.dawit.dev/styles/monochrome.md), [Big Type](https://design.dawit.dev/styles/big-type.md)