跳到主内容
My Blog

给中文排版的一点实践笔记

设计 随笔

中文是方块字，字重均匀、视觉密度大。西文排版的经验直接搬过来，往往会显得「闷」。这篇笔记记录我在自己的博客上实际用过的参数。

字体：思源宋体为什么合适

正文用 思源宋体（Noto Serif SC）不是为了复古，而是因为：

  • 宋体的横细竖粗在屏幕上「笔画感」清晰，长文阅读不糊
  • 开源、字重齐全（400–700），商用无授权风险
  • Google Fonts 有 unicode-range 切片，不会一次下载整套字库

系统回退链也值得认真写：

font-family: "Noto Serif SC", "Source Han Serif SC",
  "Songti SC", "STSong", "SimSun", serif;

macOS 用 Songti SC，Windows 用 SimSun，Web 字体加载前不会闪到黑体。

行高与字距：中文要更松

西文正文行高 1.5 通常够用，中文建议 1.8 起步。方块字没有升降部，行距小了容易串行。

我博客实际用的值：

场景行高字距
页面正文1.850.02em
文章正文1.950.02em
标题1.4–1.50.02–0.03em

字距 0.02em 是个不起眼但关键的细节——中文字符紧挨着时，这点间隙能让「呼吸感」完全不同。

留白优于分割线

这是我在这次改版中最有体会的一条。

早期版本用 border-t / 卡片描边划分区块，页面看起来「结构清楚」，但也像表单。后来改成：

  • 区块之间只用纵向间距（space-y-14、py-16）
  • 小节标题用大字距的小字（tracking-[0.25em]）自带分组感
  • 列表条目靠 py-8 的呼吸节奏区分，不画线

分割线是设计的偷懒——它用一条线代替了「层级」。真正好的层级来自：字号差、灰度差、留白差。

颜色：不要纯黑纯白

  • 纸底不用 #fff，用象牙白 #f7f3ec（或宣纸感的暖白）
  • 正文不用 #000，用暖墨 #2a2420
  • 弱化文字不用 50% 灰硬压，用带色相的灰（如 #8a7f72）

这样即使是长文，眼睛也不容易累。

实用 CSS 片段

body {
  letter-spacing: 0.02em;
  line-height: 1.85;
  font-feature-settings: "kern" 1;
}

.prose {
  line-height: 1.95;
}

.prose p {
  margin-top: 1.6em;
  margin-bottom: 1.6em; /* 段间距大于行距，层次才出得来 */
}

小结

中文排版没有魔法，只有参数：

  1. 行高放到 1.8+
  2. 字距加 0.02em
  3. 段间距明显大于行距
  4. 用留白而不是线来分组
  5. 避开纯黑纯白

先把这些调对，页面的「质感」会自己浮现出来。

评论