网页上 90% 的内容是文字，但很多新手把精力都花在配色和动效上，对字本身反而草草了事。字号随便定一个 14px，行高跟默认走，标题加个 bold 就算完事——结果页面看起来"什么都对，就是读不下去"。

排印的本质，是替读者安排一条阅读节奏。字号告诉眼睛"谁重要"，行高决定"换行累不累"，字间距影响"扫读快不快"。这篇我们把这几个变量一个个拆开讲，并给出能直接抄走的数值区间。

一、字号层级：让眼睛知道谁重要

层级不是靠加粗撑起来的，而是靠字号差。一个常见错误是标题 18px、正文 16px、辅助文字 14px——三档之间只差 2px，眼睛根本分不清主次。好的层级应该是"跳跃式"的，相邻两档至少差 4px，最好差 6-8px。

下面这套数值我们用了很久，适合中文正文为主的页面，你可以拿去当起点再微调：

:root {
  --fs-h1: 36px;   /* 页面主标题 */
  --fs-h2: 28px;   /* 章节标题 */
  --fs-h3: 22px;   /* 小节标题 */
  --fs-body: 16px; /* 正文 */
  --fs-small: 14px;/* 辅助、标签 */
  --fs-caption: 13px;/* 注释、版权 */
}

定层级时有个原则：先定正文字号，再往上下推。中文正文一般不要小于 16px，14px 已经是阅读下限，再小就会让人眯眼。正文定了 16px，h3 给到 22px、h2 给到 28px，层级自然就拉开了。

二、行高与行宽的黄金配比

行高和行宽是一对搭档，单独调哪个都不对。经验法则是：行宽控制在每行 45-75 个字符（中文约 22-37 个字），行高取字号的 1.5-1.8 倍。行越宽，行高要越大，否则换行时眼睛会找不准下一行的起点。

看一组对比，体会一下行高的差别：

/* 偏挤：行高不够，换行容易串行 */
.tight-text {
  font-size: 16px;
  line-height: 1.3;   /* 太紧 */
  max-width: 720px;
}

/* 舒适：行高与行宽匹配，读起来轻松 */
.cozy-text {
  font-size: 16px;
  line-height: 1.7;   /* 中文正文的甜点区 */
  max-width: 680px;   /* 每行约 30 个中文字 */
}

中文方块字比英文"重"，行高要给得更宽一点。英文正文 1.5 就够，中文我更建议 1.6-1.8。标题则反过来要压低行高，h1 给 1.2、h2 给 1.3，因为标题字大，行距太宽会让一个标题"散成两行"。

三、字间距与字偶距，不是一回事

很多人把 letter-spacing 和字偶距（kerning）混为一谈。简单说：letter-spacing 是"整体加间距"，字偶距是"特定字母对之间的微调"。网页上我们能直接控制的是 letter-spacing，字偶距主要靠字体本身的设计和 font-feature-settings 去开启。

对中文来说，方块字本身间距均匀，letter-spacing 一般保持默认（normal 或 0）就行，强行加间距反而显得松散。但有几类场景需要调：

• 大号标题：字号超过 24px 时，字与字容易"挤"，给 letter-spacing: 0.02em-0.05em 会更透气。
• 全大写英文标签：大写字母视觉上偏紧，给 0.05em-0.1em 提升识别度。
• 正文中文：保持默认，不要画蛇添足。

.page-title {
  font-size: 36px;
  letter-spacing: 0.03em; /* 标题略松，透气 */
}

.eyebrow {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.12em; /* 大写标签明显加宽 */
}

四、中英文混排，最容易翻车的地方

中文网页里夹英文、数字是常态，比如"用户增长了 35%"、"使用 Vue 3 开发"。问题是中文字体和英文字体不一样，默认渲染时中英文会"打架"：英文偏小、数字下沉，整行看起来高低不齐。

解决办法是用 font-family 把中英文字体都列上，浏览器会自动用前者渲染英文、后者渲染中文：

body {
  /* 英文字体在前，中文兜底在后 */
  font-family: "Inter", "PingFang SC", "Microsoft YaHei", sans-serif;
}

顺序很关键：英文优先匹配 Inter，遇到中文字符 Inter 没有字形，就回退到苹方/微软雅黑。这样英文用 Inter 的清爽，中文用苹方的圆润，两边各取所长。

另一个常见问题是中英文之间没有间距，"使用Vue3开发"挤成一团。规范做法是手动加一个空格，或者用 CSS 自动处理：

/* 给中英文之间自动加间距（pangu 思路） */
p { text-spacing-trim: space-all; }

/* 兼容性不够时的手动写法 */
<p>使用 Vue 3 开发，性能提升 35%。</p>

我个人更推荐手动加空格，虽然麻烦，但可控、兼容所有环境。团队里可以约定一条 lint 规则统一处理。

五、可读性的几条硬原则

把前面这些都用上，最后还要守住几条可读性的底线。这些不是技巧，是"别犯错"的清单：

• 正文别用纯黑：#000 对比度太强，长读眼睛累。用 #2c2c2c 或 #333，既清晰又柔和。
• 正文别用浅灰：#999 这类浅灰做正文，老人和强光环境下基本看不清，只留给注释和辅助信息。
• 行宽别太长：超过 80 个字符一行，读者换行时找不到下一行起点，会反复串行。
• 正文颜色和背景对比度至少 4.5:1：这是 WCAG 的最低线，用对比度检查工具测一下最稳妥。
• 别在正文上用花体：衬线、手写体只适合标题，正文一定要用无衬线或常规宋体。

排印是慢功夫，没有一步到位的参数。先把字号、行高、行宽这三件套调到甜点区，再针对中英文混排和可读性收尾，页面的"读感"会肉眼可见地提升一个台阶。下一课我们聊 SEO，看排印之外，还有哪些前端能掌控的搜索友好度。