See this style applied to a real page — identical content, different stylesheet.
Open live preview →About This Style
Editorial layout is print typography translated without apology: a serif display face, a measured column, a clear ladder from kicker to headline to standfirst to body. It reads as credible because the hierarchy is borrowed from publications that have refined it for a century.
The screen-specific problem is width. Print measures around 60–70 characters per line; a browser will happily give you 140. Fixing that single constraint — a max-width on the body column — does more for the style than any typeface choice.
Main Features:
- A real type ladder: Kicker, headline, standfirst, body, caption. Five distinct roles, each with its own size, weight and colour.
- Measured line length: 62–68 characters for body copy. Anything wider and the eye loses the return sweep.
- Serif display, sans body: The classic pairing. Serif for voice, sans for extended reading — or serif throughout if the face is well hinted.
- Asymmetric columns: A wide body column beside a narrow note column, not a symmetrical 50/50 split.
- Rules instead of boxes: Hairline rules and whitespace separate content. Cards and shadows are what magazines do not use.
Example AI Prompt
Design an editorial page layout.
Typography:
- Display face: a serif with a strong contrast axis, used for the headline only. Body: a neutral sans or a text serif at 17-19px with line-height 1.6.
- Build a five-step ladder: kicker (11-12px, letter-spaced uppercase), headline (clamp 2.4rem to 4rem, tight leading), standfirst (1.15rem, lighter colour), body, caption (0.8rem, muted).
Measure:
- Body column max-width 62ch. This is the single most important constraint — do not let text run wider.
- Use a two-column asymmetric grid for sections: 8 columns of copy, 4 of notes.
Styling:
- No cards, no shadows, no rounded corners. Separate blocks with 1px hairlines and whitespace.
- One accent colour used sparingly — a rule, a kicker, a link underline.
Constraints:
- Do not justify text; ragged-right is correct for the screen.
- Keep paragraph spacing at 1em and drop any indent — indents plus spacing reads as a mistake.
- Headline leading must be below 1.1; anything looser loses the print feel.Theme CSS Snippets
Editorial theme variables. Note --card-bg is transparent and --card-border-radius is 0 — the style is defined by what it refuses to draw.
body.theme-editorial {
--page-bg: #fbfaf7;
--page-bg-gradient: none;
--text-color: #2b2a27;
--heading-color: #14130f;
--link-color: #8a2f1d;
--border-color: #ded9cf;
--card-bg: transparent;
--card-shadow: none;
--card-hover-shadow: none;
--header-bg: #fbfaf7;
--header-text-color: #14130f;
--prompt-bg: #f2efe8;
--prompt-text-color: #3a3833;
--button-bg: #14130f;
--button-text-color: #fbfaf7;
--button-hover-bg: #8a2f1d;
--card-border-radius: 0;
--base-font: var(--font-lato);
--heading-font: var(--font-serif);
}Where it fits
Use it when
- Long-form articles, essays, documentation with a voice, or a company blog that wants authority.
- Product launches that lean on narrative rather than feature grids.
- Any page where reading is the primary action.
Avoid it when
- Dense application UI. A serif ladder in a dashboard slows scanning.
- Pages where users compare items — editorial layout has no table grammar.
- If you cannot source a good display serif. A weak serif is worse than a neutral sans.
Resource Download
A working single-page demo in this style — the HTML and one self-contained stylesheet, no build step.
Download editorial.zip