Applying an Editorial visual direction

You are being asked to apply an Editorial visual direction to a web interface. This document gives you framing and recommendations for that direction. It does not tell you what page, product, or feature to build — apply the guidance below to whatever interface you are already working on, at whatever scope that work requires.

What “Editorial” means here

Editorial design borrows the conventions of print publications — magazines, newspapers, and printed journals — and applies them to a screen. The defining move is treating typography and layout as the primary structuring devices, the way a print art director would, rather than treating them as a neutral container for content. Text is set on a considered grid, imagery is integrated as part of the story rather than as generic decoration, and the whole composition should feel authored: like someone made deliberate editorial choices about what is emphasised, what is quiet, and how the reader’s eye should move.

“Authored” is the operative word, and it is more literal than it sounds. A published article carries furniture — a kicker above the headline, a deck summarising it below, a byline naming who wrote it, captions crediting the images. Those parts are most of what separates a page that reads as written and edited from one that reads as a template someone filled. Well-set text without them still feels assembled.

The style is quiet by discipline. The craft’s own formulation is that typography should disappear so the words can do their job. That is what separates Editorial from directions where type is the spectacle: if a reader finishes and remembers the typeface, it was probably Art Deco or Maximalist, not this. It is also what separates it from Swiss, its closest neighbour — Swiss uses a single neutral sans where you pair two contrasting families, shows off its grid where you merely use one, and is deliberately anonymous where your page is signed.

Recommendations

• Pair a distinctive display or serif typeface for headlines with a clean, functional sans-serif (or a second serif with a clearly different character) for body text and interface labels. The contrast between the two should be legible at a glance.
• Control line length, and match it to the column count. A single column of body text reads best between 45 and 75 characters per line, with 66 as the target — roughly a 33em column. If you set multiple columns, tighten each to 40–50 characters: a narrow column running at a wide measure is harder to read than either extreme alone.
• Build a real column grid for long-form content, and give it a vertical counterpart: derive your spacing from the body line-height so type aligns across columns and down the page, rather than picking margins by eye.
• Include the article furniture. A kicker or a deck, and a byline. Set each distinctly from both the headline and the body — a deck is conventionally one size down from the headline, often italic or lighter; a byline sits below the headline or deck. This is the cheapest, highest-leverage thing on this list.
• Treat images as content: give them intentional placement (full-bleed, art-directed crops, or a defined position within the grid) and pair them with a caption or credit line set in a visually distinct style from body text.
• Break long passages with subheads. They give the reader a way to navigate and to re-enter after looking away.
• Use thin rules and generous, purposeful spacing to separate sections — a masthead from an article, one article from another — the way a printed page uses margins and rules rather than boxes.
• Keep colour restrained: let typography, imagery, and layout carry the visual interest, and use no more than one accent colour for links, emphasis, or interactive states.
• Vary pacing deliberately. A large pull quote, a wide image, or a section break can serve the same purpose a print spread uses to give the reader’s eye a place to rest.

Avoid

• Sans-only or serif-only pairings that erase the contrast between headline and body voice.
• A page with no kicker, deck, or byline. However well the text is set, it will read as assembled rather than authored.
• Multi-column layouts that keep a single-column measure, running each column too long for its width.
• Unbroken walls of text with no typographic pacing, section breaks, subheads, or pull quotes.
• Treating images as generic background decoration rather than captioned, art-directed content.
• More than one accent colour competing with the reading experience.
• Styling captions identically to body text, which erases the distinction between narrative copy and supporting material.
• Display typography that asks to be looked at rather than read through.
• Showing off the grid as a visible structural device — use it, do not exhibit it.
• Vertical spacing picked by eye rather than derived from the body line-height.

A working order

Editorial layout is a process before it is a result, and the order matters more than any single decision. This is the sequence a working editorial designer follows.

