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