ux-typography

字体排印技能

此技能的工作方式（请先阅读）

这是一项生成式技能。字体排印有两种常见的失败模式：平淡无奇（只选一种稳妥的字体，没有真正的字号变化或层级）和过度表现（叠加多种展示字体、许多字重／颜色／大小写变化 → 杂乱且难以辨认）。因此，此技能会把关以下环节：

1. 明确品牌个性、内容类型和媒介——这些因素决定值得采用哪些表现性设计选择。
2. 应用始终适用的核心原则——可读性、清晰的字号与层级，以及克制，对任何产品都适用。
3. 审慎选择字体／搭配／字号比例——将它们作为与品牌相关的把关决策，而不是默认选项。

然后交由审查环节处理：accessibility（字号、对比度、间距）、aesthetics（层级、平衡）。

---

步骤 0 — 选择字体前先明确背景

• 品牌个性与预期美感——应营造怎样的印象？受众又有怎样的期待（儿童应用与银行应用所需的风格截然相反）？
• 内容类型——有哪些文本类型（展示文字、标题、正文、说明文字、标签）？这决定了层级的设计。
• 媒介——长篇阅读、密集型 UI 还是营销内容——会影响可读性与表现力之间的平衡。
• 语言方向——从左到右还是从右到左（决定默认对齐方式）。

如果在未获得答案的情况下继续，请说明假设。

---

始终适用的核心原则（适用于所有字体排印）

可读性与辨识度（正文）

• 正文 ≥ 16px。 从正文字号开始设计比例（它占据的空间最多），然后再调整其他字号。
• 行长为 50–75 个字符。 太长难以跟读；太短则会迫使视线断续移动。
• 正文行高约为字号的 150%。 字号／行宽越大，所需行高也越大。
• 段落间距 ≥ 行距的 1.5 倍（WCAG）；将不同想法分成易于理解的内容块。
• 从左到右排版时，正文左对齐（从右到左时则右对齐）。居中对齐仅用于较短的元素（标题、引语、CTA）——居中会拖慢阅读速度，也不利于有认知／视觉障碍的用户。
• 设计时应考虑便于快速浏览——约 79% 的用户会浏览，约 3% 会逐字阅读；层级与间距能让快速浏览更有效。

层级与克制

• 字体不超过 3 种——通常，字重／样式变化丰富的一个超家族就足够了。
• 建立字体比例（字号、字重、样式），覆盖各种内容类型；保持各层级之间的区别清晰。
• 每个层级最多使用 3 种层级手段（字号、字重、样式、颜色、大小写），并设置 2–3 个标题层级；把所有手段叠加起来会显得杂乱（超大、粗体、彩色、全大写的标题会显得咄咄逼人）。
• 强调应轻柔且单一——使用斜体（最柔和）或粗体，不要同时使用多种强调方式；少量使用文字颜色。
• 利用留白与邻近关系分组——相关文本彼此靠近，无关内容则分开。

---

依情境决定（呈现选项，不要自动应用）

逐项列出取舍，并给出与 Step 0 挂钩的建议。叠加使用展示字体、字重和装饰元素是失败的根源。

决策	适用情况	避免／调整的情况	默认建议
字体个性／氛围	展示／个性字体符合品牌调性，且仅用于标题	将富有表现力的字体用于正文（会损害可读性）	标题使用个性字体，正文使用易读性高的字体
使用一种还是两种字体	标题／正文搭配能带来有用的对比	使用第三种字体，或搭配缺乏明确对比	默认使用一个字体家族；只有在对比鲜明且各有明确用途时才添加第二种
字重数量	使用少量字重构建层级	随意为每种偏好添加字重	以能清晰呈现层级的最少字重为准
字体比例	营销／编辑内容需要强烈的视觉冲击	在密集的 UI 中使用强烈比例（浪费空间）	产品 UI 使用适度比例；营销内容可更醒目
衬线体还是无衬线体	与媒介／品牌相匹配（衬线体适合长篇／编辑内容，营造信任感；无衬线体能让 UI 更清晰）	不顾媒介特点，仅凭个人喜好选择	符合媒介特点和受众预期
装饰元素（首字下沉、摘引／块引用）	编辑内容／长篇布局	产品 UI、表单、信息密集的屏幕	仅用于编辑内容

始终避免（无论情境如何）：字体陈词滥调（用 Papyrus 表现「古老」，用 Comic Sans 表现「有趣」）、时代错置（字体与所处时代不符）以及适用性问题（在银行应用中使用随意的手写体）。探索显而易见的选择之外的可能；优先考虑契合度，而非新奇感。

---

验证结果（编排）

移交时，使用各项审查视角对应的可安装技能 name。只有在该技能已安装时才调用；如果未安装，此技能的核心内容已包含这些规则，因此无需等待，直接继续。

选择或修改字体后，将结果交给审查视角检查，而不是直接宣布完成。这些都是候选审查视角——执行方式由 docs/orchestration-policy.md 规定，也可以将整个流程交由 ux-design-review 处理。在此，microcopy 属于 A 级（自动运行）；accessibility 和 aesthetics 属于 B 级（可选）——使用现有设计系统时会抑制 aesthetics，而 accessibility 的检查范围会收窄至用法。如果用户调用此技能是为了解决某个具体问题，请遵循该范围。

• ux-accessibility-audit（B 级——可选；使用设计系统时缩小检查范围）——正文 ≥16px、文字与背景的对比度、行长／行高和段落间距、对齐方式，以及层级是否仅依赖颜色区分。
• ux-aesthetics-audit（B 级——可选；使用设计系统时抑制）——字体层级效果、平衡、留白，以及字体处理是否变得杂乱（超过 3 种手法、字体过多）。
• ux-microcopy-audit（A 级）——检查文字本身（此技能规定文字看起来如何，而非文字表达什么）。

如果无障碍审查指出可读性问题，或审美审查指出内容杂乱，请回到核心原则：减少字体、减少手法、简化比例。

---

常见的应避免／推荐模式

❌ 避免	✅ 推荐
只使用一种稳妥的字体，没有比例或层级	使用经过深思熟虑的字体比例，设置 2–3 个清晰的层级
使用 3 种以上字体／将展示字体用于正文	最多使用 3 种字体；通常使用一个字体家族；展示字体仅用于标题
标题又大、又粗、又彩色，还全部大写	每个层级最多使用 3 种视觉手法
正文字号 < 16px	正文 ≥16px，并以此为基础构建比例
文本行铺满整行	每行 50–75 个字符
行距过紧、显得拥挤	行高约为 150%；段落间距 ≥1.5×
正文段落居中对齐	正文左对齐（LTR）；仅短内容居中
Papyrus／Comic Sans 等陈词滥调；与时代不符的字体	选用合适、经过审慎考虑且不限于显而易见选项的字体
未经检查就发布	交由无障碍与审美审查

---

Source lessons (Uxcel)

• Selecting Typefaces
• Typographic Principles
• Paragraphs in Typography
• Typographic Hierarchy