1. Gather every asset first — images, logo, the real text — into one file before making a single layout decision. Composition on placeholder content is composition you will redo.
2. Read the content and digest it. Do not pour paragraphs into a fixed column. Find the one phrase or figure that deserves to become a hero-scale typographic element, and pull it out of the sentence it is buried in.
3. State the page’s goal — the one action it should drive — before you place anything. That goal decides what gets visual priority.
4. Collect references from more than one medium. A print poster among the web references is what stops the result from resembling any single source.
5. Restrict the toolkit to five things: one or two type families, one or two accent colours plus neutrals, one grid, images in bounded containers, and white space. Nothing else.
6. Declare a closed spacing scale and a grid, then never deviate. A working scale is 10 / 20 / 40 / 80 / 160px, with a 12-column grid and fixed 40px side margins. Every gap, margin, and padding is a member of that scale — no arbitrary values.
7. Check both axes. Each new element is aligned against its neighbours vertically and horizontally, not just against the grid. Anything off by a pixel gets corrected.
8. Add depth with placement, not effects. One image behind the text, one in front, and a locked palette — rather than a shadow.
9. Place compound blocks as single units. A paragraph plus its CTA moves together, positioned by one of three strategies: a fixed internal proportion, alignment to another element, or a fixed distance from a structural element such as the nav.
10. Cut before you accommodate. If a composition is overloaded, remove elements rather than shrink everything to fit.

Then, and only then, translate downward to mobile — never design mobile first and scale up, because it is far easier to simplify a rich layout than to enrich a sparse one.

11. Collapse navigation into a menu control.
12. Invert orientation: what runs horizontally on desktop runs vertically on mobile.
13. Shrink headlines, but hold body text at a 16px floor, and let CTAs stay the same size or grow rather than shrink.
14. Rebuild the grid with at least six columns, specifically so a 2/3–1/3 asymmetry survives. Four columns collapse every block to the same edge and the composition goes symmetrical without you deciding it.

How to check your own work

Before considering the result finished, look at it and ask:

• Do headlines and body text clearly read as two different typographic voices?
• If I measure a line of body text, does it fall roughly within a comfortable reading length? And if I set columns, did I tighten the measure to suit them, or leave it at the single-column width?
• Can I point at a kicker or deck, and at a byline? If not, the page is not yet editorial, whatever else is right about it.
• Does every image have a caption or credit treated as distinct from body copy?
• Do the vertical gaps resolve to multiples of the body line-height, or did I pick them by eye?
• Does the page have a clear rhythm — passages of dense reading broken up by rules, spacing, images, subheads, or pull quotes — rather than one undifferentiated block of content?

Editorial — Specification

Definition

Editorial is a web-interface design style modelled on print-publication design. It builds a clear typographic hierarchy from a serif-and-sans (or comparably contrasting) type pairing, structures content on a considered reading grid, treats imagery as narrative content rather than decoration, and paces dense and open sections deliberately, producing an interface that reads as authored rather than assembled.

Authorship is the operative word. The style is not simply well-set text: it carries the furniture of a published article — a kicker, a deck, a byline, captions and credits — because those are what make a page read as something a person wrote and an editor placed, rather than a template that was filled.

Editorial is quiet by discipline. The craft’s own formulation is that typography should disappear so the words can do their job, which separates it from styles where type is the spectacle: it is not Art Deco and not Maximalist, both of which ask the reader to look at the type rather than through it. It is also not Swiss, its closest neighbour — Swiss uses one neutral sans where this style pairs two contrasting families, exhibits the grid where this style merely uses one, and is deliberately anonymous where this style is signed. A Swiss page succeeds when its structure is legible; an Editorial page succeeds when a reader moves through long-form content to the end.

Core principles

• Typographic hierarchy as structure. Type contrast, not colour or containers, is the primary organizing device.
• Grid-based composition. Content is set on a considered column and measure system borrowed from print layout, with a baseline rhythm holding it vertically.
• Imagery as content. Images are captioned, art-directed, and integrated into the narrative, not used as generic decoration.
• Restrained colour in service of legibility. Colour supports reading; it does not compete with it.
• Deliberate pacing. Dense reading passages are broken up intentionally, the way a print spread uses rules, images, and pull quotes.
• Typography that disappears. Consistency over novelty and rhythm over surprise; the reader should finish the article without having noticed the type.

