现代 CSS 排版指南：打造媲美印刷品的数字阅读体验

在极简主义（Minimalism）界面设计中，当所有的装饰性元素被剥离后，排版（Typography） 就成为了界面本身。一篇技术文章能否让人专注读完，往往取决于几个微妙的 CSS 细节。

黄金行宽与行高

人眼在阅读过长的文字行时，换行扫视很容易丢失位置。研究表明，单行文字的最佳阅读宽度在 60 到 75 个英文字符（或 32 到 42 个汉字）之间。

.prose {
  max-width: 68ch;
  line-height: 1.78;
  letter-spacing: -0.011em;
  text-wrap: pretty;
}

.prose h1,
.prose h2,
.prose h3 {
  letter-spacing: -0.025em;
  text-wrap: balance;
}

注意上面代码中的两个现代 CSS 属性：

• text-wrap: balance：让多行标题每行的字数尽量均衡，避免最后一行只有一个孤零零的词。
• text-wrap: pretty：优化段落末尾的断行表现，减少尴尬的孤字行。

深色模式的色彩层次

很多初学者在制作深色模式时，习惯将背景设为纯黑 #000000，文字设为纯白 #ffffff。然而过高的对比度会在视网膜上产生光晕效应（Halation），导致长时间阅读视觉疲劳。

更克制的做法是采用带有微弱冷色调的炭灰阶：

• 主背景色：#09090b（Zinc 950）
• 卡片表面色：#121215
• 主文本色：#f4f4f5（Zinc 100）
• 次要文本色：#a1a1aa（Zinc 400）
• 分割线色：rgba(255, 255, 255, 0.08)

通过微小的明度递进，即使不依赖投影，也能在暗色背景下构建出清晰的视觉层级。