排版的呼吸感:行高、字距与留白

中文排版最容易被忽略的三件事,恰好决定了阅读体验。

排版的呼吸感:行高、字距与留白

西文排版有几百年的经验积累,中文网页排版却常常是「能看就行」。其实只要照顾三件事,观感就会完全不同。

一、行高要够

中文是方块字,没有西文那样明显的升部和降部,行与行之间更容易糊在一起。正文行高低于 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

先照这个基线做,再根据字体和内容微调,基本不会出错。


排版示意图