---
title: "排版比配色更决定气质"
description: "把同样一套颜色交给两个人排，出来的东西可以完全不同。这篇讲我怎么用字重、行距和留白，在不换颜色的前提下改变一个页面的脾气。"
canonical_url: "https://www.kemiaosw.top/posts/typography-over-color"
---
> Index of every page on this site: [llms.txt](https://www.kemiaosw.top/llms.txt)
做前端这些年，我逐渐发现一个规律：**换一套配色，页面会变好看；改一遍排版，页面会变成另一个东西。**
配色是外衣，排版是骨架。骨架不对，穿什么都别扭。
## 先说不做什么
大部分「看起来还行但说不出哪里不对」的页面，问题通常很具体：
- 所有标题都比正文大 1.5 倍以上，层级靠字号硬堆
- 行距 1.5，但段落间距和行距一样，读起来像一大坨
- 每块内容都装了圆角卡片，视线找不到落点
- 用同一个灰色表达三种不同重要程度的信息
这些都不是审美问题，是**信息结构没有翻译成视觉语言**。
## 我的三个约束
接这个博客的时候，我给自己定了三条硬规则，逼自己不用简单的办法解决层级问题。
### 一、标题和正文同字号
字号不动，层级靠字重和空间。
|
角色
|
字号
|
字重
|
行高
|
|
页面标题
|
28px
|
700
|
1.25
|
|
正文
|
17px
|
400
|
1.75
|
|
正文内 h2
|
17px
|
700
|
1.4
|
|
正文内 h3
|
17px
|
400
|
1.4
|
|
元信息
|
13px
|
400
|
1.5
|
有个细节值得说：中文正文字体（我用的是霞鹜文楷 Lite）通常只有 **400 和 700 两档字重**。如果 h2 和 h3 都用 700，在字号相同的前提下它们会长得一模一样。
我的解法是让 h3 用 400，但把颜色降到次级灰。层级用「更淡」表达，而不是「更粗」。
### 二、段落间距必须明显大于行距
行距 1.75 的时候，段落间距我用 `1.2em`。差值不大，但足够让眼睛知道"这里断开了"。
判断标准很简单：眯起眼睛看，段落应该像一块一块的，不是连续的一条。
### 三、用 1px 线，不用色块
`border` 比 `background` 精确得多。
```css
.list-item {
border-bottom: 1px solid var(--border);
padding-block: 1rem;
}
.list-item:hover {
/* 注意：不改背景色，只让标题变重 */
font-weight: 700;
}
```
一行一条线，视线自然往下走。色块会把页面切碎，线不会。
## 一个反例
很多模板会这样处理元信息：
```html
2025-10-28 · 阅读 6 分钟 · 设计
```
中间那个 `·` 看着挺简洁，但它没有传达任何信息，只是把三个不相干的东西粘在一起。
我改成：
```html
- 2025-10-28
- 6 min
```
日期用等宽字体，时长用等宽字体，中间靠 1px 竖线或间距分开。**等宽字体只给真实数据用**——日期、字数、时长、代码。它不是装饰。
## 结果
同样的 zinc 灰阶，同样一个陶土色强调色，只调整字重、行距和分隔方式，页面的气质就从「模板」变成了「有人在排」。
在暗色模式下这一点尤其明显。因为我没有加任何阴影、没有玻璃拟态、没有渐变，暗色版本不是简单地把白底变黑底，而是**重新配了一次权重关系**：
```js
// 暗色下强调色要提亮，否则在深色底上会糊成一团
const accent = {
light: '#a94f33', // 对比度 5.45 on #fff
dark: '#cc785c', // 对比度 6.07 on #09090b
}
```
这两个值我实际算过 WCAG 对比度，不是拍脑袋定的。
## 最后
排版这件事的好处是：它不需要你有审美天赋，只需要你**对信息结构诚实**。什么重要，什么次要，什么是一组，什么该分开——想清楚了，视觉自然就出来了。
配色可以抄，排版抄不来，因为排版是判断题。
## Sitemap
See the full [sitemap](https://www.kemiaosw.top/sitemap.md) for all pages.