提升阅读体验：排版、字体与留白的学问

TL;DR

阅读体验核心不是”好看”，而是”读着舒服”。正文宽度 60-75 字符、行高 1.8-2.0、充足段间距、衬线正文字体—做好这四点，阅读疲劳大幅降低。

为什么排版比设计更重要

读者打开你博客，第一眼”这文字读起来累不累”。排版决定读者愿意读多久。

一个排版差页面：

• 行太宽，视线从行尾跳到下一行开头容易迷路
• 行太窄，每行只有几个字，换行太频繁
• 行高太小，密集文字堆在一起喘不过气
• 行高太大，段落之间失去关联感

最佳阅读宽度：60-75 字符

研究表明，英文单行最佳字符数是 60-75（中文略少，因为中文字符宽度是英文两倍）。

换算成像素：约 600-700px 是正文理想宽度。

.article-content {
  max-width: 680px;    /* 中文博客正文推荐宽度 */
  margin-left: auto;
  margin-right: auto;
}

太宽（>800px）视线会累，太窄（<500px）换行太频繁打断阅读。

行高：1.8-2.0

body {
  line-height: 2;  /* 无单位，最通用 */
}

/* 或者用数字 + 单位 */
.content p {
  line-height: 1.9;
}

无单位 line-height: 2 表示文字高度 2 倍，是最推荐写法。

段间距：大于行间距

段落之间间距应该明显大于行间距，这样段落开头才不会和行尾混淆：

.content p {
  margin-bottom: 1.5em;  /* 段间距 */
  line-height: 2;        /* 行高 */
}

1.5em 的段间距比单行高度大，视觉上清晰分隔。

字体选择

正文字体：衬线体

中文正文推荐 Noto Serif SC（思源宋体），衬线设计符合中文阅读习惯，适合长文。

.content {
  font-family: 'Noto Serif SC', 'Source Serif Pro', Georgia, serif;
}

界面字体：无衬线体

导航、按钮、标签用无衬线体（Noto Sans SC），清晰锐利。

body {
  font-family: 'Noto Sans SC', system-ui, -apple-system, sans-serif;
}

等宽字体：代码

code, pre {
  font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
}

字体加载顺序

body {
  /* 按优先级排列，可用的第一个生效 */
  font-family: 'Noto Serif SC', 'Source Han Serif CN', 'Songti SC', serif;
}

首行缩进与段落对齐

中文排版习惯首行缩进（2em）配合两端对齐：

.content p {
  text-indent: 2em;    /* 首行缩进两字符 */
  text-align: justify; /* 两端对齐 */
}

英文正文一般不缩进，靠段间距分隔。

字体大小

桌面端正文 16-18px 较舒适；移动端 15-16px（屏幕物理尺寸小，需要相对大一点）。

body {
  font-size: 17px;      /* 桌面端 */
}

@media (max-width: 768px) {
  body {
    font-size: 16px;
  }
}

图片与表格宽度控制

大图和表格超过正文宽度会破坏排版：

.content img {
  max-width: 100%;
  height: auto;
}

.content table {
  display: block;
  overflow-x: auto;  /* 表格横向滚动 */
}

链接样式

正文链接需要区别于普通文字，同时不要太刺眼：

.content a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px; /* 下划线与文字的间距 */
}

.content a:hover {
  color: var(--color-primary-dark);
  text-decoration: none;  /* hover 时去掉下划线，改用颜色 */
}

移动端注意事项

手机屏幕窄，重点保证正文不压缩或溢出：

@media (max-width: 640px) {
  .article-content {
    padding-left: 16px;
    padding-right: 16px;
    /* 不设 max-width，全宽显示 */
  }

  /* 缩小行高，但不要太密 */
  .content p {
    line-height: 1.8;
  }
}

写在

排版的本质是尊重读者时间。把阅读体验做好，读者才愿意读完你文章。一篇好文章配上好排版，才是完整作品。

调排版没有标准答案，多用浏览器开发者工具实时预览，找到你觉得最舒服参数。

延伸阅读

• 云图札记排版设计实践
• MDN: 行高与字体大小
• 从零搭建 Astro 博客并部署到 Cloudflare Pages