Visual characteristics

• A serif (or otherwise distinctive) display typeface for headlines, paired with a clearly contrasting sans-serif for body and interface text.
• A defined column grid with controlled line length for body copy, and a vertical rhythm derived from the body line-height.
• The furniture of a published article: a kicker above the headline, a deck below it set one size down and often italic or lighter, and a byline naming the author.
• Captions or credit lines set visually apart from body copy, adjacent to their images.
• Full-bleed or art-directed imagery integrated into the layout rather than treated as background filler.
• Thin rules and generous, purposeful spacing separating sections, in place of heavy containers.
• Subheads breaking long passages into navigable sections.
• A restrained, mostly neutral palette with a single accent colour for links and emphasis.

Rules

1. Controlled measure. Body copy in a single column stays between 45 and 75 characters per line at the primary reading viewport, targeting 66 — roughly a 33em column. Acceptance criterion: Measuring the average characters-per-line of rendered single-column body paragraphs at the primary reading viewport falls between 45 and 75.

2. Distinct headline voice. Headline elements (h1, h2) use a typeface family visibly different from the body-text family. Acceptance criterion: Inspecting computed font-family for headline elements shows a different value than the computed font-family used for body paragraph text.

3. Captioned imagery. Every content image is accompanied by a caption or credit line set in a visually distinct style from body copy. Acceptance criterion: For each content image or figure, an adjacent caption element exists whose computed font-size or font-weight differs from the surrounding body paragraph’s computed value.

4. Marked section breaks. Section boundaries are marked by either a visible thin rule or vertical spacing of at least twice the body line-height. Acceptance criterion: Measuring the gap between two consecutive sections confirms either a visible rule element or a spacing value of at least 2x the body text’s line-height.

5. Single accent colour. No more than one accent colour is used for links, emphasis, or interactive states outside the near-black/neutral text palette. Acceptance criterion: Inspecting rendered colour swatches for links and emphasized text finds exactly one non-neutral hue in use across the page.

6. Long-form layout at a column-appropriate measure. At desktop width, body content exceeding 400 words is laid out either in a single column satisfying Rule 1, or in two or more columns each measuring 40 to 50 characters per line. Acceptance criterion: For a body section exceeding 400 words at desktop width, inspecting the rendered layout shows either a single-column container measuring 45–75 characters per line, or a column-count of 2 or more with each column measuring 40–50 characters per line.

7. Distinguished pull quotes. Any pull quote is set at a larger font size than body text and is visually separated from surrounding paragraphs by indentation, a rule, or additional whitespace. Acceptance criterion: Inspecting a pull-quote element’s computed font-size shows a value greater than the body paragraph’s computed font-size, and a visible margin, indent, or rule separates it from adjacent paragraphs.

8. Article furniture present. A long-form page carries a kicker or a deck, and a byline, each set in a style distinct from both the headline and the body text. Acceptance criterion: A kicker or deck element exists adjacent to the headline, and a byline element naming the author exists below the headline or deck; the computed font-size, font-weight, or font-style of each differs from both the headline’s and the body paragraph’s.

9. Spacing from a closed system. Every gap, margin, and padding is a member of one declared, closed spacing scale — either multiples of the body line-height or an authored geometric scale (for example 10 / 20 / 40 / 80 / 160px). No arbitrary values. Acceptance criterion: Collecting every computed vertical margin, gap, and padding on the page yields values drawn from a single documented set, within a 2px tolerance; any value outside that set is a defect.

10. A declared grid. Content is laid out on an explicit column grid with fixed side margins — conventionally twelve columns at desktop — and the mobile grid keeps at least six columns so an asymmetric split survives the breakpoint. Acceptance criterion: Block left and right edges align to a consistent column system at each breakpoint, side margins are equal and fixed, and at the mobile breakpoint at least one content block occupies a fraction of the grid rather than the full width.

