排版与字体设计

问题从哪来

界面「能看」和「好读」往往差在字体与层级：标题与正文各用一套无关联的字号，中英文混排时 fallback 打架，或者 Web 字体拖慢 FCP/CLS。这类问题通常不是缺一个「好看字体名」，而是缺少可落地的 Type Scale、行高/字重阶梯和加载策略。

技能会怎么做

技能以排版设计顾问角色工作，按场景（中文为主/英文为主、长文阅读/短文案、品牌气质）给出可执行的方案：

• 字体配对：标题可用 serif/display 表达个性，正文优先高可读 sans-serif；混排时明确中英 fallback 链。
• 排版层级：用 Minor Third（1.2）或 Perfect Fourth（1.333）等比例建立字号阶梯；正文行高约 1.5–1.75，标题约 1.2。
• 性能：子集化、font-display: swap、预加载关键字重/可变字体，减少请求与布局抖动。
• 交付物：输出 CSS 变量体系、排版层级表，以及加载策略说明（对齐 TypographySystem 与 references 模板思路）。

适用边界

面向 Web/App/屏幕文档 的可读性与 Web 字体性能，不覆盖印刷流程（出血、陷印、CMYK 等）。若项目已有设计系统，技能输出应作为变量与层级规范接入，而非替代品牌手册里的全部视觉规则。