中文网页排版：从字号阶梯到行高节奏的细节

中文网页排版经常被简化成两个动作：选一个系统字体，把行高调到 1.5 或 1.8。但真正读过一段中文长文的人会知道，可读性远不止这两项。同样 16px 的字号，行高差 4px、字距差 0.5px、标点挤压是否开启、中西文之间有没有空格，阅读体验会完全不同。中文没有词间空格，字形方正、笔画密集，标点是全角，这些特征决定了中文排版不能直接照搬英文的排版规则。它需要一套自己的节奏。

中文和英文排版的根本差异

英文排版的基础是单词。单词之间有天然空格，行末可以按空格断行，读者靠词形识别。中文排版的基础是字。字与字之间没有空格，断行几乎可以在任意两字之间发生，读者靠上下文和标点切分语义。这个差异带来几个直接后果。

中文的全角标点占一个汉字宽度，如果标点前后不加处理，会出现“空洞”或“挤压”。中文的字形通常比拉丁字母更满，字面率更高，如果行高太小，行与行之间会显得拥挤。中文的常用字重往往只有 regular 和 bold，中间层次稀缺，导致层级设计更依赖字号和颜色。这些差异意味着中文排版需要单独调校，而不是套用英文的排版系统。

字号阶梯：不要只有大中小三档

很多产品的中文字号只有三档：标题、正文、辅助。这在简单页面里够用，但内容一丰富，层级就不够用。一个可用的中文页面，通常需要六到八档字号，形成连续的阶梯。

字号阶梯不是等比数列，而是根据阅读距离和内容密度调整。正文是阅读的主体，应优先确定。中文正文在桌面端通常 16px 起步，移动端 15—17px，长文可以到 17—18px。标题与正文之间至少要有 4px 的差距，否则层级不明显。辅助文字不应低于 12px，低于这个值在移动端会难以辨认。

一个常见的错误是“正文 14px + 行高 1.5”。14px 的中文在桌面端偏小，加上 1.5 的行高，长文阅读会明显疲劳。如果设计稿在 27 寸显示器上看着舒服，到 13 寸笔记本或手机上就会吃力。确定字号时，应该在目标设备上实际阅读一段 500 字以上的文本，而不是只看单行标题。

行高：中文阅读的呼吸感

行高是中文排版中影响可读性最大的变量之一。行高太小，行与行粘连；行高太大，视线在换行时容易跳错行。中文的字形饱满，理想行高通常比英文更大。

一个实用的经验规则是：行高约为字号的 1.6 到 1.8 倍，正文内容越长，行高越应靠近上限。标题行高可以收紧到 1.2 到 1.4，因为标题通常只有一两行，不需要换行阅读。辅助文字行高可以略小，但不低于 1.4。

行高还影响段落间距。如果行高较大，段间距可以小一些；如果行高较小，段间距需要更大来区分段落。段落间距通常为 0.5 到 1 倍行高。中文段落首行是否缩进，在网页中通常不缩进，而用段间距区分。缩进更适合印刷和正式文档。

字重与字距：中文的稀缺层次

中文字体的字重选择远少于英文。大多数系统字体只提供 regular 和 bold，部分提供 medium 和 light。这意味着设计层级不能只靠字重，还要结合字号、颜色和间距。

字重使用的基本原则：

• 正文用 regular，保持阅读稳定。

• 标题可以用 medium 或 bold，但要避免全篇粗体。

• 强调内容优先用颜色或背景，而不是只加粗。

• 同一页面字重不超过三种，避免视觉噪音。

• 中文字重与西文字重需要匹配，混排时注意视觉重量。

字距在中文里是一个微妙问题。默认字距通常合适，但某些场景需要微调：大标题可以适当收紧字距，让标题更紧凑；小字号辅助文字可以略放宽字距，提高辨识度；全大写英文或数字可以增加字距。但不要全局调整字距，中文字距过松会显得散，过紧会显得挤。

