排版基础
界面上九成的内容是文字。文字排不好，加多少装饰都救不回来。
你会遇到的现象
- 页面说不上哪里丑，但就是读着累
- 字号定了七八种，改一处要连带改一片
- 照着英文模板做出来的中文界面，总觉得挤
字号怎么定
| 用途 | 常用范围 | 说明 |
|---|---|---|
| 一级标题 | 24–36px | 页面主标题，一屏只有一个 |
| 二级标题 | 16–24px | 区块标题，用来分节 |
| 正文 | 14–16px | 主要阅读内容。14 是普通正文，16 是需要强调的正文 |
| 辅助信息 | 12px | 网页最小可用字号。日期、版权、注释 |
标题和文字的组合形式常见的有四种：图标加字、纯颜色的字、容器加字（把文字放进一个框里）、带颜色的字。挑一种在全站保持一致就行，混着用会让层级失效。
行距、字距、段距
| 参数 | 推荐值 | 调错了会怎样 |
|---|---|---|
| 行距 | 字号的 1.2–1.5 倍 中文正文取 1.6–1.8 | 太小行与行粘住，太大段落会散掉，读的时候找不到下一行 |
| 字距 | 约字号的 20% 中文正文通常不调 | 中文加字距会破坏词语的成组感，标题可以微调 |
| 段落间距 | 行距的 0.5–1 倍 | 小于行距就分不出段，大于两倍会让内容看着不连贯 |
| 页边距 | 页面宽度的 5%–15% | 太窄显得拥挤，内容贴边像没排完 |
| 正文栏宽 | 中文一行 25–35 字 | 太宽读到行尾找不回行首，太窄换行太频繁 |
字体怎么选
- 界面用无衬线，长文和标题可以用衬线。无衬线粗细统一、没有装饰，适合扁平化的界面；衬线有字脚，适合海报和宣传。
- 中文用系统字体就好。苹方、思源黑体、微软雅黑。用网络字体要考虑中文字库体积，一个字重经常好几兆。
- 一到三种字体，不要更多。通常是一种正文字体加一种标题字体。超过三种会乱。
- 字重比字体更好用。同一个字体的常规和加粗就能拉开层级，比换字体安全得多。
中文的几个坑
- 中英混排要留空隙。「使用 AI 生成」比「使用AI生成」好读。数字和中文之间同理。
- 中文没有斜体。系统硬拉出来的斜体很难看，要强调就用加粗或换颜色。
- 标点占一个全角宽。连续的标点会出现明显空隙，标题里尤其明显，必要时手动调。
- 中文不适合两端对齐。两端对齐会拉开字距，中文本来就是等宽的，拉完更难读。左对齐就好。
- 字重不要太细。细体在中文上很容易糊，尤其小字号。正文用常规，别用 Light。