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.
Light 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
- Brand story
- Long-form case study
- Travel, fashion, or architecture feature
When NOT to use it
- Use dramatic layouts around thin content
- Make body text secondary to decoration
- Copy a print spread without responsive behavior
- Mix typefaces with no assigned editorial roles
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
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
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."
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
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
Further reading