一个容易忽略的细节是标点挤压。中文标点占全角，连续标点（如“。”、“，”）会在行尾形成空隙。专业排版会做标点挤压，让标点占用部分宽度。网页中可以通过 CSS 的 text-spacing 或字体特性部分实现，但支持度有限。实际项目中，更常见的是通过手动调整或选择自带优化的字体。

标点与避头尾

中文标点有一套自己的规则，网页排版如果完全忽略，会出现不专业的断行。避头尾是指某些标点不能出现在行首或行尾。

不能出现在行首的标点（避头）：。，、；：？！）】》」』
不能出现在行尾的标点（避尾）：（【《「『

在网页中，CSS 的 line-break 和 word-break 可以部分控制，但支持不完整。更可靠的做法是：

• 使用支持中文避头尾的字体和排版引擎。

• 在关键标题中手动插入不换行空格或使用 white-space: nowrap。

• 对短标题和按钮文案，避免在标点后断行。

• 在内容管理系统中避免在标点前插入换行。

移动端窄屏更容易出现标点断行问题。设计时应检查按钮、标签、短标题在最小宽度下的表现，而不是只看桌面端。

中西文混排：空格与字体回退

中文内容中常夹杂英文单词、数字、代码和品牌名。混排处理不好，会显得杂乱。基本规则包括：

• 中文与西文之间通常加一个空格，视觉上更清晰。例如“使用 React 框架”而不是“使用React框架”。

• 数字与中文之间是否加空格，视语境而定，但应保持一致。

• 西文使用西文字体，中文使用中文字体，通过 font-family 回退实现。

• 行高需要同时适配中文和西文，避免西文显得过大或过小。

• 代码、变量名使用等宽字体，并与周围文字区分。

字体回退是混排的关键。一个常见的中文字体栈是：

css

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
"PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
"Helvetica Neue", Arial, sans-serif;

这个栈让系统优先使用本地中文字体，西文则使用系统 UI 字体。需要注意的是，不同平台的中文字体字形差异很大，同一个字号在 iOS 和 Android 上视觉大小不同。设计时应以目标平台为准，必要时做平台适配。

如果品牌需要统一字形，可以使用 Web Font，但中文字体文件通常很大，需要子集化和按需加载。正文使用系统字体、标题使用品牌字体，是一种常见的折中方案。

响应式排版：不是等比缩放

中文排版在移动端和桌面端的需求不同。桌面端屏幕大，阅读距离远，正文可以 16—17px；移动端屏幕小，阅读距离近，但一行字数少，正文 15—17px 更合适。标题在移动端需要明显缩小，否则会占满屏幕。行高在移动端可以略小，但不应低于 1.5。

一个实用的响应式策略是：

• 正文使用 clamp() 控制字号范围，例如 clamp(15px, 4vw, 17px)。

• 标题按层级分别设置断点，不要用统一缩放比例。

• 行高使用无单位数值，随字号自动调整。

• 段落宽度控制在 35—45 个中文字符，超过则阅读疲劳。

• 移动端增加左右边距，避免文字贴边。

• 检查最小宽度下的标点断行和按钮文案。

一行容纳多少字，比字号本身更影响可读性。中文长文的最佳行宽约为 30—45 字。桌面端全宽正文如果超过 60 字，读者换行时容易跳行。解决办法是限制内容容器宽度，例如 max-width: 42em，并居中显示。

排版不是装饰，是阅读的基础设施

中文网页排版的难点，不在于知道多少规则，而在于是否愿意为阅读体验做具体判断。字号阶梯是否连续，行高是否匹配内容密度，字重是否克制，标点是否被尊重，中西文是否协调，响应式是否真的适配了阅读场景。这些细节单独看都很小，但叠加起来决定了一篇文章是“能读”还是“好读”。

排版不需要炫技，它需要的是稳定、一致和耐心。把正文字号、行高、行宽、段间距、标点规则确定下来，写进设计系统，让每一篇内容都遵循同一套节奏。读者不会注意到这些设置，但他们会在不知不觉中读得更久、更轻松。这就是视觉基础的价值：它不抢眼，但它支撑一切。