打开十个中文内容网站,至少有八个在排版上犯着同样的错误:中西文之间没有空隙、用半角标点、行高按西文标准设置。这些错误单个看都是小事,叠加起来就是"这个网站读起来怎么这么累"的整体感受。
排版是文字的容器。容器做得不好,再好的内容也会打折扣。这篇整理我在做这个博客时查证过的、最容易被忽略的几条规则。
一、中西文之间留空
汉字和拉丁字母属于两套书写系统,视觉上密度差异很大。当它们紧邻出现时,边界会糊在一起:
- ❌ 我使用Next.js构建了这个blog
- ✅ 我使用 Next.js 构建了这个 blog
这个空隙叫"盘古之白"(名字来自一个自动加空格的浏览器插件)。它不是官方排印规范里的硬性条款,但几乎所有讲究的中文排版实践者都遵守它。在网页上,可以用 CSS 的 text-spacing 属性(还在标准化早期)或构建时自动插入。
二、行高:中文需要比西文更"松"
西文正文行高的经典值是 1.4–1.5,但这个数值对中文偏小。原因是:汉字是方块字,字身占满整个字面框,行间没有西文那样天然的呼吸空间(西文小写字母有大量上下留白)。同样的 1.5 倍行高,中文的观感比西文拥挤得多。
经验法则:中文正文行高 1.7–1.9。这个博客的正文用的是 1.9——CJK 文本在这个行高下,视线换行时不会跟丢,长文阅读的疲劳感显著降低。另外,中文不需要西文那套负字距(letter-spacing 为负值)——那是针对拉丁字母字怀的微调,套在汉字上只会让字与字黏连。
三、全角标点,以及引号的层次
中文写作请用全角标点:,,。。!《》。半角逗号和句号是为西文设计的,宽度只有全角的一半,用在中文里会让句子失去节奏——方块字的句号是一个居右下的小圆圈,它告诉眼睛"一个完整的语义单元在这里结束"。
引号容易踩的坑是层次:「」和“”不要混用。简体中文的惯例是外层用“”,内层用‘’。还有一个细节:全角标点不应出现在行首(避头点),现代浏览器对 line-break: strict 或默认的 CJK 换行规则已经处理得不错,但给标点设置 hanging-punctuation 能让段落右边界更整齐。
四、对齐:两端对齐是中文的天然优势
西文两端对齐需要连字符断词配合,否则会出现难看的"词间空洞"。中文没有这个烦恼——几乎每个字都是合法断行点,两端对齐(justify)在中文排版中几乎免费:左右边界整齐,段落呈现为完整的矩形块,这正是方块字排版的传统美感。配合 text-justify: inter-ideograph 效果更佳。
五、字体的双声道
最后一条是这个博客的设计决策:正文用衬线(宋体类),标题用无衬线(黑体类)。
宋体的横细竖粗和末端装饰,来自雕版印刷的传统,长文阅读时有一种"纸面感"的安定;黑体笔画均匀、结构清晰,适合标题和界面元素需要的现代感。两套字体各司其职——正文的宋体是"阅读的嗓音",标题的黑体是"导航的嗓音"。这就是本站的"双声道":Noto Serif SC 负责让你读下去,系统黑体负责让你找得到。
排版的原则只有一条:让形式消失在内容之后。读者不该注意到排版本身——他们只会觉得"这里读起来很舒服",然后不知不觉读完一篇三千字的文章。
这正是排版能做到的最好的事。