Editorial style in web design: magazine typography for the web
One story in two treatments, where the style came from, the parts of a magazine page, six editorial elements, type pairs and the style for a brand — with live examples and prompts for images.
In short
The editorial style brings the magazine spread to the web: a large serif headline with a voice, a small kicker that says where you are, a lead that explains why to read, a big photo with a caption, a drop cap at the start, pull quotes for those who skim and wide margins like on paper. Typography does the main work — usually a serif paired with a grotesque — and each story can have its own layout within one system. The style suits media, long reads, case studies, interior, fashion, food and architecture brands — anyone who sells through stories. It works when the measure stays comfortable, the serif is sturdy enough for screens and the decorative elements carry meaning rather than just look like a magazine.
One story, two treatments
The same text and photo. Switch to the magazine: a kicker, a serif headline, a byline under a rule, a caption, a drop cap and a pull quote.
Nothing was added to the content — only structure and voice. The blog template treats every text alike; the magazine gives this one its own character, and the reader understands what the story is about before reading the first line.
Where the editorial style came from
Editorial magazine-style website article page about architecture, desktop screenshot, large high-contrast serif headline, small uppercase kicker in a lime label, byline and reading time under a thin rule, a full-width black-and-white photograph of a modern brick house with a deep canopy and a small caption, two-column body text with a large drop cap, a big pull quote in serif italic between thick rules, off-white paper background, graphite text, wide margins, flat 2D UI design, aspect ratio 16:9The style was formed by magazine art directors of the 20th century — Alexey Brodovitch at Harper’s Bazaar turned the spread into a composition of type, photography and white space. On the web the idea of art-directed articles, where each post gets its own layout, spread in the late 2000s among designers who wanted blogs to feel like magazines.
Today the style lives in media, long reads and brand content: case studies, collections, recipes, stories about places.
The parts of a magazine page and their job
Each element answers a question of the reader — that is why it stays.
| Element | Question it answers |
|---|---|
| Kicker | what section am I in? |
| Serif headline | what is the story and its tone? |
| Lead | why should I read it? |
| Byline and reading time | who wrote it and how long will it take? |
| Photo with a caption | what exactly am I looking at? |
| Pull quote | what is the main thought, if I only skim? |
| Section numbers | where am I in a long text? |
Six editorial elements
Each on its own — to see what it adds to a page.
Type pairs
The voice of the editorial style is made by the contrast of two typefaces — or of two sizes of one.
Serifs read well on modern screens if they are sturdy: a large x-height, moderate contrast, no hairline strokes. Thin display serifs are left for large headlines, and the text gets a serif or a grotesque made for reading.
The editorial style for a brand
Magazine cover style website hero for an online interior brand, a huge serif masthead across the top, a large photograph of a sunlit living room with sage-green walls and a linen sofa, small cover lines in a clean grotesque on the left, issue number and season in small caps, an acid-lime round sticker, off-white and graphite palette, print-inspired editorial web design, crisp typography, aspect ratio 4:5A brand does not have to be a magazine to use the style: a collection presented as an issue, a case study laid out as a feature, a recipe with a lead and a pull quote. The catalogue stays a catalogue — the editorial treatment goes to the pages that tell stories.
The editorial style in code: 2 examples
A drop cap that uses initial-letter where the browser supports it, and the typography of a story with a pull quote.
A drop cap
A float for every browser, initial-letter where it works — the letter sits exactly on three lines.
/* A float works everywhere */
.story > p:first-of-type::first-letter {
float: left;
margin: 0.1em 0.12em 0 0;
font: 700 3.4em/0.8 Georgia, "Times New Roman", serif;
}
/* Where supported, the letter takes exactly three lines */
@supports (initial-letter: 3) or (-webkit-initial-letter: 3) {
.story > p:first-of-type::first-letter {
float: none;
margin: 0 0.12em 0 0;
-webkit-initial-letter: 3;
initial-letter: 3;
}
}The typography of a story
A kicker, a serif headline, a comfortable measure, a pull quote between rules and a quiet caption.
.story {
max-width: 42rem; /* about 65 characters per line */
margin-inline: auto;
font: 400 1.125rem/1.65 Georgia, "Times New Roman", serif;
}
.story__kicker {
font: 600 0.75rem/1 var(--font-sans);
letter-spacing: 0.14em;
text-transform: uppercase;
}
.story__title {
font: 700 clamp(2.5rem, 6vw, 4.5rem)/1 Georgia, "Times New Roman", serif;
letter-spacing: -0.02em;
}
.story__lead { font-size: 1.375rem; line-height: 1.45; }
/* The pull quote breaks out of the text column on wide screens */
.pull {
margin: 2.5rem 0;
padding-block: 1.25rem;
border-block: 3px solid;
font: italic 400 clamp(1.5rem, 3vw, 2.25rem)/1.25 Georgia, "Times New Roman", serif;
}
@media (min-width: 64rem) {
.pull { margin-inline: -6rem; }
}
figcaption {
margin-top: 0.5rem;
font: 0.8125rem/1.4 var(--font-sans);
color: var(--color-text-muted);
}7 rules of the editorial style
-
01
Contrast of typefaces
A serif and a grotesque, or two very different sizes of one face.
-
02
A kicker and a lead
The reader knows where they are and why to read before the first paragraph.
-
03
A comfortable measure
60–70 characters, whatever the width of the screen.
-
04
A photo with a caption
The caption tells what is not visible in the picture.
-
05
Pull quotes for skimmers
One or two per story, with the main thought, not a repeat of the next line.
-
06
A layout per story, a system per site
Layouts vary, but fonts, sizes and spacing come from one scale.
-
07
Margins like on paper
Space around the text is part of the voice.
Common mistakes with the editorial style
-
A hairline serif in the text
Beautiful in a headline, it falls apart in paragraphs on ordinary screens.
-
Columns you have to scroll back up
On paper you move your eyes; on a screen you scroll back to the top of the second column.
-
One template for every story
A magazine look without a magazine idea.
-
A pull quote that repeats the next line
The reader reads the same sentence twice in a row.
-
Photos without captions
The picture decorates instead of telling.
-
Four typefaces
The voice turns into noise.
Questions about the editorial style
What is editorial design on the web?
A way to lay out pages like magazine spreads: a serif headline, a kicker and a lead, photos with captions, pull quotes and a layout that fits the story.
Are serifs readable on screens?
On modern screens — yes, if the serif is sturdy: a large x-height, moderate contrast, no hairline strokes.
Who is the editorial style for?
Media, long reads, case studies and brands of interiors, fashion, food and architecture — anyone who sells through stories.
How does it work on a phone?
Columns merge into one, the headline gets smaller but stays the largest element, pull quotes become full-width breaks between paragraphs.
Does the style need many photos?
No, a few good ones with captions are enough. Typography alone can carry an editorial page.
How do I make a drop cap?
With ::first-letter and float for every browser, and initial-letter where it is supported — then the letter sits exactly on the chosen number of lines.
Online form
A site that reads
like a magazine
I design media sites, long reads and case pages with strong typography and a layout for every story. Tell me about the project — I answer within one working day.