web-typography

Web Typography

为 Web 打造易读、层次清晰且性能出色的文本设计。

适用范围

适用于以下场景：选择字体、定义字体搭配、构建排版比例、设置行高和行长、实现流式排版，或审查现有排版质量。

原则

1. 排版是用户界面的一部分

文本是主要的信息层。排版设计决定了内容是被阅读、浏览，还是被忽略。

2. 可读性优先于美观

字体首先必须易读。如果用户关注的是格式而非内容，说明排版设计失败了。

3. 通过排版建立层次

不同的字号、字重和样式构成清晰的信息层次。阅读流程由排版引导。

4. 字体越少，效果越好

每个项目最多使用 2-3 种字体系列。每增加一种字体，都会延长加载时间并降低协调性。

5. 有意识地运用情感效果

无衬线 Grotesque 字体 = 现代／中性。衬线字体 = 经典／可信。展示字体 = 富有表现力／独特。

规则

字体选择

• 应做：选择符合品牌形象的字体。企业风格：Inter、Geist、DM Sans。创意风格：展示字体。
• 应做：确认字符集覆盖范围：变音符号、特殊字符（德语内容必不可少）。
• 应做：优先使用可变字体（一个文件即可，无需 6+ 个文件）。
• 应做：优先选择自托管的 WOFF2（GDPR：不使用 Google Fonts CDN）。
• 不要：正文和标题使用超过 2 种字体系列。第三种字体仅用于点缀。
• 不要：在专业场景中使用 Comic Sans、Papyrus 或 Impact——绝不使用。

字体搭配

• 应做：通过对比进行搭配：标题使用衬线字体 + 正文使用无衬线字体（或反之）。
• 应做：搭配的字体采用相近的 x 高度，以实现视觉协调。
• 应做：使用经过验证的组合：Playfair Display + Source Sans Pro、Poppins + Inter。
• 不要：搭配两种相似的无衬线字体。缺乏对比会显得犹豫不决。

字号与比例

• 应做：使用排版比例：大三度（1.250）或纯四度（1.333）。
• 应做：正文至少为 16px（最好为 18px）。
• 应做：标题字号：移动端至少 24px，桌面端至少 32px。
• 应做：使用 clamp() 设置流式响应字号：font-size: clamp(1rem, 2.5vw, 2rem)。
• 不要：易读内容使用小于 14px 的字号。页脚最小为 12px。

行高与行长

• 应做：正文行高设为 1.5 到 1.75。
• 应做：标题行高设为 1.1 到 1.3。
• 应做：行长设为 45-75 个字符（最佳：65）。CSS：max-width: 65ch。
• 不要：多行文本的行高设为 1.0 或更低。
• 不要：让文本行铺满整个视口宽度（超过 80+ 个字符后，可读性会大幅下降）。

文本样式

• 应做：仅在启用断字（hyphens: auto）时使用两端对齐。
• 应做：Web 内容优先使用右侧不齐（text-align: left）。
• 应做：标题使用 text-wrap: balance。
• 应做：使用 font-weight: 600-700 强调内容，不要使用下划线或全大写。
• 不要：用下划线强调文本——在 Web 上，下划线始终表示“链接”。
• 不要：长文本全部使用大写。仅用于简短标签／按钮（最多 3-4 个词）。

性能

• 应做：使用 WOFF2 格式（压缩效果最佳）。
• 应做：使用 font-display: swap。
• 应做：预加载主要字体：<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>。
• 应做：仅需拉丁字符时，对字体进行子集化（可节省 60-80%）。
• 不要：加载超过 4 个字体文件（包括不同字重）。

模式

详细的模式说明：参见 references/patterns.md

排版层次（标准设置）

H1：40-56px 粗体，H2：32-40px 半粗体，H3：24-28px 半粗体，正文：16-18px 常规体，小号文本：14px，眉题：12-14px 半粗体大写。

流式排版

所有文本层级都使用 clamp()。无需针对字号设置媒体查询断点。

编辑型排版

正文使用衬线字体（18-20px）。缩短行宽（最多 60ch）。使用首字下沉。使用展示字体设置引文。

反模式

大段文字

长篇文字没有结构。解决方案：每隔 2-3 段添加一个小标题。用列表和引文作为节奏元素。

字体过多

使用超过 3 种字体、不一致的字重和随意的字号。解决方案：使用 2 种字体、定义好的字号比例和成文的规则。

字号过小

正文小于 16px，尤其是在移动设备上。解决方案：正文最小为 16px，在移动设备上建议使用 18px。用真实设备进行测试。

对比度不足

在白色背景上使用浅灰色文字。解决方案：正文对比度至少为 4.5:1（WCAG AA）。大号标题（>= 24px）至少为 3:1。

检查清单

• 字体不超过 2-3 种？
• 已定义排版比例并始终如一地应用？
• 正文字号至少为 16px？
• 正文行高为 1.5-1.75，标题行高为 1.1-1.3？
• 行长为 45-75 个字符（理想值为 65ch）？
• 字体使用 WOFF2 格式，并设置 font-display: swap？
• 加载的字体文件不超过 4 个？
• 正文文字对比度至少为 4.5:1？
• 未使用下划线强调文字？
• 未在不启用连字符断词的情况下使用两端对齐？
• 使用 clamp() 设置响应式字号？
• 标题前的间距大于标题后的间距？
• 字体支持变音符号和特殊字符？
• 字体由自己托管（GDPR）？

交叉引用

• ui-design -- 排版作为视觉层级的核心元素
• color-theory -- 文字颜色和对比度
• accessibility -- WCAG 对文字对比度的要求
• responsive-design -- 在不同断点下使用流式排版
• branding-identity -- 字体作为品牌元素
• visual-direction -- 当前排版趋势