Editorial web design: print habits that survive phones

What editorial design brings to the web

Magazines and newspapers have spent a long time solving one problem: getting a reader from a headline into the text and keeping them there. The tools they developed (a hierarchy of headline, deck and body; a column of the right width; captions that tell you what you're looking at; pull quotes that catch a skimming eye) are just as useful for a restaurant's story page, a roaster's tasting notes or a writer's portfolio as for an article.

An editorial website layout is less about looking like a magazine and more about respecting reading. If your site has a few hundred words worth reading on most pages, it's a good fit. If it's mostly buttons and a form, editorial styling adds little.

Conventions that carry over well

Headline and deck: The deck (or standfirst) is one or two sentences under the headline that say what the piece is and why it matters. On the web it doubles as the page's opening summary and often as its meta description.
The reading measure: Print settles on roughly 45 to 75 characters per line. On screen, cap body text with max-width: 65ch or similar, even inside a wide layout, and set body text at 17px to 20px with a line height near 1.5.
Byline and date: A name and a date give writing provenance. They're worth keeping on news, journal and guide pages; on a homepage they're noise.
Section heads: Short, specific subheadings every few paragraphs. They let readers skim and are what screen reader users jump between, so use real heading levels in order.
Captions: One line under an image saying what or where it is. People read captions even when they skip body text.
Hairline rules: Thin horizontal rules between sections and items replace boxes and shadows, keeping the page quiet.

Conventions that break on phones

Multi-column body text. CSS columns make readers scroll down, back up and down again. Keep body text in one column on every screen; use columns only for short lists.
Side captions and marginalia. Notes in a margin beside the text have nowhere to go at 375px wide. Put them under the image or inline, and make sure the order still makes sense.
Pull quotes that repeat the text. A large quote pulled from the paragraph above is read twice by screen readers and can look like a duplicate on a narrow screen. Use them sparingly and put them in an aside or between paragraphs, never in the middle of a sentence.
Huge display headlines with long words. A word that fits at desktop size can overflow on a phone. Scale headlines with clamp() and check the longest word in the name at the smallest width.
Drop caps. They can work, but a three-line drop cap on a phone takes a big bite out of a narrow column. Consider them for desktop only, or drop them.

Typography for editorial pages

In print, editorial design usually means a serif for body text, sometimes with a contrasting display face. On screens that's no longer required: modern sans-serifs read comfortably at body sizes, and a single family with a range of weights gives enough contrast between headline, deck and body. What matters more is the scale. A headline several times the body size, a deck at about 1.15 to 1.3 times body, and body text that's genuinely comfortable. A light-weight headline with tight tracking gives the classic magazine feel without a second typeface.

Where editorial design fits

It suits businesses with a story and a menu to tell it through: restaurants, coffee roasters, bakeries, barbershops with a history, independent shops, writers and journals. A magazine style website also works for organisations that publish regularly, like a small charity's news or a studio's journal. It fits poorly with dashboards, booking-heavy pages and anything where the visitor wants to act in seconds rather than read.

The Editorial design system in Anticode

Anticode's Editorial system is built on these conventions: one family (Geist), an ink-on-paper palette, an oversized headline, hairline rules between sections and square-cornered images. Its body text is set larger than most of the other systems for comfortable reading. In the template gallery, Ember & Oak Roasters, a coffee subscription builder, is a warm editorial example; it's an app build in a similar style, not a page made with the Editorial system.

One honest difference from print: every Anticode design system is sans-serif, and the design gate blocks pages that fall back to serif faces, so you can't get a classic serif body text in Anticode today. If a serif is essential to the brand, export the site as HTML or a Next.js project and change the font there, knowing the gate won't check that copy. For more on choosing faces, see font pairing for websites.

Questions people ask

What is a standfirst on a website?

The short paragraph under a headline that summarises the piece. In editorial web design it sets up the page and is often reused as the description search engines show.

Do pull quotes work on mobile?

Sometimes. Keep them short, place them between paragraphs and limit them to one or two per page. On a phone, a long pull quote can look like the text has repeated itself.

Does editorial design need a serif font?

No. Serifs are traditional in print, but a well-chosen sans-serif with a clear scale reads just as well on screen and keeps the page to one family.