排版与间距 —— 界面的 90% 是文字

本课导读

打开任何一个你常用的产品数一数：屏幕上 90% 的像素是文字和文字周围的空白。UI 设计的大部分功夫其实是排版——字体怎么选、字号怎么定、行距行长多少、元素之间空多远。本课把这些从"凭感觉"升级成"有系统"：字号阶梯、字重阶梯、8pt 网格。学完你会发现所谓"高级感"，大半是排版纪律带来的。预计 40 分钟。

字体：两个字族就够了

字体分两大家族：衬线体（serif，笔画末端有装饰角，如宋体、Georgia）和无衬线体（sans-serif，笔画干净利落，如苹方、思源黑体、Inter）。界面设计的默认答案很无聊但很有效：

• 正文用无衬线。屏幕上小字号的衬线细节会糊，无衬线的可读性稳定
• 衬线用来制造气质。标题用衬线，立刻带出编辑部/书卷气——学径百科风的"衬线标题 + 无衬线正文"就是这个配方，两个字族在字形上截然不同（对比原则），反而比两个相似的无衬线搭配更和谐
• 全站最多两个字族。第三个字族出现时，几乎总是错的（代码等宽字体除外，它算工种不算气质）

中文的特殊性要单独说：中文字体文件动辄十几 MB，网页很少自带中文字体，通常直接用系统字体栈（苹果出苹方、Windows 出微软雅黑）。这意味着中文界面里"选字体"的空间很小，你的设计资源要更多花在字号、字重、间距上——这正是本课剩下的全部内容。

字号阶梯：字号不是拍脑袋定的

新手页面常见 13px、15px、17px、19px 混住一楼——每次都"看着办"，结果处处差一点。系统化的做法是先定一套阶梯，之后只从阶梯上取值：

1. 定基准：正文 16px（浏览器默认，也是移动端不触发缩放的下限）
2. 定比例：常用 1.25（大四度）——每级 ×1.25
3. 生成并取整：12 / 14 / 16 / 20 / 25 / 31 / 39，够用一辈子

阶梯的好处不是数字好看，是两级之间的差距天然够大——对比原则自动达标，再也不会出现 18px 标题配 16px 正文的温吞层级。

字重也是阶梯：400（正文）/ 500 / 600 / 700（强标题）。一条实用偏方：同字号想区分主次时，先动字重再动颜色——"16px/600 + 16px/400"比"黑字 + 灰字"更稳，因为灰字一不小心就踩到对比度红线（下一课细讲）。

行高与行长：可读性的两个旋钮

• 行高：正文 1.5–1.7 倍字号（16px 正文配 24–26px 行高）；标题行高收紧到 1.1–1.3——大字自带空间感，行高再松就散架
• 行长：一行太长，眼睛找不到下一行的行头。英文经验值 45–75 字符，中文 20–40 个汉字。这就是正文容器要限宽的原因——不是屏幕不够宽，是眼睛跟不上

一个立刻能用的组合拳：正文 16px / 行高 1.6 / 每行 32 字左右限宽。多数"读起来累"的页面，套上这三个数就好了一半。

8pt 网格：间距只从一套刻度上取

间距系统回答的问题是：这两个元素之间该空 13px 还是 15px？答案是：都不对，因为它们不在刻度上。

8pt 网格的规则一句话：所有间距和尺寸用 8 的倍数（小微调允许 4）——4 / 8 / 12 / 16 / 24 / 32 / 48 / 64。为什么是这套而不是别套？三个理由：

• 消灭决策："空多少"从开放题变成七选一，设计速度和一致性同时上升——这是重复原则的数字化
• 对比够格：相邻刻度差距明显（16 → 24 是 1.5 倍），间距层级和字号阶梯一样自动拉开
• 设计开发同频：主流屏幕尺寸都能被 8 整除，且开发同学的 spacing token（Tailwind 的 p-2/p-4/p-6）就是同一套数——你标 13px 他写 12px 的日子从此结束

亲密原则的数字化在这里完成闭环：卡片内标题与正文间距 8，卡片与卡片间距 24——"组内 < 组间"不再靠感觉，是刻度上差着两级。

把三套阶梯装配成层级

字号、字重、间距三套阶梯齐了，排版层级的装配公式就是：每差一个信息层级，至少在一个维度上差一整级。

