真正的 Typography Token 不只是把 font-size 写成变量，而是把“页面标题、组件标题、正文、辅助信息”等语义和跨平台排版参数绑定起来，让设计和代码能够稳定共享同一层级。
很多“字体 Token”其实只是把 12、14、16、20、24 换了名字，例如 font-100、font-200。设计师仍然需要记住“页面标题到底用 600 还是 700”，开发还要自己组合 line-height 和 weight。这样的 Token 只是变量，没有真正降低决策成本。
01 一、Typography Token 的核心是角色，不是字号
Atlassian 当前排版体系会把 Heading / XXL、XL、L、M 等设计样式映射到代码中的 typography token，并说明适用场景，例如品牌营销、页面标题、组件标题。Carbon 也使用 type token 管理排版，并区分更偏产品效率的 productive 与更具表现力的 expressive 类型。共同点是：Token 需要表达“这个文字承担什么层级”，而不只是“它是多少 px”。
02 二、一个字体 Token 应该包含哪些属性？
至少要考虑 font family、font size、font weight、line height，必要时包含 letter spacing、font style。复杂系统还会涉及 variable font axis、text transform 和平台差异。不要把字号、行高和字重拆成互不关联的三张表，让使用者每次自己拼。
03 三、建立 Primitive → Semantic 两层更容易维护
Primitive 层保存基础值，例如 size-100=12px、size-200=14px、weight-semibold=600；Semantic 层表达用途，例如 typography-body-default、typography-heading-page、typography-label-small。语义层再引用基础值。
这样未来品牌字体替换或产品密度调整时，可以修改映射而不是全站逐个页面调整。DTCG 2025.10 已成为首个稳定版设计 Token 格式，为工具之间交换类型、值、描述和引用提供了标准化基础；但“哪些语义层级适合你的产品”仍然必须由团队自己定义。
04 四、不要把 HTML Heading 和视觉字号混为一谈
视觉上最大的文字不一定永远是 h1，但页面语义必须维持正确结构。Atlassian 的排版指南也明确提醒使用正确的 HTML heading hierarchy 以支持辅助技术。设计系统文档应同时描述“视觉 Token”和“语义标签”的关系，避免开发为了样式选择错误标签。
05 五、正文可读性不能只靠字号
长文正文需要同时考虑字号、行高、行长和字重。Atlassian 对长文给出的通用建议是至少使用 16px 左右的字号；但产品后台的表格和紧凑组件可能需要更小级别。不要因此制定“所有产品正文必须 16px”的绝对规则，而应该针对内容类型建立层级。
06 六、中文和英文不能只共用同一套截图验证
中文字符的视觉密度、字面高度、标点和英文完全不同。同一个 14px/20px 组合在英文看起来轻松，在中文界面可能偏拥挤。还要考虑中英混排、数字、金融符号、日文以及不同字体 fallback。排版 Token 可以共享角色，但不同 locale 可以映射到不同 family、weight 或 line-height。
07 七、响应式字体不是把字号写成 vw
营销官网的大标题可以采用 fluid typography，在一定范围内随视口平滑变化；但产品按钮、表格和表单标签更适合稳定尺寸。可以为 Display 类 Token 设置 min/max 和流动规则，而 Body / UI Token 保持相对稳定。这样既保留品牌表现力，也不会让操作界面在超宽屏无限放大。
08 八、字重不要假设所有字体都有相同表现
600 在不同字体中的视觉重量差异很大，有些字体根本没有真正的 600，只能由浏览器合成。更换字体时不能只保留相同数字，应该重新做光学和可读性评估。Variable Font 也需要明确团队允许使用的轴范围，避免设计工具和生产代码表现不一致。
09 九、Figma Text Style 和代码 Token 要建立明确映射
设计里叫“Heading / M”，代码里就应该能找到对应 Token 或组件。不要让设计师用本地 Text Style，开发用另一套 Sass 变量。最好把 Token 作为共同事实源，再生成 Figma 样式、CSS 变量或平台资源。
10 十、如何控制 Token 数量？
如果两个 Token 在 95% 场景里属性完全相同，只因为来源页面不同就分别命名，系统会迅速膨胀。建议先覆盖稳定角色：Display、Page heading、Section heading、Component heading、Body、Label、Helper、Code 等，再根据真实场景扩展。每新增一个 Token，都问它是否代表新的语义，而不只是“这个页面想稍微大一点”。
好的 Typography System 让团队讨论从“这里用 18 还是 20”变成“这是页面标题还是组件标题”。当决策语言发生这种变化，Token 才真正发挥作用。
常见问题
Typography Token 和 Figma Text Style 有什么区别？
Text Style 是设计工具中的应用方式，Token 是跨工具和代码的设计决策数据。两者可以一一映射，但概念不完全相同。
字体 Token 应该按字号命名还是按用途命名？
建议基础层按数值或尺度命名，语义层按用途命名，例如 body-default、heading-page，这样更容易整体调整。
中文和英文需要两套 Typography Token 吗？
角色可以共用，但字体家族、行高或部分字号可能需要 locale 映射。是否拆分取决于产品语言复杂度。
所有正文都必须 16px 吗？
不是绝对规则。长文内容通常需要更舒适字号，而高密度后台可能有更小文本。关键是结合阅读距离、行高、对比度和任务类型验证。
Token 越细越好吗？
不是。过度细分会让使用者重新陷入选择困难。Token 应代表稳定、可重复的语义角色。
相关服务与进一步咨询
链接复制成功
