# 排版调研：什么样的文本排版是舒适的

> 来源：2025-2026 主流产品分析 + 排版设计理论

---

## 核心发现

### 1. 舒适感来自"看不见的设计"

所有顶级产品（GitHub、Notion、Stripe、Linear）的排版有一个共同点：**你不会注意到它**。
用户从来不会说"Notion 的行高好舒服"——他们只会说"用 Notion 写东西很舒服"。
排版做对了，它就消失了。做错了，用户会感到莫名的不适但说不出为什么。

### 2. 字重比字号更重要

Apple HIG 的做法最能说明这一点：body 和 title 可以是同样的 17pt，
区分靠的是 Regular vs Semibold，而不是 16px vs 36px。

**行业趋势**：
- SemiBold (600) 正在取代 Bold (700) 成为标题首选字重——自信但不粗暴
- 极细字重（Ultralight/Thin）被 Apple 明确不推荐
- shadcn 的 h1 用 `extrabold`(800)，h2 用 `semibold`(600)——标题之间也有字重梯度

**启示**：与其让 h4/h5/h6 都用 `text-base` 然后靠字重区分失败，不如用颜色、opacity、
大写字母这些维度来建立层级。Linear 用 dim（降低亮度）来区分次要信息。

### 3. 行宽是阅读舒适度的第一变量

| 来源 | 推荐行宽 |
|---|---|
| 排版理论 | 50-75 字符，66 字符最佳 |
| WCAG 无障碍 | 不超过 80 字符 |
| Baymard Institute | 超过 80 字符的内容被跳过率 +41% |
| CSS 实现 | `max-width: 65ch` 或 `30-40rem` |

**所有严肃的内容产品都限制行宽**：GitHub 980px，Notion 宽边距，Stripe 居中列。
没有一个做全宽正文。

### 4. 行高与行宽是联动的

| 场景 | 行高 |
|---|---|
| 正文（桌面） | 1.5-1.6x |
| 窄栏/移动端 | 1.3-1.45x |
| 标题 | 1.1-1.2x（紧凑，防止视觉碎片化） |
| UI 组件 | 1.2-1.3x |

**关键关系**：行宽越长，行高应该越大。短行配大行高会"散架"，长行配小行高会"织成布"。
目标是"均匀的排版色彩"——看起来舒服、邀请阅读。

### 5. 标题缩放比例决定整体调性

| 比例 | 值 | 适用场景 | 感觉 |
|---|---|---|---|
| Major Second | 1.125 | 紧凑 UI、仪表盘 | 克制、高密度 |
| **Major Third** | **1.25** | **文档、内容应用** | **平衡、专业** |
| Perfect Fourth | 1.333 | 营销、多样内容 | 有层次、明快 |
| Perfect Fifth | 1.5 | 编辑排版、长文 | 戏剧性、正式 |

**Major Third (1.25) 是多数内容应用的最佳起点**。

### 6. 留白是奢侈品

感觉最"高级"的产品——Notion、Stripe、Linear——恰恰是留白最慷慨的。
留白传达品质感。但过多的留白会让内容感觉断裂、需要过多滚动。

**段落间距共识**：
- 段落之间：至少 1em，理想为行高的 1.5 倍
- 标题上方的空间应该是下方的 1.5 倍以上（接近原则：标题属于后面的内容）
- Wichita State 研究：合理的段落间白可以提升理解力 20%

### 7. 衬线字体正在回归

**Claude.ai 是旗舰案例**：AI 回复用衬线体，UI 用无衬线——这是对无衬线单一文化的声明。

驱动因素：
- 高分辨率屏幕让衬线清晰锐利
- 几何无衬线的审美疲劳
- 追求温暖感和人格化
- "过度抛光的 AI 审美正在造成视觉疲劳，设计师转向更有质感的字体"

**对渲染库的启示**：同时支持衬线和无衬线（通过 `--ms-font-sans` / `--ms-font-mono` token）
是前瞻性的。

### 8. 流式渲染需要系统字体

ChatGPT 主要用 `system-ui` 不是偷懒——是性能工程。
自定义字体意味着流式渲染时的布局跳动（layout shift），系统字体意味着即时稳定。

**对 markstream-vue 的启示**：
- 默认字体栈应该是 `system-ui` 优先（零加载、零跳动）
- 通过 `--ms-font-sans` token 允许用户切换到 Inter/Geist/衬线
- 字体加载策略本身就是排版决策

### 9. Dark 模式不是可选的

每一个调研的产品都支持。Claude、Linear、Cursor 默认暗色。
Tailwind 的 `prose-invert`、github-markdown-css 的 `prefers-color-scheme`
都说明这是基础能力。

### 10. 排版正在变成设计令牌系统

Vercel（Geist tokens）、Stripe（design tokens）、USWDS（font-size tokens）、
shadcn（CSS variables）。硬编码值在消亡，一切通过变量/token 流转。
这正是我们在做的。

---

## 主流产品排版定位

| 产品 | 感觉 | 关键特征 |
|---|---|---|
| **GitHub** | 功能性、隐形、实用 | 不引人注目的排版，让内容说话 |
| **Notion** | 干净、通透、冥想感 | 大量留白，内容漂浮在空间中 |
| **Linear** | 专业、克制、工程感 | 次要元素降亮度，只让重要内容突出 |
| **Stripe** | 精致、权威、可信赖 | 三栏布局，内容与代码对话 |
| **Vercel/Geist** | 瑞士现代、精确、开发者原生 | 三层类型系统（Heading/Label/Copy） |
| **ChatGPT** | 干净、机构感、高效 | 系统字体优先，零布局跳动 |
| **Claude** | 温暖、文学感、有人格 | **衬线体做 AI 回复**——反无衬线单一文化 |

---

## 对 markstream-vue 的建议

### 默认排版方向

不需要5种 preset，需要**1种好的默认**+ 通过 token 可调。

**推荐方向：Technical Clean + 一点 Notion 的呼吸感**

理由：
- markstream-vue 的主要场景是 AI 对话 + 开发文档 + 内容渲染
- 用户期望"专业但不冷淡"的感觉
- 需要同时服务代码密集和纯文字密集的场景

### 具体参数方向

| 维度 | 建议 | 依据 |
|---|---|---|
| 内容宽度 | `max-width: 65ch` | 行业共识 |
| 正文字号 | 16px (1rem) | 所有产品的最低线 |
| 正文行高 | 1.6 | 无障碍 + 舒适的交叉点 |
| 标题缩放 | Major Third (1.25) | 文档/内容应用的平衡点 |
| 标题字重 | h1: 700, h2: 600, h3-h4: 600, h5-h6: 500 | Apple + shadcn 的 weight > size 趋势 |
| 段落间距 | 1.5em | 行高的约 1x |
| 标题上下比 | 上 1.5x : 下 1x | 接近原则 |
| 默认字体 | `system-ui` → 可通过 token 切换 | 流式渲染零跳动 |
| h5/h6 区分 | opacity/color 降级，不是字号 | Linear/Apple 的做法 |