很多正文排版的问题，不是字号选错，而是“垂直节奏”断裂：段落的行距、标题的上下间距、列表的缩进各自为政，读者的眼睛会在每一行都重新找落点。你会感觉内容很实用，但页面像拼起来的。
基线网格（ line Grid）本质上是一条隐形的横向刻度尺：让所有文字的行都落在同一组等距的基线上。只要正文、引用、列表、注释都遵守同一个基线单位，页面就会自然变“稳”。
把它想成音乐里的节拍器：每一行文字的底部都应该踩在拍点上。你不需要让每个元素都一样大，但需要让它们的“落点”一致。这样读者从一行跳到下一行时，视线移动的距离规律，阅读更省力。
基线单位：通常等于正文行高的一半或四分之一。比如正文 14px 字号，行高 22px，你可以把基线单位设为 11px 或 5.5px（实际常用取整为 10px、11px、12px）。
正文行高：优先用“倍数”而不是凭感觉。中文正文常见 1.6-1.8 倍，英文可略低。关键是：让行高能被基线单位整除。
段落间距：段前/段后不要随手写 13px、17px 这种“奇数”。改成 1-3 个基线单位的倍数。这样段落之间的空白也会对齐到网格。
步骤 A 先定正文：选定一个可读性好的正文字号（移动端 15-17px，桌面端 14-16px 常见），再定行高（例如 24px）。
步骤 B 推出基线单位：用行高除以 2 得到基线单位（24px -> 12px）。从这一刻开始，你只用 12px 的倍数来设置垂直间距。
步骤 C 让所有文字样式“可整除”：标题、引用、列表、图注的行高都调整为 12px 的倍数。标题可以更紧，但不要破坏整除关系。
步骤 D 把间距写成体系：段前 12px，段后 12px 或 24px；模块间距 24px 或 36px；大区块 48px。你会发现页面的层级靠节奏就能表达出来，而不是靠更粗更大的字硬撑。
坑 1 标题太“挤”：标题行高过小会导致字形拥挤，尤其是中文的上部笔画。修正：标题行高仍用网格倍数，但可以减少上下间距来强化层级。
坑 2 列表看起来飘：项目符号或编号与文字基线不齐。修正：把列表的 line-height 也对齐网格，并检查列表项的上下 padding 是否为网格倍数。
坑 3 中英文混排断节奏：英文小写 x-height 和中文方块视觉高度不同。修正：保持统一行高，同时用字体的字重和字距微调，不要为英文单独改行高。
坑 4 图片说明破坏节奏：图注字号小，行高也小，导致下一段对不上。修正：图注行高仍用网格倍数，字号可以小，但行高不要随意小。
你可以用下面这套方法快速判断页面是否“稳”。
1）随机截一屏，把正文、标题、列表的每一行想象成水平线：是否能落在等距节拍上。
2）检查所有 vertical spacing：段前/段后/模块间距是否都是同一个单位的倍数。
3）检查最小字号元素（如图注、提示语）：它的行高是否仍然整除，不要“为了省空间”破坏节奏。
4）最后再看字重与对比：当节奏稳定后，你会更容易找到合适的字重层级，而不是反复换字体。
基线网格不是为了“看起来专业”，而是把阅读的节奏交给规则管理。你把正文的行高当作节拍，再用倍数去约束所有间距，排版就会从反复试错变成可复用的流程。下次做长文、教程、产品说明页时，用这套规则，你会明显感觉到页面更清爽、更可信。
