typography

字体排印

以大师们的原则为基础，为用户界面打造专业的字体排印。

“字体排印的存在是为了彰显内容。”——Robert Bringhurst

参考文件

如需了解特定主题的详细指南，请参阅以下参考资料：

主题	适合阅读的场景
masters.md	寻求权威依据、作出细致判断、理解“为什么”
variable-fonts.md	使用可变字体、流畅调整字重、优化性能
font-loading.md	FOIT/FOUT 问题、预加载、Core Web Vitals、自托管
opentype-features.md	连字、等宽数字、样式集、带斜线的零
fluid-typography.md	clamp()、text-wrap、截断、垂直节奏、字体平滑
tailwind-integration.md	Tailwind 字体排印实用类、prose 插件、自定义
internationalization.md	RTL 语言、阿拉伯语/希伯来语、CJK、双向文本

输出格式

字体系统建议

## Type System

### Scale
- Base: [size, e.g., 16px]
- Ratio: [e.g., Minor Third 1.200]
- Rationale: [why this ratio]

### Hierarchy
| Level | Size | Weight | Line Height | Letter Spacing | Use |
|-------|------|--------|-------------|----------------|-----|
| Display | ... | ... | ... | ... | Hero, marketing |
| H1 | ... | ... | ... | ... | Page titles |
| H2 | ... | ... | ... | ... | Section heads |
| Body | ... | ... | ... | ... | Paragraphs |
| Small | ... | ... | ... | ... | Captions, labels |

### Fonts
- Primary: [font] — [rationale]
- Secondary: [font, if applicable]
- Mono: [font, if applicable]

### Implementation
[Ready-to-use CSS/Tailwind]

字体排印审查

## Typography Audit

### Issues
| Element | Problem | Recommendation |
|---------|---------|----------------|
| ... | ... | ... |

### Quick Wins
- [Immediate improvement 1]
- [Immediate improvement 2]

---

核心原则

四项基本要素（Bringhurst）

正文最重要的字体排印考量：

1. 字号 — 正文至少 16px；辅助文本绝不能低于 14px
2. 行距 — 正文为 1.5-1.7；标题为 1.1-1.3
3. 行长 — 45-75 个字符（理想值为 66）；使用 max-w-prose（约 65ch）
4. 字体选择 — 根据内容和语境匹配字体

通过对比建立层级

从多个维度建立层级：

维度	低对比	高对比
大小	14px → 16px	16px → 48px
字重	400 → 500	400 → 700
颜色	Gray-600 → Gray-900	Gray-400 → Black
大小写	正常	全大写

“每个设计只使用一种字体。避免使用斜体和粗体——通过字号变化来体现层级。”——Massimo Vignelli

克制

• 最多使用 1-2 个字体系列 — 搭配使用时，可选一种衬线字体和一种无衬线字体
• 实际应用中使用 3-4 个标题层级 — 更深的嵌套通常意味着结构存在问题
• 遵循字体比例 — 避免随意设置字号
• 善用留白 — 不要填满每处空隙

“在新的计算机时代，字体的泛滥代表着一种新程度的视觉污染。”——Massimo Vignelli

---

字体比例

模块化比例

名称	比例	特点
小二度	1.067	含蓄、保守
大二度	1.125	温和、专业
小三度	1.200	均衡、灵活
大三度	1.250	鲜明、有冲击力
纯四度	1.333	层级分明
黄金比例	1.618	戏剧化、编辑风格

实用比例（以 16px 为基准的小三度）

--text-xs:   12px;  /* 0.75rem */
--text-sm:   14px;  /* 0.875rem */
--text-base: 16px;  /* 1rem */
--text-lg:   18px;  /* 1.125rem — not in pure scale */
--text-xl:   20px;  /* 1.25rem */
--text-2xl:  24px;  /* 1.5rem */
--text-3xl:  30px;  /* 1.875rem */
--text-4xl:  36px;  /* 2.25rem */
--text-5xl:  48px;  /* 3rem */

适合偏离比例的场景

• 营销/主视觉： 可采用更大的字号跨度
• 密集的数据界面： 采用更紧凑的比例
• 移动端： 基准字号略大（17-18px）

---

间距指南

不同语境下的行高

语境	行高	原因
正文	1.5-1.7	更宽松，易于阅读
标题	1.1-1.3	更紧凑，尤其适用于大字号
UI 标签	1.2-1.4	紧凑但清晰易读
按钮	1.0-1.25	单行文字，间距紧凑

“眼睛读的不是字母，而是字母之间的空间。”——Adrian Frutiger

字间距

语境	字距	CSS
正文	默认或 +0.01em	tracking-normal
全大写	+0.05em 至 +0.1em	tracking-wide / tracking-wider
大字号标题	-0.01em 至 -0.02em	tracking-tight
小字号文本（<14px）	+0.01em 至 +0.02em	tracking-wide

全大写规则： 始终增加字距。文字应简短（1-3 个词）。

段落间距

