排版的呼吸感:行高、字距与留白
中文排版最容易被忽略的三件事,恰好决定了阅读体验。
西文排版有几百年的经验积累,中文网页排版却常常是「能看就行」。其实只要照顾三件事,观感就会完全不同。
一、行高要够
中文是方块字,没有西文那样明显的升部和降部,行与行之间更容易糊在一起。正文行高低于 1.6 就会开始拥挤。
行高 1.5 → 紧凑,适合标题和短文本
行高 1.75 → 舒适,正文的默认值
行高 2.0 → 松散,适合引文和诗歌
二、字距要松一点
中文字距默认偏紧,尤其是标题。给标题加一点负字距观感会更凝聚,给正文加一点正字距则更透气:
h1 { letter-spacing: -0.02em; }
p { letter-spacing: 0.01em; }
三、留白要敢留
段落之间、区块之间的空白,是阅读的换气点。
- 段间距建议等于一个行高;
- 标题上方留白要明显大于下方留白(视觉上才属于下面那段);
- 内容区和视口边缘至少留 24px。
留白不是浪费空间,是给眼睛留出的休息位。
一份可以直接抄的基线
| 项目 | 桌面 | 移动 |
|---|---|---|
| 正文字号 | 17px | 16px |
| 行高 | 1.75 | 1.8 |
| 内容宽度 | 720px | 100% |
| 段间距 | 1.5em | 1.4em |
先照这个基线做,再根据字体和内容微调,基本不会出错。