如果把排版比作演奏,网格是节拍器,基线是每一条被严格对齐的谱线。今天我们把「行高」这层窗户纸捅破:它不是什么玄学,它是一道简单的除法题。

01基线是什么

西文里,文字「坐」在基线上——字母的下边缘贴着同一条看不见的线。当正文、标题、图注、页码都坐在这条线上,页面就获得了一种印刷品特有的平稳感。

中文没有基线概念,但等效的问题依然存在:相邻两行的视觉中心是否稳定、标题与正文之间的空隙是否与其他区块一致。解决办法殊途同归——让一切行高与间距都落在同一套节奏上

02用 8 的倍数

我习惯把基线节奏设为 8px:一行 24px 是 3 拍,一块 64px 的边距是 8 拍。任何元素都能找到自己在节奏里的位置:

元素 ELEMENT取值 VALUE说明 NOTE
基础字号16 px正文阅读舒适区
正文行高24 / 28 px1.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 的参考线,滚过整篇文章。如果每一行都安然坐落在线上,你就获得了瑞士海报那种「看不见的秩序」。

对齐,是最便宜的秩序。

技术笔记到此告一段落。下一篇起,我们聊聊生活里那些被排版过的瞬间。