typeset

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

必须的准备工作

阅读 frontend-design，并遵循其上下文收集协议。重用现有上下文，只针对影响重大的信息缺口提问。

---

评估当前排版

分析当前字体排版有哪些薄弱或平庸之处：

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 技能中的排版参考，了解字体比例、字体搭配、加载策略和字体选择启发式规则的详细指导。 查阅文本层级与可读性，了解行长、行高、对齐、基线、标签/数值处理、语义与视觉层级、链接强调和数字对齐。 如果排版问题实质上是伪装成排版问题的层级问题，请参考层级检查清单。 在 React 或 Tailwind 项目中更改 Web 字体时，添加新字体文件前，请先查阅排版参考中关于框架字体加载、回退字体度量、OpenType 工具、可变字体轴和字体载荷预算的章节。

将共享的文本层级/可读性参考视为阅读舒适度和文本结构规则的通用依据，再应用此处的排版专属改动。

制定系统化计划：

• 字体选择：是否需要更换字体？什么字体适合品牌/使用场景？
• 字体比例：建立受限的 UI 字号比例；以模块化比例为灵感，再手动设计实际所需的字号阶梯
• 字重策略：哪些字重适用于哪些角色？（正文用 Regular，标签用 Semibold，标题用 Bold——或采用其他适合的方案）
• 间距：行高、字间距，以及排版元素之间的外边距
• 规范：排版角色是否有清晰文档，以便未来的页面保持一致？
• 加载与性能：字体是否经过子集化？框架支持时是否预加载？是否能避免布局偏移？
• OpenType 与数字：数据密集型组件是否需要 tabular-nums、等高数字、禁用代码连字或其他字体特性？

系统化改进排版

字体选择

如果需要更换字体：

• 选择能体现品牌个性的字体
• 搭配具有真实对比的字体（衬线体 + 无衬线体、几何体 + 人文体），或在同一字体家族中使用多个字重
• 优先选择字重范围丰富的字体家族；字重越丰富，通常字体设计越精良
• 优先保证 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%？

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