typography-scale-builder

字体排印比例构建器

字体排印是设计系统的骨架：大多数看起来“不对劲”的产品，字体问题往往早于配色问题。将比例构建成一套包含角色和计算规则的系统，然后让代码库真正用起来。输入：选定的字体（或先运行 font-pairing-suggester）、产品类型（营销网站、密集型应用 UI、长篇编辑内容）以及目标设备范围。

工作流

1. 审查现有样式。 清点代码库中的每个字号、行高、字间距和字重。常见情况是——有 23 种字号，其中 9 种彼此相差不到 2px——这正说明需要建立系统。梳理哪些是真正不同的角色，哪些只是逐渐累积的偏差。
2. 选择比例计算规则。 设定基础字号（营销或编辑内容的正文下限为 16px；密集型应用 UI 可接受 13-14px）和比例——以 UI 为主的产品采用较温和的比例（1.125-1.2），提供更易用的字号间隔，视觉变化也更克制；营销或编辑内容则采用较大的比例（1.25-1.333），形成明显的层级。营销网站默认使用流式字号：每个级别都用 clamp() 设置范围，让标题在视口边界之间缩放，避免因断点而跳变；应用 UI 使用固定级别也没问题。
3. 为每个级别设置配套属性——这是只给出单个数字的“比例”会遗漏的部分：字号增大时收紧行高（正文约为 1.5-1.6，展示字号的标题降至 1.1-1.2）；展示字号使用负字间距（-1% 至 -2.5%），小型大写字母或标签则使用略微为正的字间距；按字体设定字重角色（正文、强调、标题、展示分别使用什么字重，以及删除哪些已加载但没有用到的字重）。
4. 定义角色。 使用语义令牌，而不是字号名称：display、h1-h4、body-lg、body、body-sm、caption、overline、code。每个角色都将字号级别、行高、字间距、字重和字体系列整合为一个令牌。组件使用角色；不应有人直接组合原始字号级别。
5. 垂直韵律。 按角色设置下方间距规则（标题边距与其字号成比例，段落间距依据正文行高），为标题设置 text-wrap: balance，并限制行长（正文内容为 65-75ch），确保在每种视口下都易于阅读。
6. 导出并改造现有代码。 生成 typography-tokens.json、Tailwind fontSize 配置（每个角色使用包含字号、行高和字间距的元组；v4 使用 @theme）、包含角色类的 typography.css，以及 TYPOGRAPHY.md。然后将第 1 步的清单映射到各个角色并逐项替换——对于无法明确映射的项目添加标记（它要么代表缺失的角色，要么是应该删除的偏差）。

规则

• 所有地方都优先使用角色，而非字号：使用 text-h2，绝不使用 text-[28px]——如果没有合适的角色，组件应向系统申请一个，而不是让开发者填写数字。
• 每个字号级别都必须带有行高和字间距。没有配套属性的字号只算半个令牌。
• 比例只包含层级所需的最少级别——7-9 个角色几乎适用于任何产品；达到 12 个或更多，通常意味着角色重复。
• 正文是基准：先确定适合阅读的正文大小，再围绕它扩展比例——绝不要为了让标题看起来更大而缩小正文。
• 只加载角色实际使用的字重。每个未使用的字重都是首次绘制时的无用负担。
• 流式字号必须检查最小值和最大值：clamp() 的最小值在 320px 手机屏幕上仍须易读，最大值在超宽屏上也不能撑坏布局。

快速命令

• “为这个项目构建一套字体排印系统”——完整工作流
• “审查我的字体排印”——仅执行第 1 步
• “让我的标题采用流式字号”——将现有比例转换为流式字号
• “改造组件”——根据现有系统执行第 6 步