行高 (行距)
文本行与行之间的间距。通过 CSS 的 line-height 属性控制,对可读性有重大影响。
行高 (行距) 是指文本行与行之间的垂直距离。在 CSS 中通过 line-height 属性控制,可以指定为相对于字体大小的倍数 (如 1.5)、固定值 (如 24px) 或无单位数值。行高是左右文本可读性的最重要排版要素之一,恰当的设置直接关系到用户体验。
CSS 的 line-height 会因指定方式不同而有不同的行为。无单位数值 (如 line-height: 1.6) 按元素自身字体大小的倍数计算,子元素也继承相同的倍数。而 line-height: 24px 这样的固定值或 line-height: 150% 这样的百分比指定,会把计算后的值继承给子元素,因此在字体大小不同的子元素上可能出现意料之外的行距。实务中推荐使用无单位数值指定。
恰当的行高取值因语言和内容类型而异。拉丁文本的正文一般为 1.5 倍左右,标题为 1.2-1.4 倍。日文文本的汉字与平假名字面较大、文字密度较高,因此需要比拉丁文本更宽的行距,正文常用的参考值在 1.7-2.0 倍附近。代码块与等宽字体多数情况下 1.4-1.6 倍就已足够,此时优先与行号、缩进保持协调。无论哪种情况,为避免与后述的无障碍要求发生冲突,把正文行高按 1.5 倍作为下限来设计较为稳妥。
行高过窄会使行挤在一起而难以阅读,在长文中尤其会加重读者的疲劳。反之过宽则会让视线在行间迷失,容易找不到下一行。WCAG (Web Content Accessibility Guidelines) 2.1 新增的成功标准 1.4.12 "文本间距" (符合级别 AA) 要求,即使用户把行距改为字体大小的 1.5 倍以上,内容与功能也不会丢失。同一标准还把段后间距改为 2 倍以上、字符间距改为 0.12 倍以上、单词间距改为 0.16 倍以上的情形一并纳入对象。这里需要把握的是,它并不是 "必须按 1.5 倍来排版" 的规定,而是 "用户放宽后不会损坏" 的要求。如果对固定了高度的元素同时使用 overflow: hidden,那么用户放宽行距的瞬间文末就会被截断,从而无法满足该标准。
一个常见的误解是把行高 (line-height) 与行距 (leading) 视为同一概念。传统排版术语中的行距指的是从行的基线到基线的距离,而 CSS 的 line-height 定义的是行框的高度,严格来说是不同的概念。此外,作为初始值的 line-height: normal 的实际取值取决于用户代理与字体,在主流浏览器中会随 font-family 而落在 1.2 前后。由于它使用字体自身携带的行高信息,仅替换字体就会改变行的高度,这一点需要注意。另一个在实务中影响显著的,是 line-height 与字体大小之差的分配方式。这个差值会被向文本上下各分一半,因此即使是只有一行的元素,文字的上下也会产生看不见的留白。在按钮或标题上感到 "文字看起来偏上" "明明对齐了 padding 中心却偏移" 的原因就在这里,这种场合应该重新审视的不是留白的设定,而是行高的设定。
从字符计数的角度看,行高的设置会让相同字数的文本的显示面积发生很大变化。例如把 1000 个字符分别以 line-height: 1.5 和 line-height: 2.0 显示时,后者会占用约 33% 更多的纵向空间。具体计算一下:在字体大小 16px、每行可容纳 40 个字符的宽度下,1000 个字符为 25 行。line-height: 1.5 时每行 24px,合计 600px;2.0 时每行 32px,合计 800px,两者之差达到 200px。反过来推算时,可以用 "可容纳字符数 = 显示区域的高度 ÷ (字体大小 × 行高) × 每行字符数" 来估算。对于有字符数限制的内容 (元描述、社交媒体帖子等),行高的设置会改变显示区域内可容纳的字符数,因此需要从设计与字符数两方面进行考量。用 -webkit-line-clamp 实现 "最多显示 3 行" 这类省略的做法,在由行数求高度的过程中同样依赖行高。若事后只改动行高,省略的位置就会移动,因此把确定字符数参考值时所用的行高取值也一并记录下来较为稳妥。