写给工程师的排版入门

工程师做前端，功能总能实现，但「看着舒服」这件事往往靠感觉。排版（Typography）恰恰是把「感觉」变成「规则」的那门手艺。这篇文章不讲花哨的技巧，只讲几个可以直接套用的基础规则，以及它们背后的原理。

字体栈：别只写一个字体

最常见的错误是把 font-family 只写成一个字体名。字体栈的本质是降级链：第一个找不到就找第二个，以此类推。

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

中文站点还有一个容易被忽略的点：正文用无衬线（黑体），标题用衬线（宋体系），这是中文排版里经典且稳妥的搭配。衬线字体的笔画在标题这种大字号下更有「骨架感」，而无衬线在正文小字号下更清晰易读。

h1, h2, h3 {
	font-family: 'Source Han Serif SC', 'Noto Serif SC', 'Songti SC', 'SimSun',
		serif;
}

行高与行长：阅读舒适度的两个旋钮

行高（line-height） 直接影响阅读节奏。经验区间：

• 正文（14–16px 字号）：1.6 ~ 1.8
• 标题（大字号）：1.2 ~ 1.4
• 中文因字面密，行高通常比同字号英文略高

用无单位数值（line-height: 1.7）而不是固定像素，这样行高会随字号自动缩放，不会被继承计算坑到。

行长（measure） 是更隐蔽但同样重要的变量：一行太长，眼睛从行尾扫回行首容易串行；太短，视线频繁换行，阅读也累。经验值：一行 45~75 个字符，中文大约对应 35~45 字。CSS 里可以用 ch 单位估算：

article {
	max-width: 42ch;   /* 约 42 个字符宽 */
}

对于中文内容，ch 单位以「0」字符宽度为基准，和汉字的全角宽度有差异，更稳妥的做法是先设一个像素上限（如 max-width: 680px），再配合 font-size 微调。

垂直节奏：让每行都有「格子」

好的排版读起来有一种稳定的「韵律」，这来自垂直节奏（Vertical Rhythm）：所有行与行之间的间距都落在同一个网格上。

实现方式很简单——以基线行高为基准单位：

:root {
	--baseline: 1.7rem;   /* 正文一行的高度 */
}

p {
	line-height: var(--baseline);
	margin: 0 0 var(--baseline);
}

h2 {
	line-height: calc(var(--baseline) * 1.2);
	margin: calc(var(--baseline) * 1.5) 0 calc(var(--baseline) * 0.5);
}

所有间距都是 --baseline 的整数倍，页面就像排版在隐形格子纸上，视觉上会明显「整齐」起来。

字号系统：从 12px 一路写到 36px 的问题

很多页面字号是随手写的：标题 21px、小标题 17px、正文 14px……彼此没有关联，页面显得凌乱。解决方法是引入模数缩放（Modular Scale）：让字号按比例递增，常见比例是 1.2（次要三度）或 1.25（纯四度）。

用 CSS 自定义属性把这套比例固化下来：

:root {
	--fs-xs: 0.8125rem;   /* 13px */
	--fs-sm: 0.9375rem;   /* 15px */
	--fs-md: 1.125rem;    /* 18px = 15 × 1.2 */
	--fs-lg: 1.35rem;     /* 21.6px */
	--fs-xl: 1.62rem;     /* ~26px */
	--fs-2xl: 1.95rem;    /* ~31px */
}

再配合 clamp() 做流式缩放，让字号在手机上不显得突兀：

h1 {
	font-size: clamp(1.8rem, 4vw + 1rem, 3rem);
}

中文排版的两个细节

1. 标点悬挂。 中文标点（，。！？）在行尾会占用一个全角字符的宽度，导致右边缘参差不齐。CSS 里可以用 text-align: justify 让两端对齐，但更重要的是给行尾标点「悬挂」能力——不过纯 CSS 目前对中文悬挂支持有限，实际更可靠的做法是：正文用 text-align: justify，并配合 text-justify: inter-ideograph，让标点压缩更符合中文习惯。

2. 引号与书名号。 中文引号应使用全角「」『』而不是直引号 "，书名号《》不要和英文书名 *italic* 混用。这些看似细节，却是中文排版「专业感」的主要来源。如果内容是编辑器输入的，最好在构建层做一个标点转换，而不是指望运营同学手动改。

留白：排版里最贵的部分

留白不是「没排好」，而是排版本身。行间距、段间距、区块间距如果全都挤在一起，页面密度过高，读者会本能地逃离。反过来，间距大而不失节奏，页面就有了「呼吸感」。

一个简单有效的做法：间距递进原则——相邻区块间距按层级递增，比如段落间距 < 小标题间距 < 大区块间距，而不是所有间距都一样大。这比纠结具体像素值更容易把控全局。

小结

排版没有什么魔法，无非是把「顺眼」翻译成「可复用的规则」：字体栈、行高区间、垂直网格、模数缩放、间距层级。把这五样固化进你的全局样式里，即使不做视觉设计，页面也能在及格线上稳定发挥。

最后提醒一句：font-size 的单位里，rem 尊重用户系统设置，px 不尊重。做内容型网站，尽量用 rem，这是对低视力用户最基本的善意。