字号与行高：正文多大才读得下去
设计与前端发布于 2026-10-31
排版里最容易被「我觉得」决定的三个数：字号、行高、行宽。但它们都有可验证的下限，而且下限的依据比审美硬得多。
字号：正文 16px 是下限，不是标准
| 用途 | 桌面 | 移动 | 说明 |
|---|---|---|---|
| 正文 | 16~18px | 16px 起 | 小于 16px 在手机上会触发 iOS 自动放大 |
| 辅助文字 | 13~14px | 14px | 注释、时间戳、标签 |
| 小标题 | 18~20px | 17~18px | |
| 大标题 | 24~32px | 22~26px | |
| 数据/代码 | 13~14px | 13px | 等宽字体显得更大，可以小一号 |
两条硬约束：
- 小于 12px 的正文不要出现。视力正常的人在普通屏幕上已经吃力，而它常常被用来「塞更多字」。
- iOS Safari 在输入框字号小于 16px 时会自动放大页面，用户点一下输入框整页跳一下。这条不是建议，是行为。
字号阶梯建议用固定档位（12 / 14 / 16 / 18 / 20 / 24 / 32），不要出现 15px、17px 这种随手值 —— 二十个页面之后你会分不清哪个才是「标准正文」。
中文和英文不能共用一套字号
同样的 16px：
- 英文的 x-height（小写字母主体高度）大约占 0.5em，读起来是「正常大小」
- 汉字的字面几乎填满 em 框，视觉上比英文大一圈
所以中英混排的界面里，如果英文正文用 16px，中文正文用 15~16px 就显得偏大；反过来，照英文习惯给中文定 14px 又会偏小。
实用做法：中文正文 16px、英文正文 16px，但中文行高要比英文大（下面会讲）。真正需要区分的是行高与字重，不是字号。
行高：1.5 是下限，正文用 1.6~1.75
行高的作用是让眼睛在换行时找对下一行的起点。行距太小，视线会串行；太大，段落会散掉。
| 场景 | 行高 |
|---|---|
| 正文（一段多行） | 1.6~1.75 |
| 标题（通常一到两行） | 1.2~1.3 |
| 表格、列表 | 1.4~1.5 |
| 中文长文 | 1.75~1.9 |
中文比英文需要更大的行高，因为汉字是等宽方块、没有词间空格，行与行的视觉分隔更弱。同样是 16px，英文 1.5 舒服，中文 1.5 就偏挤。
标题行高要单独设：标题用继承的 1.6 会显得空，用 1.1 又会让带下伸部的字母（g、y）贴到下一行。
行宽：每行 45~75 个字符
行太长，眼睛从行尾回到行首容易串行；行太短，换行太频繁打断节奏。
| 内容 | 每行字符数 | 折合宽度（16px） |
|---|---|---|
| 英文正文 | 45~75 | 约 600~750px |
| 中文正文 | 25~40 个汉字 | 约 600~700px |
| 表格/代码 | 不限 | 横向滚动优于折行 |
中文一个字占两个字符宽，所以「45~75 字符」对应 22~37 个汉字 —— 这就是为什么中文正文容器通常限制在 700px 左右。
实现上不要写死像素宽度，用 max-width: 65ch（ch = 数字 0 的宽度）或直接给容器加 max-width: 42em。
字重与对比度是一对
字号小的时候需要更高对比度，这是补偿机制：
| 字号 | 建议对比度 |
|---|---|
| 22px 以上 | 3:1 可接受 |
| 16~21px | 4.5:1 |
| 14px 以下 | 7:1 |
所以「浅灰色小字」是最糟的组合 —— 两个变量同时往不利方向走。辅助文字要么保持 14px 但颜色加深，要么保持浅色但放大到 16px，不要两头都让步。
具体算法见对比度那篇。
暗色模式要加行高，不是减
直觉上暗色更容易读，实际相反：亮字压在暗底上会产生「光晕」（halation），文字边缘看起来发胀，行与行更容易糊在一起。
经验做法：
- 行高比亮色模式加 0.1~0.15
- 字重不要用 300 以下的细体（暗底上会断笔）
- 纯白字（
#fff）配纯黑底（#000）对比过强，用#e5e7eb配#1c1c1c更舒服
把规范落成变量
:root {
--text-xs: 12px;
--text-sm: 14px;
--text-base: 16px;
--text-lg: 18px;
--leading-base: 1.7;
--measure: 42em;
}
写死数值的代价是改不动：等你想统一调整时，会发现 20 个页面里有 7 种行高。
检查现有内容
如果是给公众号或文档排版，站内的 Markdown 转公众号排版 已经按这套数值内置了主题（正文 16px、行高 1.75、段距 1.5em），可以直接看到效果再调。想知道一段文字排出来占多宽、多少字，用字数统计看字符数与阅读时长。
一句话总结：字号 16px 起、行高 1.6 以上、行宽 45~75 字符、小字必须加深颜色。这四条做到了，剩下的才是审美问题。