Editorial Grid / Magazine
Also called: Magazine Layout, Editorial Design, Print-inspired Web
A printed magazine on screen: big serif headlines, drop caps, pull quotes, captions, column rules and asymmetric lead-story grids.
Design keywords
Say these words to ask for this style.
Editorial Grid borrows the toolkit of a printed magazine spread. A masthead sits over a thick-and-thin double rule, headlines are set in a high-contrast display serif (often italic), body copy is a bookish serif, and every story opens with a drop cap. Content is arranged on an asymmetric column grid — one lead story twice as wide as the briefs beside it — separated by vertical hairline column rules instead of boxes. Kickers in small red caps, numbered captions and oversized pull quotes do the decorating.
Best for
- News, magazines and longform publishers
- Brand journals and content-led marketing sites
- Culture, fashion and travel guides
- Annual reports that tell a story
Avoid for
- Dense data tools where serif body text slows scanning
- Playful kids or gaming products
- Short transactional flows (checkout, sign-up only)
✓ Do
- Open every Latin story with a 3-line drop cap (Thai: bold first line)
- Use a 2fr / 1fr / 1fr lead-story grid with 1px column rules between columns
- Kick each headline with an 11–12px uppercase red kicker and a short rule
- Caption every image: small, muted, starting with a bold label
✕ Don't
- Don’t box content in rounded cards with shadows
- Don’t set headlines in a sans-serif or centre long paragraphs
- Don’t box stories in bordered cards; use a 3px top rule only
Not to be confused with
On mobile
Collapse to one column but keep the masthead double rule, the drop cap and the red kickers; lists become hairline-ruled story rows with a serif title and a small caps meta line.
Prompt builder
Paste into Claude, Cursor, v0, Lovable or any coding agent to recreate this style.