Editorial

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 emphasized, what is quiet, and how the reader’s eye should move.

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: body paragraphs read best between roughly 45 and 75 characters per line. Constrain the column width rather than letting text stretch across the full viewport.
• Build a real column grid for long-form content. Where content is dense enough, consider multiple columns at wide viewports rather than one very long single column.
• 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.
• 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 color restrained: let typography, imagery, and layout carry the visual interest, and use no more than one accent color 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.
• Unbroken walls of text with no typographic pacing, section breaks, or pull quotes.
• Treating images as generic background decoration rather than captioned, art-directed content.
• More than one accent color competing with the reading experience.
• Styling captions identically to body text, which erases the distinction between narrative copy and supporting material.

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, rather than stretching edge to edge or being cramped into a narrow sliver?
• Does every image have a caption or credit treated as distinct from body copy?
• Does the page have a clear rhythm — passages of dense reading broken up by rules, spacing, images, or pull quotes — rather than one undifferentiated block of content?

Editorial — Specification

Definition

Editorial is a web-interface design style modeled 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.

Core principles

• Typographic hierarchy as structure. Type contrast, not color or containers, is the primary organizing device.
• Grid-based composition. Content is set on a considered column and measure system borrowed from print layout.
• Imagery as content. Images are captioned, art-directed, and integrated into the narrative, not used as generic decoration.
• Restrained color in service of legibility. Color 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.

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.
• 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.
• A restrained, mostly neutral palette with a single accent color for links and emphasis.

Rules

1. Controlled measure. Body copy line length stays between 45 and 75 characters per line at the primary reading viewport. Acceptance criterion: Measuring the average characters-per-line of rendered 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 color. No more than one accent color is used for links, emphasis, or interactive states outside the near-black/neutral text palette. Acceptance criterion: Inspecting rendered color swatches for links and emphasized text finds exactly one non-neutral hue in use across the page.

6. Multi-column long-form layout. At desktop width, body content exceeding 400 words is laid out either in two or more columns or within a single column whose measure satisfies Rule 1. Acceptance criterion: For a body section exceeding 400 words at desktop width, inspecting the rendered layout shows either a column-count of 2 or more, or a single-column container whose measured line length satisfies the 45–75 character range from Rule 1.

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.

Avoid

• Sans-only or serif-only pairings that erase the contrast between headline and body voice.
• Long, unbroken text blocks with no typographic pacing, section breaks, or pull quotes.
• Images used as generic background decoration without a caption or credit mechanism.
• More than one accent color competing with the reading experience.
• Captions styled identically to body text.

Acceptance criteria

• Rule 1: 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 color is used for links and emphasis.
• Rule 6: Long-form body content (>400 words) uses multi-column layout or a measure-compliant single column at desktop width.
• Rule 7: Pull quotes are visibly larger than body text and separated from surrounding paragraphs.

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 45–75 character range required by Rule 1.
• Margins and section spacing reduce proportionally on narrower viewports but never below a defined minimum that would violate Rule 4.
• Captions remain immediately adjacent to their associated image after any reflow, preserving Rule 3.
• The single-accent-color rule (Rule 5) and the headline/body typographic distinction (Rule 2) hold unchanged at every breakpoint.