行高 · FontCover

行高

本页目录

行高（line height）是一行文字占的总高度；行距（leading）是行与行之间的空隙。两者说的是同一件事的两种记法——设计师习惯说行距 4pt，前端习惯说行高 1.5。

这个词从哪来

铅字排版时，行与行之间要塞铅条来撑开距离，那根铅条叫 leading（读作“ledding”，因为铅是 lead）。数字排版里没有铅条了，但词留了下来。

于是设计师说加大行距，通常指把行与行分开；而前端写 line-height: 1.5 时，改的是每次行盒的总高度——效果一样，算法不同。

line-height: 1 意味着行高等于字号，但文字会挤在一起，因为字体的上下伸加起来通常超过一 em（b 往上伸、g 往下伸，两者相加比一个 em 高）。

所以单倍行距在绝大多数软件里不是 1.0，而是约 1.15–1.2；浏览器 normal 大致落在这一带。

层	谁决定	在哪
字体自带	字体设计师	`hhea.lineGap`、`OS/2` 的 typo / win 两组度量
使用时的行高	排版的人	CSS 的 `line-height`、设计软件的行距设置

字体自带的那一层是建议值：它告诉软件这个字体正常行距大概要留多少。软件通常会覆盖它。

换字体之后行距看起来变了，原因就在这里：你设的倍数没变，但字体的上下伸变了，行盒的自然高度跟着变。

同一段话，把行与行之间的距离拉开或收紧——这是设计稿上最常调的一项，也是最有争议的一项。

CSS Demo: leading

没有固定答案，但有几条经验：

另一个常被忽略的因素是 x 高度：x 高度大的字体自带更多墨，同样 1.5 倍看起来会比 x 高度小的字体更挤。

度量图里与行高有关的是三条水平线：

加上各自的 line gap，就是这个字体自己能撑多高。数值都在表里，并附占一 em 的百分比。

想直接试效果，用排版预览调行高最直观——它是真的在渲染文字，不是示意图。

CSS 里推荐用无单位数字（line-height: 1.5），它会随字号缩放；写成 150% 或 24px 则会在父元素处算成固定值，子元素放大字号后行距不跟着变。