以一张课程卡为例：

元素	字号	字重	与下方间距
卡片标题	20	600	8（贴紧元信息——同组）
元信息（课型 · 时长）	14	400	16
摘要正文	16	400	24（组间距，卡片收尾）

注意元信息（14/400）和正文（16/400）只差一级字号——因为它们本来就只差一级。层级差多少，视觉就差多少，这是排版系统的全部秘密。

✍️ 练习

练习 1：给一段"公告"立规矩

素材：一段活动公告，包含主标题、活动时间地点（两行元信息）、三段正文、一个报名按钮。用本课的阶梯给每个元素指定：字号、字重、行高、与下一元素的间距（全部从刻度上取），并用一句话说明标题与正文的对比在哪几个维度上拉开。

✅ 参考答案

一种合格方案：主标题 25/700/行高 1.2，下方间距 8；时间地点 14/400/行高 1.5（两行同组内间距 4），下方间距 24；正文 16/400/行高 1.6，段间距 16，末段下方 32；按钮文字 16/600。对比维度：标题 vs 正文在字号（25 vs 16）与字重（700 vs 400）两个维度各差两级以上；元信息贴标题（8）而正文离元信息 24 —— 组内 < 组间。只要每个数都在刻度上、层级差在维度上兑现，具体取值可以不同。

练习 2：量一量学径

打开学径任意课程页，用浏览器 DevTools（右键 → 检查，看 computed 里的 font-size / line-height / margin）量出：页面大标题、正文、辅助信息三层的字号字重，以及正文的行高和容器宽度。对照本课刻度，哪些在阶梯上？正文一行大约多少个汉字？

✅ 参考答案

开放题（以你实测为准），自查三点：① 三层字号之间是否至少差一整级；② 正文行高是否落在 1.5–1.7 区间；③ 正文限宽折算后是否在 20–40 汉字/行。顺手记录一个发现：标题用衬线字体后，即便字号相同也能与正文拉开层级——字族本身就是一个对比维度，这是下一课之外的"第四套阶梯"。

📝 随堂测验

随堂测验0 / 5 题正确

1. 界面正文默认无衬线、标题可用衬线，理由是？

A衬线体版权费更贵B屏幕小字号下衬线细节会糊，无衬线可读性稳定；衬线用于标题制造气质，且两字族差异大反而符合对比原则C无衬线是现代审美，衬线已淘汰D衬线体不支持中文

2. 字号阶梯（如 12/14/16/20/25/31）的核心价值是？

A两级之间差距天然够大——对比自动达标，同时把'字号选多少'从开放题变成七选一B这些数字在数学上更和谐、更美C浏览器渲染整数字号更快D方便和设计规范文档对齐

3. 正文容器要限宽（中文约 20–40 字/行）的原因是？

A省流量B宽屏显示器分辨率不够C行太长时眼睛找不到下一行行头，可读性下降——限宽是为眼睛服务，不是屏幕不够宽D为了给侧边栏留位置

4. 8pt 网格的三个理由不包括？

A把间距决策从开放题变成七选一B相邻刻度差距明显，间距层级自动拉开C与开发的 spacing token 同频，标注和实现说同一种语言D8 是吉利数字，行业约定俗成

5. '每差一个信息层级，至少在一个维度上差一整级'中的'维度'指？

A像素密度和屏幕尺寸B字号、字重、间距（以及字族）这几套阶梯——层级差多少，视觉就差多少C颜色的色相、饱和度、明度D设计稿的图层数量

本课小结

• 界面的 90% 是文字：排版纪律 ≈ "高级感"的大半来源
• 字族最多两个：正文无衬线、标题可衬线；中文靠系统字体栈，设计资源花在字号字重间距上
• 三套阶梯：字号 12/14/16/20/25/31、字重 400/500/600/700、间距 4/8/12/16/24/32/48/64——只从刻度取值
• 正文三件套：16px / 行高 1.6 / 限宽 20–40 字
• 装配公式：每差一个信息层级，至少一个维度差一整级；组内 < 组间用刻度兑现
• 破格可以，但要是显式决策

下一课补上最后一套阶梯——色彩系统：为什么界面 90% 是中性色、语义色为什么不许挪用、深色主题为什么是"重新设计"而不是"反色"。