# 杂志式排版（Editorial Layout）

镜语 · 版式与界面 / 布局方式

- 别名：杂志风、编辑排版、杂志编辑风、Magazine Layout
- 口语：「像杂志内页一样的网页」「大大的衬线标题配小字正文」「有文艺感的排版」
- 一句话：超大衬线标题、分栏正文、首字下沉和细线分隔，像翻开一本杂志
- 是什么：杂志式排版把印刷杂志的版面语言带到网页：超大衬线标题、栏目名与期号、分栏正文、首字下沉、引语和细线分隔，图片带图注。它用标题和正文的强烈尺寸对比制造阅读节奏
- 缺了就不像：超大衬线标题；分栏正文；标题与正文强烈尺寸对比
- 加了更像：首字下沉；跨栏引语；期号与栏目名；图注
- 适合用在：个人品牌长文主页、播客与访谈页、作品故事介绍；文化、时尚、旅行类内容，需要文学感与权威感；视频里的封面和字幕排版，借用杂志的标题层级
- 看哪里：看大标题和正文的尺寸差距，正文分成两栏，第一段首字下沉；顶部有期号和栏目名，图片下有小字图注，中间穿插一句大号引语。可以在版面里上下滚动，像读一篇专题
- 注意：手机上多栏正文会过窄，需要合并为一栏；中文衬线体（宋体）小字号在屏幕上可能发虚，正文可用黑体，只把标题做成衬线
- 描述示例：做一个杂志式排版风格（Editorial Layout）的个人专题页：米白纸色 #f4efe6 背景、墨黑文字，顶部一行细线和小字期号、栏目名；超大衬线标题（宋体／Didot 气质）占据首屏，下面是斜体副标题和作者署名；正文分两栏，首段首字下沉三行；穿插一张带细线和小字图注的照片，以及一句跨栏的大号引语；用细线和充足留白分隔，强调色只用一种暗红
- 易混：
  - [瑞士国际主义平面](https://idea.ameng.dev/terms/swiss-style.md)：瑞士风格偏无衬线与客观网格；杂志式排版更常用衬线和文学化节奏
  - [极简界面](https://idea.ameng.dev/terms/minimal-ui.md)：极简界面安静克制，杂志式排版用大标题制造戏剧性
- 相关：[滚动叙事](https://idea.ameng.dev/terms/scrollytelling.md)、[装饰艺术](https://idea.ameng.dev/terms/art-deco.md)、[Bento 网格](https://idea.ameng.dev/terms/bento-grid.md)

## 来源与延伸阅读

- [Butterick · Practical Typography](https://practicaltypography.com/)
- [MDN · CSS 多栏布局](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_multicol_layout)

网页版（含演示）：https://idea.ameng.dev/terms/editorial-layout