typeset

评估并改进显得平庸、不一致或结构混乱的排版，让看起来像默认样式的文本变得精心设计、润色到位。

必须的准备工作

用户通过 /typeset 启动此工作流。此技能激活后，加载 $frontend-design——其中包含设计原则、反模式和上下文收集协议。继续之前，必须遵循该协议；如果尚无设计上下文，必须先加载 $setup。

---

评估当前排版

分析当前字体排版有哪些不足或显得平庸：

1. 字体选择：

   • 是否用了不起眼的默认字体？（Inter、Roboto、Arial、Open Sans、系统默认字体）
   • 字体是否符合品牌个性？（活泼的品牌不应使用商务风字体）
   • 字体系列是否过多？（超过 2-3 种通常会显得杂乱）

2. 层级：

   • 能否一眼区分标题、正文和说明文字？
   • 字号是否过于接近？（14px、15px、16px 会让层级显得模糊）
   • 字重对比是否足够强？（Medium 与 Regular 几乎难以区分）

3. 字号与比例：

   • 是否有一致的字号比例，还是字号随意设定？
   • 正文字体是否达到最低可读字号？（16px 及以上）
   • 字号策略是否适合使用场景？（应用 UI 使用固定的 rem 比例；营销／内容页标题使用流式 clamp()）

4. 可读性：

   • 行长是否舒适？（理想范围为 45-75 个字符）
   • 行高是否适合字体和使用场景？
   • 文字与背景之间的对比度是否足够？
   • 斜体、下划线和全大写是否经过刻意设计，而非仅作装饰？

5. 一致性：

   • 相同元素在各处的样式是否一致？
   • 字重的使用是否一致？（同一角色在一个区块中使用 Bold，在另一个区块中却使用 Semibold）
   • 字间距是否经过刻意设计，还是处处都使用默认值？
   • 各类元素的大小写是否一致？（标题、按钮、标签、提示消息、元数据）

重要：目标不是让文本显得“更花哨”，而是让它更清晰、更易读、更有设计感。好的排版不会引人注意；糟糕的排版则会分散注意力。

规划排版改进

参阅 frontend-design 技能中的排版参考，了解字号比例、字体搭配、加载策略和字体选择启发式规则的详细指南。 参阅文本层级与可读性，了解行长、行高、对齐方式、基线、标签／数值处理、语义层级与视觉层级、链接强调和数字对齐。 如果排版问题实则是层级问题，请参阅层级检查清单。

将共享的文本层级／可读性参考作为阅读舒适度和文本结构规则的通用依据，然后在此基础上应用具体的排版改动。

制定系统化方案：

• 字体选择：是否需要更换字体？哪些字体适合品牌／使用场景？
• 字号比例：建立受限的 UI 字号比例；借鉴模块化比例，然后根据实际需求精心设计各级字号
• 字重策略：哪些字重适用于哪些角色？（正文使用 Regular，标签使用 Semibold，标题使用 Bold，或根据实际需求选择）
• 间距：行高、字间距以及排版元素之间的外边距
• 规范：是否清晰记录了排版角色，以便未来的屏幕保持一致？

系统化改进排版

字体选择

如果需要更换字体：

• 选择能体现品牌个性的字体
• 搭配具有真实对比的字体（衬线体 + 无衬线体、几何体 + 人文体），或在同一字体家族中使用多个字重
• 优先选择字重范围丰富的字体家族；字重越丰富，通常字体设计越精良
• 优先保证 UI 文本的可读性，避免在正文中使用 x 字高较低的窄体展示字体
• 确保 Web 字体加载不会导致布局偏移（font-display: swap、度量匹配的后备字体）

建立层级

构建清晰的字体比例：

• 5–7 种字号即可满足大多数需求：说明文字、次要文本、正文、小标题、标题、展示文字，以及可选的眉题
• 先用比例进行探索，再确定适合界面的实际数值
• 结合多种维度：字号 + 字重 + 颜色 + 间距，形成鲜明层级，不要只依赖字号
• 字重对比要足够明显，让层级一目了然；中等字重和常规字重之间的差异常常过于细微
• 应用 UI：使用固定的、基于 rem 的字体比例，可选择在 1–2 个断点处调整。流式字号会削弱密集型容器布局所需的空间可预测性
• 营销 / 内容页面：标题和展示文字使用 clamp(min, preferred, max) 实现流式字号，正文保持固定字号

提升可读性

• 使用 ch 单位为文本容器设置 max-width（max-width: 65ch）
• 大多数段落控制在 45–75 个字符
• 根据上下文调整行高：标题更紧凑（1.1–1.2），正文更宽松（1.5–1.7）
• 行长越长，行高越大；字号越大，行高越小
• 深色背景上的浅色文字应稍微增加行高
• 确保正文字号至少为 16px / 1rem

打磨细节

• 数据表和需要对齐的数字使用 tabular-nums
• 需要对比时，数字列应右对齐
• 同一行出现不同字号的文本时，按基线对齐
• 适当设置 letter-spacing：小型大写字母和全大写文字稍微加宽，较大的展示文字使用默认间距或稍微收紧
• 字体在较大字号下自然显得松散时，有选择地收紧标题字距
• 少量使用斜体：短句强调、引文和用户评价适合使用斜体；较长的 UI 文案和控件则不适合
• 有意为链接和简短重点内容添加下划线；不要为密集文本统一添加下划线
• 按用途保持大小写风格一致；使用全大写标签或元数据时，增加字距
• 不要默认将每个链接都设为亮蓝色；应根据链接在阅读流程中的重要性匹配强调程度
• 使用语义化的令牌名称（--text-body、--text-heading），而非表示具体取值的名称（--font-16）
• 设置 font-kerning: normal，并酌情考虑 OpenType 特性

字重一致性

• 为每种字重定义明确用途，并始终保持一致
• 字重不超过 3–4 种（常规、中等、半粗体、粗体已足够）
• 不要使用许多差异极小的字重，优先选择用途之间差异更明显的字重
• 只加载实际使用的字重（每种字重都会增加页面加载量）

比例一致性

• 使用 rem 或 px 作为比例的源值，然后在实现时优先使用 rem，以适应用户设置
• 避免在嵌套 UI 中使用基于 em 的字号比例——后代元素很快就会偏离系统
• 如果比例需要大量分数尺寸才能奏效，那它可能过于数学化，不够实用

绝不要：

• 使用超过 2-3 种字体
• 随意选择字号——确定一套比例
• 将正文设为小于 16px
• 使用装饰性／展示型字体作为正文字体
• 禁用浏览器缩放（user-scalable=no）
• 在嵌套 UI 中使用 em 定义字号比例
• 只为营造层级而使用极小字号——优先使用字重或颜色
• 将长篇文本居中对齐
• 认为完美的数学比例一定胜过精心设计的比例
• 在实现中使用 px 设置字号——使用 rem 以适应用户设置
• 在品牌个性很重要时，默认使用 Inter/Roboto/Open Sans
• 搭配相似但不完全相同的字体（如两种几何无衬线字体）

验证排版改进

• 层级：能否立即区分标题、正文和说明文字？
• 可读性：长篇阅读时，正文字体是否舒适易读？
• 一致性：相同作用的元素在各处的样式是否一致？
• 个性：排版是否体现品牌特色？
• 性能：网页字体是否高效加载，且不会导致布局偏移？
• 无障碍性：文本是否符合 WCAG 对比度要求？是否支持放大至 200%？

请记住：排版是界面设计的基础，承载着绝大部分信息。做好排版，是你能做出的影响最大的改进。