如果把排版比作演奏,网格是节拍器,基线是每一条被严格对齐的谱线。今天我们把「行高」这层窗户纸捅破:它不是什么玄学,它是一道简单的除法题。
01基线是什么
西文里,文字「坐」在基线上——字母的下边缘贴着同一条看不见的线。当正文、标题、图注、页码都坐在这条线上,页面就获得了一种印刷品特有的平稳感。
中文没有基线概念,但等效的问题依然存在:相邻两行的视觉中心是否稳定、标题与正文之间的空隙是否与其他区块一致。解决办法殊途同归——让一切行高与间距都落在同一套节奏上。
02用 8 的倍数
我习惯把基线节奏设为 8px:一行 24px 是 3 拍,一块 64px 的边距是 8 拍。任何元素都能找到自己在节奏里的位置:
| 元素 ELEMENT | 取值 VALUE | 说明 NOTE |
|---|---|---|
| 基础字号 | 16 px | 正文阅读舒适区 |
| 正文行高 | 24 / 28 px | 1.5 或 1.75,落在 4 的倍数上 |
| 段落间距 | 24 px | 恰好一行,段落即呼吸 |
| 小节标题 | 32 px | 两行间距,标题自成节拍 |
| 区块边距 | 64 / 96 px | 四行或六行,用于大分区 |
数值本身不是圣旨——8 或 4 的倍数都行,关键是全站只用一个公因子。
03落地实践
在 CSS 里维护节奏,就是把 margin 写成 em 的整数倍,并保证每类元素的行高可以被公因子整除:
:root{ --rhythm: 8px; } /* 基线单位 */
p{ line-height: 1.75; /* 28px */
margin: 0 0 1.5em; } /* 24px */
h2{ line-height: 1.25; /* 32px */
margin: 3em 0 1em; } /* 48px + 24px */
最后一步是校验:打开开发者工具,按 F12 画一条 28px 的参考线,滚过整篇文章。如果每一行都安然坐落在线上,你就获得了瑞士海报那种「看不见的秩序」。
对齐,是最便宜的秩序。
技术笔记到此告一段落。下一篇起,我们聊聊生活里那些被排版过的瞬间。