• 段落之间： 1em 到 1.5em（等于或略大于行高）
• 标题之后： 缩小首段的上边距
• 章节之间： 段落间距的 2–3 倍

---

字体选择

系统字体栈

/* Sans-serif (modern) */
font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";

/* Serif */
font-family: ui-serif, Georgia, Cambria, "Times New Roman", serif;

/* Monospace */
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

安全的 Web 字体推荐

类别	字体	使用场景
无衬线	Inter, Source Sans 3, Work Sans, DM Sans	UI、正文
衬线	Source Serif 4, Lora, Merriweather, Literata	编辑内容、长篇文本
等宽	JetBrains Mono, Fira Code, Source Code Pro	代码、数据
展示	Fraunces, Epilogue, Outfit	标题

字体搭配原则

• 利用对比进行搭配 — 衬线 + 无衬线
• 匹配字高 — 混用时保持视觉和谐
• 确保字重可用 — 两种字体都需要具备所需字重/样式

“父亲不应偏爱任何一个女儿。”——Hermann Zapf（谈及他的字体）

---

现代 CSS 排版

文本换行

/* Balanced line lengths for headings (≤6 lines) */
h1, h2, h3, blockquote, figcaption {
  text-wrap: balance;
}

/* Prevent orphans in body text */
p, li {
  text-wrap: pretty;
}

注意： 不要在带边框的容器内使用 balance——这会造成视觉失衡。

流式排版

/* Font scales smoothly between breakpoints */
h1 {
  font-size: clamp(2rem, 1rem + 4vw, 4rem);
  line-height: clamp(1.1, 1.3 - 0.1vw, 1.3);
}

body {
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
}

完整的字号阶梯请参见 fluid-typography.md。

文本截断

/* Single line */
.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Multi-line (2 lines) */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

---

深色模式排版

字重调整

文本在深色背景上看起来会更粗。请稍微降低字重：

@media (prefers-color-scheme: dark) {
  body {
    font-weight: 350; /* Instead of 400 */
  }
  h1, h2, h3 {
    font-weight: 600; /* Instead of 700 */
  }
}

字体平滑

在深色背景上应用抗锯齿，以减轻视觉上显粗的效果：

.dark-bg {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

色彩对比度

• 避免在纯黑色（#000）背景上使用纯白色（#fff）——对比过于刺眼
• 使用灰白色（#f5f5f5）和近黑色（#1a1a1a）
• 深色模式下的对比度建议达到 10:1 到 15:1

---

排版细节

引号

使用弯引号，而不是直引号：

• 正确：“Hello”和‘world’
• 错误："Hello"和'world'

破折号

类型	字符	用途
连字符	-	单词拆分、复合词
短破折号	–	范围（2020–2024）、关系
长破折号	—	插入语

数字

类型	使用场景	CSS
等宽数字	表格、价格、对齐	font-variant-numeric: tabular-nums
比例数字	正文	font-variant-numeric: proportional-nums
旧式数字	编辑内容	font-variant-numeric: oldstyle-nums
斜杠零	代码、数据	font-feature-settings: "zero" 1

完整参考请参见 opentype-features.md。

---

无障碍

最低标准

元素	最低值	推荐值
正文	16px	16–18px
次要文本	14px	14–16px
法律文本/说明文字	12px	12px + 增大字距
对比度	4.5:1	7:1

用户偏好

/* Use relative units so users can scale */
body {
  font-size: 1rem; /* Not 16px */
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}

阅读障碍相关考虑

• 避免两端对齐文本
• 优先选择字形易于区分的无衬线字体（a 与 α、l 与 1 和 I）
• 使用充足的行高和段落间距
• 可考虑提供 OpenDyslexic 作为选项

---

常见错误

避免

• 正文或长标题全部使用大写
• 正文段落居中
• 行长超过 80 个字符
• 为了“美观”而使用对比度不足的配色
• 混用过多字体系列（>2）
• 在 UI 文本中使用装饰性字体
• 在网页上使用两端对齐文本
• 在白色背景上使用极小的灰色文本
• 在阿拉伯文文本上使用字距

留意

• 显眼文本中的孤行和寡行
• 标题层级不一致
• 缺少字体回退
• Web 字体加载导致布局偏移
• 非链接文本使用下划线

---

快速实现

极简专业配置

:root {
  --font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

body {
  font-family: var(--font-sans);
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  line-height: 1.6;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}

h1, h2, h3 {
  line-height: 1.2;
  text-wrap: balance;
  letter-spacing: -0.02em;
}

p {
  text-wrap: pretty;
  max-width: 65ch;
}

code {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums slashed-zero;
}

@media (prefers-color-scheme: dark) {
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

Tailwind 快速入门

<article class="
  prose prose-gray lg:prose-lg
  prose-headings:text-balance
  prose-p:text-pretty
  dark:prose-invert
  max-w-prose mx-auto
">
  
</article>

完整模式请参见 tailwind-integration.md。