中文网页排版，从行高开始

你有没有觉得，很多中文博客读起来特别累？明明字号不小，却总觉得字挤在一起喘不过气。

原因通常不是字号，是行高和行宽。

英文的默认值不适合中文

英文主题的常见配置是：字号 21px，行高 1.5，容器宽度 680px。

对英文来说这很舒服——英文是小写字母为主，视觉重心低，行与行之间不需要太多空隙。

但汉字是方块字，字面率高，几乎填满整个行框。同样 1.5 的行高，中文看起来就比英文密得多。

几个实测舒服的数字

换算成 CSS：

.prose {
  /* 36rem ≈ 612px，17px 字号下约 36 个汉字一行 */
  max-width: 36rem;
  font-size: 17px;
  line-height: 1.9;
}

.prose > p {
  margin: 1.35rem 0;
}

段落之间要大于行距

这是最容易被忽略的一条。行高 1.9 已经很松了，如果段间距也用 1.9，读者会分不清“换行”和“换段”。

段间距给到 1.35rem（约 23px），比行距（约 32px）的一半多一些，视觉上刚好能切出一个新块。

别用纯黑

#000 在纸白底上对比度太高，长时间阅读会刺眼。换成带一点色温的深墨色，比如 #2E2A25，背景配 #FBFAF7。

这两个颜色单独看都不起眼，放在一起就有“纸和墨”的感觉了。

字体栈比 webfont 划算

中文字体动辄 5–10 MB，整套塞进网页是很奢侈的事。更划算的做法是精心排一个系统字体栈：

:root {
  --font-serif: "Songti SC", "Source Han Serif SC", "Noto Serif CJK SC",
    "STSong", "SimSun", Georgia, serif;
  --font-sans: "PingFang SC", "HarmonyOS Sans SC", "Source Han Sans SC",
    "Microsoft YaHei", -apple-system, sans-serif;
}

这样 macOS 用户看到宋体/苹方，Windows 用户看到雅黑/宋体，零下载、零闪烁。

真想要统一风格，再考虑给标题单独挂一个裁剪过的 webfont——标题字少，子集化之后通常只有几十 KB。

标点也算排版

中文的引号、破折号、省略号都有自己的位置，别用半角的 " 和 ...。如果懒得手动换，可以挂个 pangu.js 之类的工具，在中英文之间自动加空格。

排版这件事，改四个数字就能脱胎换骨：字号、行高、行宽、颜色。剩下的都是锦上添花。