typeset

评估并改进显得普通、不一致或结构不佳的排版，让默认风格的文字变得精心设计、制作考究。

必须的准备工作

调用 /impeccable ——其中包含设计原则、反模式和 Context Gathering Protocol。继续之前，请遵循该协议；如果尚无设计上下文，必须先运行 /impeccable teach。

---

评估当前排版

分析当前字体有哪些不足或显得普通：

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）
   • 字距是经过刻意设计的，还是处处沿用默认值？

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

制定排版改进方案

查阅 impeccable 技能中的排版参考，了解字号比例、字体搭配和加载策略的详细指导。

制定系统化方案：

• 字体选择：是否需要更换字体？什么字体适合品牌／场景？
• 字号比例：建立模块化比例（例如，比例为 1.25），形成清晰层级
• 字重策略：哪些字重适用于哪些角色？（正文用 Regular，标签用 Semibold，标题用 Bold——或采用其他合适的搭配）
• 间距：行高、字距以及排版元素之间的边距

系统化改进排版

字体选择

如果需要更换字体：

• 选择能体现品牌个性的字体
• 搭配时确保有鲜明对比（衬线 + 无衬线、几何风格 + 人文风格），或者使用同一字体系列的多个字重
• 确保 Web 字体加载不会导致布局偏移（font-display: swap，以及度量匹配的后备字体）

建立层级

构建清晰的字号比例：

• 5 种字号可满足大多数需求：说明文字、次要文字、正文、副标题、标题
• 各层级之间使用统一的比例（1.25、1.333 或 1.5）
• 综合多种维度：结合字号、字重、颜色和间距，形成鲜明层级——不要只依赖字号
• 应用 UI：使用基于 rem 的固定字号比例，可选择在 1-2 个断点进行调整。流式尺寸会削弱密集型容器布局所需的空间可预测性
• 营销／内容页：标题和展示文字使用 clamp(min, preferred, max) 实现流式尺寸。正文字号保持固定

提高可读性

• 使用 ch 单位为文字容器设置 max-width（max-width: 65ch）
• 根据场景调整行高：标题更紧凑（1.1-1.2），正文更宽松（1.5-1.7）
• 深色背景上的浅色文字，行高略微调大
• 确保正文字号至少为 16px / 1rem

优化细节

• 数据表格和需要对齐的数字使用 tabular-nums
• 设置恰当的 letter-spacing：小型大写字母和全大写文本稍微增加字间距，大号展示文本则使用默认或较紧的间距
• 使用语义化令牌名称（--text-body、--text-heading），而非取值名称（--font-16）
• 设置 font-kerning: normal，并在适当时考虑使用 OpenType 特性

字重一致性

• 为每种字重定义明确的用途，并始终遵循
• 字重不要超过 3-4 种（Regular、Medium、Semibold、Bold 已足够）
• 只加载实际使用的字重（每增加一种字重都会增加页面加载量）

切勿：

• 使用超过 2-3 种字体系列
• 随意选择字号——应采用固定的字号比例
• 将正文设为小于 16px
• 在正文中使用装饰性或展示型字体
• 禁用浏览器缩放（user-scalable=no）
• 使用 px 设置字号——应使用 rem 以尊重用户设置
• 在需要体现个性时默认使用 Inter/Roboto/Open Sans
• 搭配相似但不完全相同的字体（例如两种几何无衬线字体）

验证排版改进

• 层级：能否立即区分标题、正文和说明文字？
• 可读性：长篇阅读时，正文是否易于阅读？
• 一致性：相同用途的元素是否始终采用相同样式？
• 个性：排版是否体现了品牌风格？
• 性能：Web 字体是否高效加载，且不会造成布局偏移？
• 无障碍性：文本是否符合 WCAG 对比度比例？是否支持放大至 200%？

请记住：排版是界面设计的基础，承载了大部分信息。做好排版，是最能发挥杠杆效应的改进。