排版是「隐形的设计」。当一个页面让你读得舒服、自然地从头看到尾，你通常不会注意到排版的存在；但当字太小、行距太窄、字体太多，你会感到不适，却很难说清原因。了解排版的基本原则，是让内容更容易被阅读、也更容易被信任的第一步。
一、字体分类：你需要知道的五大类
字体不只是「好看不好看」，不同的字体类型有不同的阅读场景：
| 类型 | 特征 | 代表字体 | 适用场景 |
|---|---|---|---|
| 有衬线体（Serif） | 笔画末端有装饰性短横线 | Times New Roman、Georgia | 长篇文章、学术报告、印刷品 |
| 无衬线体（Sans-serif） | 笔画干净，无装饰横线 | Arial、Helvetica、Noto Sans | 网页正文、UI 界面、移动设备 |
| 等宽字体（Monospace） | 每个字符宽度相同 | Courier、Fira Code、JetBrains Mono | 程序代码、终端输出、数据对齐 |
| 手写体（Script） | 模拟手写笔迹 | Brush Script、Pacifico | 标题、装饰、品牌 Logo |
| 展示体（Display） | 个性强烈，不适合长篇阅读 | Impact、Bebas Neue | 大标题、海报、广告 |
网页正文最常见的选择是无衬线体，因为屏幕分辨率下有衬线体的细节反而不如印刷清晰，无衬线体在各种尺寸下都有良好的可读性。
二、中文字体的特殊性
字重选择
中文字体传统上只有「细体（Light）」和「粗体（Bold）」两种字重，近年来 Noto Sans SC、思源黑体等才提供了 100–900 的多字重支持。在选择中文字体时，要确认该字体是否有所需的字重，否则浏览器会强制加粗（伪粗体），导致字体模糊。
繁体与简体差异
同一个 Unicode 码位，繁体（zh-Hant）和简体（zh-Hans）的字形可能不同。在网页中应设置正确的 lang 属性（如 lang="zh-Hans"），让浏览器选择正确的字形变体。
标点符号的全角与半角
中文排版通常使用全角标点（，。！？），而非半角标点（,.!?）。混用全角和半角标点是常见错误，尤其在中英文混排时需要特别注意。
三、行距：最影响可读性的排版参数
行距（line-height）是排版中对可读性影响最大的单一参数：
- 正文建议：1.5–1.8（相对于字体大小的倍数）。中文因为字符密度高，通常需要比英文更大的行距（1.7–1.8）
- 标题建议：1.1–1.3。标题字体较大，行距过大反而破坏标题的整体感
- 代码块：1.5 左右。代码需要保持结构感，行距过大会让逻辑结构变得松散
CSS 中，建议使用无单位的倍数（如 line-height: 1.7）而非固定像素，这样能随字体大小自动缩放。
四、字距与字体大小
字体大小
网页正文的最低可读字体大小是 16px，这也是大多数浏览器的默认值。避免将正文缩小到 14px 以下——用户可能不会抱怨，但他们会更快离开页面。
字距（letter-spacing）
中文正文通常不需要额外的字距设置。英文大写字母或标题的字距可微调（+0.05em 到 +0.1em），增加呼吸感。切忌在中文正文上加大字距——这会让文字看起来松散。
五、中英文混排的规则
- 中英文之间加半角空格：如「使用 CSS 设置样式」
- 数字和单位之间加空格：如「1.7 倍行距」
- 中文标点和英文字母不混用：中文句子用中文标点，英文句子用英文标点
- 字体声明顺序影响显示：在 CSS
font-family中，先声明中文字体，再声明英文字体
六、文字对比度：排版的无障碍底线
WCAG 制定了明确的对比度标准：
- AA 级：正文文字对比度至少 4.5:1；大字体（18px 以上）至少 3:1
- AAA 级：正文文字对比度至少 7:1；大字体至少 4.5:1
常见问题：灰色文字（如 #999）放在白色背景上，对比度约 2.85:1，远低于 AA 标准。
七、字体配对策略
- 有衬线标题 + 无衬线正文：传统报刊风格，适合博客、新闻网站
- 展示体标题 + 无衬线正文：个性鲜明，适合品牌官网、活动页面
- 同系列不同字重：最安全的选择，风格统一不易出错
避免在同一页面使用超过 3 种字体——每增加一种字体都需要额外的加载时间。
八、网页字体加载性能
中文字体是性能杀手：一个完整的中文字体文件通常超过 5MB。几个改善策略：
- 使用 Google Fonts 的子集化：只加载页面实际使用的字符
- font-display: swap：让页面在字体加载完成前先显示系统字体，避免空白闪烁
- 优先使用系统字体：不需要特定品牌字体时，使用系统默认字体可完全避免字体加载延迟
总结
- 网页正文优先选用无衬线字体，中文行距建议 1.7–1.8 倍
- 正文字体最小 16px，避免缩小到用户难以阅读的尺寸
- 中英文之间加空格，中文使用全角标点，维持版面一致性
- 文字对比度至少达到 WCAG AA 标准（4.5:1）
- 一个页面最多使用 3 种字体，优先考虑系统字体以提升加载速度