排版比配色更决定气质

做前端这些年，我逐渐发现一个规律：换一套配色，页面会变好看；改一遍排版，页面会变成另一个东西。

配色是外衣，排版是骨架。骨架不对，穿什么都别扭。

先说不做什么

大部分「看起来还行但说不出哪里不对」的页面，问题通常很具体：

• 所有标题都比正文大 1.5 倍以上，层级靠字号硬堆
• 行距 1.5，但段落间距和行距一样，读起来像一大坨
• 每块内容都装了圆角卡片，视线找不到落点
• 用同一个灰色表达三种不同重要程度的信息

这些都不是审美问题，是信息结构没有翻译成视觉语言。

我的三个约束

接这个博客的时候，我给自己定了三条硬规则，逼自己不用简单的办法解决层级问题。

一、标题和正文同字号

字号不动，层级靠字重和空间。

有个细节值得说：中文正文字体（我用的是霞鹜文楷 Lite）通常只有 400 和 700 两档字重。如果 h2 和 h3 都用 700，在字号相同的前提下它们会长得一模一样。

我的解法是让 h3 用 400，但把颜色降到次级灰。层级用「更淡」表达，而不是「更粗」。

二、段落间距必须明显大于行距

行距 1.75 的时候，段落间距我用 1.2em。差值不大，但足够让眼睛知道"这里断开了"。

判断标准很简单：眯起眼睛看，段落应该像一块一块的，不是连续的一条。

三、用 1px 线，不用色块

border 比 background 精确得多。

.list-item {
  border-bottom: 1px solid var(--border);
  padding-block: 1rem;
}

.list-item:hover {
  /* 注意：不改背景色，只让标题变重 */
  font-weight: 700;
}

一行一条线，视线自然往下走。色块会把页面切碎，线不会。

一个反例

很多模板会这样处理元信息：

<span class="meta">2025-10-28 · 阅读 6 分钟 · 设计</span>

中间那个 · 看着挺简洁，但它没有传达任何信息，只是把三个不相干的东西粘在一起。

我改成：

<dl class="meta">
  <dd>2025-10-28</dd>
  <dt>6 min</dt>
</dl>

日期用等宽字体，时长用等宽字体，中间靠 1px 竖线或间距分开。等宽字体只给真实数据用——日期、字数、时长、代码。它不是装饰。

结果

同样的 zinc 灰阶，同样一个陶土色强调色，只调整字重、行距和分隔方式，页面的气质就从「模板」变成了「有人在排」。

在暗色模式下这一点尤其明显。因为我没有加任何阴影、没有玻璃拟态、没有渐变，暗色版本不是简单地把白底变黑底，而是重新配了一次权重关系：

// 暗色下强调色要提亮，否则在深色底上会糊成一团
const accent = {
  light: '#a94f33', // 对比度 5.45 on #fff
  dark: '#cc785c',  // 对比度 6.07 on #09090b
}

这两个值我实际算过 WCAG 对比度，不是拍脑袋定的。

最后

排版这件事的好处是：它不需要你有审美天赋，只需要你对信息结构诚实。什么重要，什么次要，什么是一组，什么该分开——想清楚了，视觉自然就出来了。

配色可以抄，排版抄不来，因为排版是判断题。