Editorial
Lay it out like a fashion magazine, with images and text woven together.
Scroll sideways to explore the full example
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.
- 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 siteThirty 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 featureAnnual special issue2026
When NOT to use it
- Use dramatic layouts around thin contentMagazine-style layouts make a data back office harder to scan.
- Make body text secondary to decorationCustomer-service workspace (drop-cap version)High-frequency work interfaces should prioritize scanability and processing efficiency.
- Copy a print spread without responsive behaviorThe 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 rolesKeeping three columns on a phone makes lines too narrow.
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
Scroll sideways to explore the full example
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.
Scroll sideways to explore the full example
but a kind of resistance."
Scroll sideways to explore the full example
Scroll sideways to explore the full example
