flexible-typography

灵活的字体排版

设计能够适应用户需求的字体系统——平滑缩放、留出充足间距，并确保用户需要放大文字、增加间距或更换字体时，布局始终不会崩坏。

核心要求

始终使用相对单位

• 字体大小使用 rem（相对于根元素，用户可自行控制）
• 对于应随文字缩放的间距，使用 em
• 字体大小绝不使用 px——这会覆盖用户偏好
• 基础字体大小：以浏览器默认值（通常为 16px）为起点，不要覆盖

最小字号

• 正文：至少 1rem（绝不能更小）
• 小字／说明文字：至少 0.875rem
• 标签和 UI 文字：至少 0.875rem
• 重要文字应无需缩放即可阅读

行高

• 正文：至少 1.5（WCAG 要求）
• 标题：1.2–1.3（较大文字可以使用更紧凑的行高）
• 行高应随字号缩放——使用无单位数值（1.5，而不是 24px）

间距

• 段落间距：至少为字号的 1.5 倍
• 字母间距：不要小于浏览器默认值
• 单词间距：不要小于浏览器默认值
• 用户必须能够覆盖间距设置，而不导致布局崩坏（WCAG 2.1 AA 级，成功标准 1.4.12）

设计模式

可缩放的字号阶梯

• 使用相对比例（1.25、1.333、1.5）定义字号阶梯
• 每个字号层级都应有明显区别
• 大多数界面使用 4–6 种字号就足够
• 示例：0.875rem、1rem、1.25rem、1.5rem、2rem、2.5rem

安全支持用户覆盖设置

• 不要为文字容器设置固定高度
• 对于包含文字的元素，使用 min-height 代替 height
• 文字变大时，容器应随之扩展
• 测试以下情况：文字大小放大至 200%、缩放至 200%、字母间距和单词间距增大
• 如果上述任一情况导致布局崩坏，就需要修复 CSS

字体选择

• 优先考虑可读性，而不是美观
• 无衬线字体通常更易于屏幕阅读（但这只是偏好，并非规则——请根据受众进行测试）
• 确保所选字体具备以下特点：
  • 相似字符之间区分清晰（Il1、0Oo、rn/m）
  • x 字高一致
  • 默认设置下字符间距充足
• 提供能够优雅降级的 font-family 字体栈
• 绝不要阻止用户改用自己偏好的字体

深色模式下的字体排版

• 在深色模式下稍微降低字重（深色背景上的浅色文字看起来比浅色背景上的深色文字更粗）
• 确保两种模式下的对比度都至少达到 4.5:1
• 避免在纯黑色（#000）背景上使用纯白色（#fff）文字——极高的对比度会使部分用户产生光晕感。改用深灰色背景搭配灰白色文字

评估清单

• 所有字号均使用 rem 或 em，绝不使用 px
• 正文字号至少为 1rem
• 正文行高至少为 1.5
• 布局在文字缩放至 200% 时仍不会崩坏
• 布局能够适应用户设置的字母间距和单词间距覆盖值
• 文字容器使用 min-height，而非固定高度
• 字体中的字符区分清晰（Il1、0Oo）
• 浅色和深色模式均符合对比度要求