Design

Editorial

You might say

Lay it out like a fashion magazine, with images and text woven together.

Use publication-style typography, imagery, and pacing to tell a storyEditorial web design borrows from magazines through expressive headlines, considered image crops, captions, columns, and varied pacing. It works when the content deserves sustained reading. The layout should adapt without turning mobile into a squeezed print spread.
Concrete forms cut by lightLight study / Xuhui, 6:12 p.m.

CITY / PEOPLE / PLACE

The city
after midnight.

For one quiet hour, familiar streets become a different kind of public room.

WORDS / LIN ZHI8 MIN READ
Design Principles
  • Let the story determine the visual rhythm
  • Pair expressive headlines with readable body text
  • Use images, captions, and pull quotes as real editorial material
  • Control line length and whitespace for long reading
  • Recompose the hierarchy for each screen size

When to use it

  • Magazine and culture site
    Thirty Years of a Tea CakeBrand Story · Issue 12
  • Brand story
    "Slowness is a kind of ability."
  • Long-form case study
    Spend a Week in the Mountains
  • Travel, fashion, or architecture feature
    Annual special issue2026

When NOT to use it

  • Use dramatic layouts around thin content
    Magazine-style layouts make a data back office harder to scan.
  • Make body text secondary to decoration
    Customer-service workspace (drop-cap version)High-frequency work interfaces should prioritize scanability and processing efficiency.
  • Copy a print spread without responsive behavior
    The Buy button is hidden at the end of the third column.Conversion pages: the CTA must not get lost in the layout.
  • Mix typefaces with no assigned editorial roles
    Keeping three columns on a phone makes lines too narrow.
Anatomy
Serif Aa serif title None Aa Sans serif text Column First Drop Cap VOL.12 · P.042Masthead page number
Use a serif display face, such as Georgia or an appropriate CJK serif, to add editorial character and visual weight.
The text is sans-serif to keep it easy to read, and two types of fonts create hierarchy.
Narrow columns and short lines are the key to reading long articles. Remember to collapse to one column on small screens.
Use at the start of a suitable long article to introduce a paragraph. It does not suit every paragraph or language.
Create magazine-style editorial context with issue numbers, page numbers and column titles
AI Prompt

Editorial magazine page, large serif headline with sans-serif body, responsive columns, drop cap, masthead and issue details, warm paper background, large photography with precise captions

Typical use cases
Magazine feature

Scroll sideways to explore the full example

Lingnan Architecture ChronicleCity Special Issue · Spring
The way light falls into the building
Picture: West Kowloon Cultural District, afternoon. Photography / Cai Fang

Architecture Architects call windows "slow clocks." The morning light moves from the wall to the table, and the room has a time that does not require reminders.

Stone, wood and glass do not compete for sight. They simply keep the weather indoors and allow the occupants to refocus on the changes of the day.

— 018 —
Brand story

Scroll sideways to explore the full example

Column · Slow Observation · Issue 47
Why don’t we finish reading a book again
Text/Lin Zhi·Read about 12 minutes
Attention is the scarcest resource, you have heard this sentence 10,000 times. But the real problem is not that our attention span has become shorter, but that we have given up the sense of accomplishment of "reading" to the pleasure of "swiping through".
"Deep reading is not nostalgia,
but a kind of resistance."
Those paragraphs that require twenty pages of foreshadowing are exactly the part that short videos can never be compressed - thoughts have their own duration and refuse to be doubled. [1]
[1] "Slow Reading Manifesto", 2024, Weiming Publishing
Case study

Scroll sideways to explore the full example

Destination Special · Mogan Mountain
Go to the mountains and live for a week
Flexible hoursing in or rushing. There are only three things on this itinerary: walking, drinking tea, and watching the clouds.
One · Arrival
Settled in Yucun B&B and had bamboo shoots for dinner
Two · In the Mountains
Jianchi Trail, a half-day walk in the bamboo forest
Three · Slow Down
Baiyun Library, in a daze until sunset
Travel article

Scroll sideways to explore the full example

VOL.122026 Spring Issue · ¥25
Slow City Chronicle
SLOW CITY JOURNAL
Cover story
The resurgence of slow life
Early morning at the old street soy milk shop
There are also choices in this issue
Seven young people who have returned to the city
Hand-brew coffee and Gongfu tea
— 042 —▌▍▌▌▍▌▍▍ 6-2026-12
Further reading
CSS Multi-column LayoutMDN ↗::first-letterMDN ↗