排版优化 (typeset)

排版优化（typeset）

概述

typeset 是优化排版设计的技能。它的核心是：让文字从”能看”变成”好看”，从”默认”变成”精心设计”。

作为设计师/开发者，你可能遇到过：

“这个文字看起来很普通”
“标题和正文差不多大”
“读起来很累”

typeset 就是解决这些的。

为什么排版重要

1. 文字是界面的核心

界面中 80% 的内容是文字

好的排版：
- 提升阅读体验
- 传达品牌个性
- 引导用户注意力

差的排版：
- 阅读疲劳
- 信息难以获取
- 显得廉价

2. 排版影响感知

用户会通过排版判断产品质量：

好的排版 = 专业、可信
差的排版 = 业余、不可信

3. 排版有系统

排版不是随意调整：
- 有层级系统
- 有尺度系统
- 有节奏系统

好的排版让界面看起来"精心设计"

排版核心要素

1. 字体选择

字体分类：

衬线体（Serif）：Times New Roman, Georgia
- 传统、正式、优雅
- 适合长文本阅读

无衬线体（Sans-serif）：Inter, Roboto, Helvetica
- 现代、简洁、干净
- 适合界面设计

等宽体（Monospace）：Fira Code, JetBrains Mono
- 适合代码、数字
- 适合技术产品

字体选择原则：

✅ 正确：
- 选择 1-2 种字体家族
- 衬线体用于正文，无衬线体用于标题
- 字体匹配品牌调性

❌ 错误：
- 使用超过 3 种字体
- 使用系统默认字体（太普通）
- 混用风格冲突的字体

推荐字体组合：

现代简约风：
- 标题：Inter
- 正文：Inter

科技风：
- 标题：SF Pro Display
- 正文：SF Pro Text
- 代码：JetBrains Mono

中文现代风：
- 标题：思源黑体 Heavy
- 正文：思源黑体 Regular
- 英文：Inter

2. 字体层级

定义：通过字号、粗细、颜色区分信息重要性

层级示例：

H1：36px / Bold / #000000  （页面标题）
H2：28px / SemiBold / #333333 （章节标题）
H3：22px / Medium / #555555 （小节标题）
正文：16px / Regular / #666666 （正文内容）
辅助：14px / Regular / #999999 （说明文字）

字号尺度（推荐）：

12, 14, 16, 18, 20, 24, 30, 36, 48, 64

避免：
- 13, 15, 17, 19（不规律的字号）
- 14.5, 15.8（奇怪的字号）

粗细层级：

Bold (700)：标题
Medium (500)：强调
Regular (400)：正文
Light (300)：辅助

3. 字间距与行高

行高（Line Height）：

中文：1.5 - 2.0
英文：1.4 - 1.8

正文行高：1.5 - 1.8
标题行高：1.2 - 1.4
长文本行高：1.8+

字间距（Letter Spacing）：

中文一般不需要额外字间距
英文标题可适当增加

标题：0.5px - 1px
正文：0

4. 行长度

最佳行长度：

45-75 字符 = 最佳阅读体验

太长：阅读疲劳
太短：阅读节奏被打断

计算方式：

中文：字数 ≈ 30-45 字/行
英文：字符 ≈ 45-75 字符/行

移动端：

每行 20-35 个字
不需要考虑 45-75 规则

5. 颜色对比

WCAG 标准：

正常文本：
- AA 级：4.5:1 对比度
- AAA 级：7:1 对比度

大文本（18px+ 或 14px bold）：
- AA 级：3:1 对比度
- AAA 级：4.5:1 对比度

推荐对比度：

主文字：#333333（不纯黑，柔和）
次要文字：#666666
辅助文字：#999999
禁用文字：#CCCCCC

实践案例

案例 1：博客文章排版

问题：

全文 16px
段落间距不一致
标题和正文一样大

优化后：

标题：36px / Bold / #1a1a1a
副标题：24px / SemiBold / #333333
正文：18px / Regular / #444444 / 1.8 行高
段落间距：1.5em
引用：18px / Italic / #666666 / 左边框
代码：16px / JetBrains Mono / 背景 #f5f5f5

案例 2：仪表盘排版

问题：

数字太小
标签和数字一样大
层次不分明

优化后：

指标数字：48px / Bold / #1a1a1a
指标标签：14px / Medium / #666666
卡片标题：16px / SemiBold / #333333
时间戳：12px / Regular / #999999

案例 3：表单排版

问题：

标签太小
输入框文字看不清
帮助文字和错误文字混在一起

优化后：

标签：14px / Medium / #333333 / 上方显示
输入框：16px / #333333
占位符：16px / #999999
帮助文字：14px / #666666 / 字段下方
错误文字：14px / #DC3545 / 帮助文字上方

排版系统

基础设置

:root {
  /* 字体 */
  --font-primary: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* 字号 */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --text-4xl: 36px;

  /* 行高 */
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;

  /* 字重 */
  --font-light: 300;
  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* 颜色 */
  --text-primary: #1a1a1a;
  --text-secondary: #666666;
  --text-tertiary: #999999;
}

使用示例

h1 {
  font-size: var(--text-4xl);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  color: var(--text-primary);
}

h2 {
  font-size: var(--text-2xl);
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
}

p {
  font-size: var(--text-base);
  font-weight: var(--font-regular);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
}

排版检查清单

字体

使用统一的字体家族？
字体数量不超过 2 种？
字体匹配品牌调性？

层级

标题和正文有明显区分？
字号有规律（使用尺度系统）？
粗细有层次？

间距

行高适合阅读？
段落有间距？
标题和段落有间距？

可读性

行长度合适（45-75 字符）？
对比度足够（4.5:1+）？
移动端字号不小于 16px？

一致性

全局字号统一？
全局行高统一？
全局颜色统一？

速查卡片

字体选择

1-2 种字体
匹配品牌调性
区分衬线/无衬线

层级系统

字号尺度：12,14,16,18,20,24,30,36
粗细层级：300,400,500,600,700
颜色层级

可读性

行长度 45-75 字符
行高 1.5-1.8
对比度 4.5:1+

检查

字体统一？
层级清晰？
间距合理？

与其他技能

normalize - 规范化
polish - 打磨
distill - 精简

查看源文件: GitHub原始文件