别再凭感觉排版:用基线网格让正文更稳更清晰

什么是基线网格( line Grid)

基线网格可以理解为一组等间距的“隐形横线”,用来约束文字每一行的落点。只要正文、注释、列表等文本都对齐到同一套网格,你的版面就会更稳定:行距不会忽大忽小,段落之间的节奏更一致,左右两栏或多模块拼在一起也不容易“上下错位”。

为什么你会觉得排版“哪里不对劲”

很多版面的问题不是字体不够好看,而是节奏不一致:同级标题行距不统一、正文段前段后随手加、图片与文字之间的空隙没有规律、不同模块的文本行高彼此不兼容。结果就是:单看某一块还行,放到整页就显得散、虚、脏。

一套最常用的网格设置(可直接套用)

如果你没有强需求,先用“正文行高 = 网格单位”的思路快速落地:

  • 先确定正文:例如 16px 字号,行高 24px(1.5 倍左右)。
  • 把基线网格单位设为 24px,或更细一点设为 8px / 4px(更灵活)。
  • 所有文本行高尽量取 24px 的整数倍(或 8px 的整数倍)。

这样做的核心不是“必须 24”,而是“统一”。你可以用 20/28、14/22 等组合,只要整套系统能整除同一个单位,就容易保持一致。

标题怎么处理:别让它破坏网格

标题通常会更大、更紧凑,很容易把网格打碎。推荐两条规则:

  • 标题行高也用网格单位的整数倍(例如 32px、40px、48px)。
  • 标题下方留白(段后)同样按网格单位递增(例如 8/16/24)。

如果你发现标题需要“微调”才能好看,优先微调字距或字重,而不是把行高改成一个很难整除的值。

段落间距的正确做法:用“段后”统一节奏

更推荐用“段后间距”统一段落节奏,而不是到处塞空行:

  • 正文段落:段后 8px 或 16px(取决于信息密度)。
  • 小标题段落:段前 16px,段后 8px。
  • 列表:列表项行高对齐网格,列表整体上下留白也按 8/16/24。

当所有间距都来自同一把“尺子”,页面会自然显得干净。

图片、分割线与网格:让元素也“踩点”

别只让文字对齐网格。图片高度、模块 padding、分割线与文字间距,最好也按网格单位取值。最简单的检验方法是:把页面缩小到 50% 看整体,如果你仍然能感到模块之间的节奏一致,说明网格在工作;如果到处像“随机空隙”,说明你在凭感觉堆间距。

快速检查清单(3 分钟自检)

  • 同级正文行高是否一致?
  • 段落间距是否只用 1-2 个固定值(例如 8/16)?
  • 标题行高是否是网格单位整数倍?
  • 左右两栏或相邻模块的文字是否在同一水平线上对齐?
  • 图片与文字、模块内边距是否也使用同一套间距单位?

结语:把“审美”变成“系统”

基线网格的价值在于把排版从主观感觉拉回到可复用的规则。你不需要一开始就做得很复杂:先把正文、标题、段落间距统一到同一个单位,页面就会立刻变稳。等你习惯了这把尺子,再去做更细的层级、密度与节奏控制,效率会高很多。

用户评论 (0)

登录后参与讨论

立即登录 注册账号

暂无评论,快来抢沙发吧~

操作成功