中文网页排版的十二个细节

技术博客的正文要读五分钟以上，排版就不是审美问题，而是效率问题。下面十二条是我改版时逐条核对过的。

一、行宽按「字」算，不按像素算

拉丁文 60-75 个字符是舒适的，但中文不能直接套。同样宽度的容器，中文能塞进两倍的字数，读起来眼睛回扫距离太长。

我的做法是按 em 定行宽：

.prose {
  max-width: 38em; /* 约 38 个汉字 */
  font-size: 18px;
  line-height: 1.78;
}

38em 在 18px 字号下是 684px，拉丁文正好落在 68 字符左右，两边都合适。

二、中文行高要比西文松

西文 1.5-1.6 就够，中文建议 1.75-1.85。原因是汉字方正、字面率高，同样的行间距在西文里显得透气，在中文里就显得拥挤。

三、不要用 300 字重

很多中文字体只有 400 和 700 两档，中间的 300、500 是浏览器合成出来的——笔画会发虚，尤其在深色底上。正文用 400，强调用 700，不要指望 500。

四、斜体基本等于不要用

中文没有真正的斜体字形，font-style: italic 只是把字向右倾斜，非常难看。要强调请用字重、颜色或下划线。

五、中西文之间要有空隙

「在 Astro 上重建」比「在Astro上重建」好读。手动加空格最稳，也可以用 CSS 的 text-autospace（支持度还在推进）。

六、标点用全角，省略号用六点

中文句子用全角标点；省略号是 ……（两个六点），不是 ...；破折号是 ——（两字宽），不要拆行。

七、避头尾

.prose {
  line-break: strict; /* 避免标点出现在行首/行尾 */
}

中文排版里「，。」跑到行首是硬伤。line-break: strict 能让浏览器遵守基本的禁则。

八、不要两端对齐

text-align: justify 在西文里靠连字符和词间距可以做得不错，中文里容易出现「河流」——某些行之间的空隙忽大忽小。左对齐更稳。

九、段落之间用间距，不用首行缩进

网页不是印刷品，段间距（1-1.2em）比首行缩进更清晰。两者不要同时用。

十、标题字重和正文拉开层级

h2 { font-size: 1.45em; font-weight: 700; }
h3 { font-size: 1.18em; font-weight: 700; }

中文标题如果只比正文大 10%，读者会分不清结构。1.3-1.5 倍的差距是安全的。

十一、把注释文字调到达标

次要信息（日期、字数、标签）经常被做成很淡的灰色，结果对比度掉到 3:1 以下。给一个底线：

十二、深色模式不要用纯黑纯白

#fff 配 #000 会在中文细笔画周围产生光晕。用 #e4dfc9 配 #2b2a24 这类偏暖的组合，眼睛会舒服很多。

排版这件事的吊诡之处在于：做得好的时候没人注意，做得差的时候人人难受。所以值得花一个下午，把上面这些逐条过一遍。