For words
that take their time.
适用场景 · Fit
- 01个人 blog / 长文专栏
- 02独立媒体 / Substack
- 03读书摘录 / essay 集
- 04采访 / Q&A 长稿
- 05艺术 / 文学评论
不适用 · Unfit
- 01数据 dashboard
- 02SaaS 产品 landing
- 03童趣 / Gen Z 应用
- 04工程控制台
审美关键词
Four crafts
worth practicing.
The Palette01 / 04
米白纸张做底·墨黑做正文·朱红 / 暗红 accent 做点睛·暖灰做次要。**禁用 vibrant / pastel**——这风格要"沉静的权威感"。
The Typeface02 / 04
Newsreader 做 hero / heading（italic 800 + opsz 144）·Lora 备份 body·Inter 仅做 metadata / byline。**禁用 mono 做装饰**·只在数据 label 用。
Italic 800
The Spacing03 / 04
大间距是 editorial 的灵魂。Hero padding 144px·section gap 96px·两栏 column-gap 32px·**让正文有"翻页"的呼吸感**。
- 4 / 8 / 12caption / byline
- 32column gap
- 72block padding
- 96section gap
- 144hero padding
The Details04 / 04
首字下沉 4em·两栏正文·pull quote 红 border-left·圆角 0·**1px hairline 切分**·小数据用 oldstyle figures。
- 01border-radius 0 · 全直角
- 02drop cap 4em · font-weight 800 italic · 红色 accent
- 03columns 2 · column-gap 32px · text-align justify
- 04pull quote · border-left 4px solid accent
- 05oldstyle figures · font-feature-settings onum 1
- 06byline 大写 letter-spacing 0.18em
Three lines
and CC understands.
typography + reading-experience reference · 按 4 件 craft 实现 · **不会冒出**·sans-serif 大字 / 圆角卡片 / shadow / 渐变文字 — 这些是 editorial-magazine 的 DON'T。
One spread,
three signature moves.
An editorial layout breathes through three signature moves — the dropped capital that anchors the eye, the justified column that paces the read, and the pull quote that punctuates the argument. None of these are decoration. Each is a craft tool inherited from five centuries of print, refined for the screen but never abandoned.
The first paragraph rarely tells you what the piece is about. It tells you the writer is in control of the room.
When set in a serif optimized for reading — Newsreader's optical size kicks in at 72pt — the long form regains its dignity. The eye does not skim; it settles. The body becomes a place to dwell, not a wall to scale.
And yet, the modern editorial is not a museum. It uses the same hyphenation rules, the same baseline grid, the same 65-character measure — but on a screen that scrolls. The craft remains; the surface adapts.
Every paragraph ends a beat before you expect. Every italic earns its emphasis. Every red letter has a job.
BUTTON
CARD · Article preview
of slow making.
HERO · Magazine
of letters.