排版Skill typography

---

name: 排版 description: 该技能应用于选择字体、审查 CSS 排版、提高可读性、修复链接可发现性，或减少 UI 文本中的可读性/可访问性风险。

排版

当 UI 文本难以阅读、排版感觉不一致、链接不明确可点击，或对比度决策损害可用性时，应用此技能。

应用原则

基于 NN/g 指南进行决策：

• references/nng-guidelines.md
• https://www.nngroup.com/articles/glanceable-fonts/
• https://www.nngroup.com/videos/il1-typography-test/
• https://www.nngroup.com/articles/pairing-typefaces/
• https://www.nngroup.com/articles/serif-vs-sans-serif-fonts-hd-screens/
• https://www.nngroup.com/articles/guidelines-for-visualizing-links/
• https://www.nngroup.com/articles/low-contrast/

核心规则：

1. 首先优化可读性（大小、间距、对比度）。
2. 保持字体系统简单且基于角色（通常 1–2 个家族）。
3. 保持明确的链接可发现性。
4. 对字母数字表面运行 IL1 检查。
5. 避免主要 UI 和正文使用低对比度文本。

工作流程

1. 盘点当前排版标记/规则。
2. 定义清晰的类型角色：
   • 显示/标题
   • 正文
   • 元数据/支持文本
3. 验证可读性基础：
   • 足够的字体大小
   • 足够的行高
   • 足够的对比度
4. 验证链接呈现：
   • 清晰的点击性提示
   • 相关的已访问状态
5. 使用 IL1 测试验证数据密集/字母数字上下文的字体选择。
6. 运行脚本检查并修复失败。

审计脚本

运行捆绑的启发式审计器：

ruby scripts/typography_audit.rb "app/assets/stylesheets/**/*.css"

您可以扫描混合文件类型（CSS/SCSS/HTML 带 <style> 块）。

从发现的字体家族生成 IL1 样本页面：

ruby scripts/typography_audit.rb "app/assets/stylesheets/**/*.css" --il1-html /tmp/il1.html

脚本报告常见风险：

• 小字体大小
• 紧凑的行高
• 低文本/背景对比对
• 过多的家族数量
• 弱链接可发现性（例如，移除下划线无替代）
• 缺少 :visited 颜色样式

将结果视为护栏。始终在实际 UI 上下文中应用视觉审查。

输出预期

在用户面向任务中使用此技能时：

1. 提供具体的排版更改（标记/规则级别）。
2. 解释对可读性/理解的影响。
3. 注意任何有意的权衡（品牌约束、设计系统兼容性、边缘情况例外）。