11. Composition before effects. Every hierarchy and legibility problem is solved with typography, colour, grid, imagery, or white space. No shadow, gradient, texture, or decorative border is required to explain why an element reads the way it does. Acceptance criterion: The layout can be fully described using only those five devices, and removing every shadow, gradient, and texture from the page leaves its hierarchy and legibility unchanged.

Avoid

• Sans-only or serif-only pairings that erase the contrast between headline and body voice.
• A page with no kicker, deck, or byline, which reads as assembled rather than authored no matter how well the text is set.
• Multi-column layouts that keep a single-column measure, running each column too long for its width.
• Long, unbroken text blocks with no typographic pacing, section breaks, subheads, or pull quotes.
• Images used as generic background decoration without a caption or credit mechanism.
• More than one accent colour competing with the reading experience.
• Captions styled identically to body text.
• Display typography that asks to be looked at rather than read through, which belongs to Art Deco or Maximalist rather than here.
• Exhibiting the column grid as a visible structural device, which is Swiss.
• Arbitrary vertical spacing that does not resolve to the baseline rhythm.

Acceptance criteria

• Rule 1: Single-column body line length measures 45–75 characters at the primary reading viewport.
• Rule 2: Headline and body text use visibly different font families.
• Rule 3: Every content image has an adjacent, visually distinct caption.
• Rule 4: Every section break has a visible rule or spacing of at least 2x body line-height.
• Rule 5: Exactly one accent colour is used for links and emphasis.
• Rule 6: Long-form content is single-column at 45–75 characters, or multi-column at 40–50 per column.
• Rule 7: Pull quotes are visibly larger than body text and separated from surrounding paragraphs.
• Rule 8: A kicker or deck and a byline are present and typographically distinct.
• Rule 9: Every gap, margin, and padding belongs to one declared, closed spacing scale.
• Rule 10: Content aligns to a declared column grid with fixed margins, keeping six or more columns on mobile.
• Rule 11: Removing every shadow, gradient, and texture leaves hierarchy and legibility unchanged.

Blocking failures

• Body text renders at a measure outside 40–90 characters per line at the primary reading viewport, making it materially unreadable.
• No typographic distinction exists anywhere between headline and body type — a single font family, weight, and size are used across the entire page.
• A content image is presented with no caption or credit mechanism in a context where the entry’s provenance metadata requires attribution.

These conditions make the work unacceptable to ship; they are not stylistic suggestions and are not subject to designer discretion.

Responsive adaptation guidance

• Multi-column layouts (Rule 6) collapse to a single column before the reflow would push line length outside the range required by Rule 1. A column that can no longer hold 40 characters is collapsed rather than narrowed.
• Margins and section spacing reduce proportionally on narrower viewports but never below a defined minimum that would violate Rule 4, and continue to draw from the closed scale required by Rule 9.
• Headline sizes shrink at narrow viewports; body text does not, holding a 16px floor. Calls to action stay the same size or grow rather than shrink, because a control that shrinks on the viewport where it is tapped rather than clicked is moving in the wrong direction.
• The mobile grid keeps at least six columns (Rule 10). At four or fewer, every block resolves to the same edge and the layout turns symmetrical without anyone deciding it should.
• Mobile is reached by simplifying a finished desktop composition, not by designing small and enlarging: an asymmetric editorial composition cannot be recovered from a single-column one.
• Captions remain immediately adjacent to their associated image after any reflow, preserving Rule 3.
• Article furniture (Rule 8) survives every breakpoint. The deck may shorten and the byline may move, but a narrow viewport is not a reason to drop the byline — it is the cheapest element on the page and the one carrying authorship.
• The single-accent-colour rule (Rule 5) and the headline/body typographic distinction (Rule 2) hold unchanged at every breakpoint.
• On mobile and in application contexts, the measure rule governs the text container rather than the viewport: a full-width paragraph on a wide desktop application window violates Rule 1 exactly as it would on the web.