为什么很多网页即便使用了网格布局，看起来依然有一种说不清的凌乱感？答案通常在纵向：水平方向有了栏宽约束，但垂直方向的文字行高、外边距却处于自由散漫的布朗运动中。基线网格（Baseline Grid）正是驯服垂直维度的终极标尺。

01垂直律动（Vertical Rhythm）与 8px 基线单位

在传统印刷中，排版工人会在金属铅版上预先画出平行的基线，所有文字的底部边缘都稳稳落在这些线上。当读者翻页或双栏并读时，视线横向扫视绝不会出现「左边高半行、右边低两行」的颠簸感。

在现代屏幕设计中，以 8px（或 4px 半网格） 为基准单位已经成为工业界共识：

/* 8px 垂直律动系统 */
:root {
  --base-unit: 8px;
  --line-height-body: 24px; /* 3 个基线单位 */
  --line-height-heading: 32px; /* 4 个基线单位 */
  --line-height-hero: 64px; /* 8 个基线单位 */
}

p {
  font-size: 16px;
  line-height: var(--line-height-body);
  margin-bottom: var(--base-unit);
}

h2 {
  font-size: 24px;
  line-height: var(--line-height-heading);
  margin-top: calc(var(--base-unit) * 4); /* 32px 间距，保持步调一致 */
  margin-bottom: calc(var(--base-unit) * 2);
}

02字阶（Modular Scale）的调和比例

字号的大小不能随意凭空捏造。瑞士排版主张使用数学数列（如 1.25 大三度比例、1.333 纯四度比例、1.414 银色分割比例）推导字阶梯次：

  • 小字标注（Caption）：12px / 行高 16px
  • 正文字体（Body）：16px / 行高 24px
  • 二级标题（H2）：24px / 行高 32px
  • 主标题（H1）：36px / 行高 48px
  • 海报大字（Display Hero）：64px / 行高 64px

03对齐带来的平静

当整站的所有元素（从正文的一段话、一张插图的高度，到代码块的边距）都能被 8 整除并完美落入基线时，整个界面就会散发出一种如同瑞士机械钟表般的精密质感。这是排版所能赋予读者的最高礼遇——一种视觉上的宁静与秩序感。