字体设计思维

作者：Ellen Lupton

---

第一部分：字体基础

什么是字体排印？

字体排印（Typography）是指文字的艺术排列与设计。它不仅仅是选择"漂亮的字体"，而是涉及文字的大小、粗细、结构、间距等所有视觉方面的设计。

字体分类

1. 衬线体（Serif）

• 特点：笔画末端有装饰性线条
• 历史：起源于古罗马碑文
• 优点：阅读舒适，适合长文本
• 代表字体：Times New Roman、Garamond、Baskerville、Georgia

2. 无衬线体（Sans-serif）

• 特点：笔画简洁，末端无装饰
• 历史：20世纪现代主义产物
• 优点：现代感强，屏幕显示清晰
• 代表字体：Helvetica、Univers、Arial、Futura

3. 等宽体（Monospace）

• 特点：每个字符宽度相等
• 用途：代码编辑、命令行
• 代表字体：Courier、Monaco、Consolas、Fira Code

4. 展示体（Display）

• 特点：装饰性强，艺术感强
• 用途：标题、海报、广告
• 代表字体：各种手写体和装饰字体

---

第二部分：字体属性详解

1. 字重（Weight）

指字体的粗细程度：

字重名称	描述
Thin	极细
Light	细体
Regular/Normal	常规
Medium	中等
Semi Bold	半粗
Bold	粗体
Extra Bold	特粗
Black	黑体

2. 字宽（Width）

指字符的水平扩展程度：

• Condensed (窄体)：瘦长形
• Normal (标准)：常规比例
• Extended (宽体)：扁平形

3. 字间距（Tracking）

指一组字母之间的整体间距。

应用规则： - 大段落大写字母：增加字间距（+20~+50） - 小字号正文：保持默认或略增加 - 标题：可适当减小

4. 行高（Line Height / Leading）

行高是行与行之间的垂直距离。

最佳实践： - 正文：1.4-1.6倍字号 - 大标题：1.1-1.2倍字号 - 辅助文字：1.8-2.0倍字号

---

第三部分：排版层次结构

层次的重要性

排版层次是通过视觉差异来组织信息，让读者知道什么重要、什么次要。

建立层次的方法

1. 字号大小 - 越大越重要
2. 字重粗细 - 越粗越突出
3. 颜色对比 - 越对比越醒目
4. 空间位置 - 上方和左侧更显眼

典型层次结构

一级标题 (H1)
  ↓
二级标题 (H2)
  ↓
三级标题 (H3)
  ↓
正文 (Body)
  ↓
说明文字 (Caption)

---

第四部分：排版规则与最佳实践

1. 行长度（Measure）

指一行文字的字符数。

黄金法则： - 英文：45-75个字符 - 中文：25-35个字符

太长的问题： 眼睛难以从行尾找到下一行开头 太短的问题： 视线频繁跳转，阅读疲劳

2. 行高（Line Height）

见上文"字间距"部分。

3. 段落间距

最佳实践： 段落间距 = 0.5-1倍行高

4. 首字下沉（Drop Cap）

将段落第一个字母放大，是传统印刷中常见的装饰手法。

---

第五部分：Web排版

1. 响应式字体单位

EM vs REM

• EM：相对于父元素字号
• REM：相对于根元素（html）字号

推荐使用REM，因为它不依赖父元素，更容易控制。

2. 字号系统

基础字号：16px

xs: 12px  (0.75rem)
sm: 14px  (0.875rem)  
base: 16px (1rem)
lg: 18px  (1.125rem)
xl: 20px  (1.25rem)
2xl: 24px  (1.5rem)
3xl: 30px  (1.875rem)
4xl: 36px  (2.25rem)
5xl: 48px  (3rem)

3. 断点设计

手机：< 576px
平板：576px - 992px
桌面：> 992px

4. 可读性原则

1. 足够的对比度（至少4.5:1）
2. 避免全大写段落
3. 避免长斜体文本
4. 确保足够的行高

---

第六部分：中文排版

1. 中西文混排

规则： 1. 中英文之间加空格 2. 数字前后加空格 3. 保持基线对齐

2. 标点符号

规则： 1. 使用全角标点（，。！？""） 2. 省略号用"……"（不是三个点） 3. 引号用「」或『』

3. 行距与字距

中文特点： - 行高通常为字号的1.8-2.0倍 - 不需要像西文那样的大字间距

---

第七部分：字体搭配

经典组合

1. 衬线 + 无衬线
2. 标题用无衬线，正文用衬线

3. 例子：标题用Helvetica，正文用Georgia

4. 同类搭配

5. 同字体家族的不同字重

6. 例子：Light标题 + Regular正文

7. 对比搭配

8. 强烈的风格对比创造视觉兴趣
9. 例子：现代无衬线 + 复古衬线

搭配原则

1. 限制字体数量（最好2-3种）
2. 创造明确的层次
3. 保持风格一致性
4. 考虑使用场景

---

第八部分：实际技巧清单

快速检查清单

□ 行长度在45-75字符之间 □ 行高是字号的1.4-1.6倍 □ 段落有足够间距 □ 层次清晰可辨 □ 对比度足够 □ 移动端可读 □ 字体加载速度快

常见错误

1. 字号太小（<14px）
2. 行高太紧（<1.2）
3. 行太长（>80字符）
4. 层次不明确
5. 对比度不足

---

总结

字体排印是设计的基石。好的排版：

1. 清晰 - 信息易于阅读
2. 美观 - 视觉愉悦
3. 有效 - 传达信息
4. 一致 - 统一风格

记住：排版不是装饰，而是功能。

---

翻译：Zero AI Agent
原版：Thinking with Type - Ellen Lupton
翻译时间：2026年2月16日