--- title: "字阶令牌" description: "按层级命名的每个文本样式，附实时样张、解析后的各项度量，以及强调时采用的字重。" url: "https://tanrei.chnotchy.com/zh-cn/tokens/typescale/" last_updated: 2026-10-23T17:33:05.000Z --- # 字阶令牌 > 按层级命名的每个文本样式，附实时样张、解析后的各项度量，以及强调时采用的字重。 样张使用生成的 CSS 自定义属性来排版，所以你看到的就是 `@tanrei/web` 实际提供的效果。每个角色把自己的各个部分作为单独的属性公开：`-font-family`、`-font-size`、`-line-height`、`-font-weight`、`-letter-spacing` 和 `-font-weight-emphasized`，另有一个 `-font` 简写。使用指引（`h2` 或 `p` 对应哪个角色，以及为什么强调是一种字重而不是一个角色）请阅读[字体排印](https://tanrei.chnotchy.com/zh-cn/foundations/typography/)。 ## 十六个角色 `body` 14px / 22px · 400 (强调 500) · 0 端正清朗的界面 Tanrei `body-large` 16px / 26px · 400 (强调 500) · 0 端正清朗的界面 Tanrei `body-small` 13px / 20px · 400 (强调 500) · +0.005em 端正清朗的界面 Tanrei `caption` 11px / 16px · 500 (强调 600) · +0.02em 端正清朗的界面 Tanrei `code` 13px / 20px · 400 (强调 500) · 0 const tanrei = 端麗; `code-small` 12px / 16px · 400 (强调 500) · 0 const tanrei = 端麗; `display` 48px / 52px · 450 (强调 550) · -0.04em 端正清朗的界面 Tanrei `eyebrow` 12px / 16px · 500 (强调 600) · +0.08em Design tokens `heading-1` 32px / 40px · 500 (强调 600) · -0.03em 端正清朗的界面 Tanrei `heading-2` 24px / 32px · 500 (强调 600) · -0.025em 端正清朗的界面 Tanrei `heading-3` 20px / 28px · 500 (强调 600) · -0.02em 端正清朗的界面 Tanrei `heading-4` 18px / 26px · 500 (强调 600) · -0.015em 端正清朗的界面 Tanrei `heading-5` 16px / 24px · 500 (强调 600) · -0.01em 端正清朗的界面 Tanrei `heading-6` 14px / 20px · 500 (强调 600) · 0 端正清朗的界面 Tanrei `label` 14px / 20px · 500 (强调 600) · 0 端正清朗的界面 Tanrei `label-small` 12px / 16px · 500 (强调 600) · +0.01em 端正清朗的界面 Tanrei | 令牌 | 字体族 | 字号 | 行高 | 字重 | 强调字重 | 字距 | | --- | --- | --- | --- | --- | --- | --- | | `--tanrei-sys-typescale-body` | Inter | 14px | 1.5714 | 400 | 500 | 0px | | `--tanrei-sys-typescale-body-large` | Inter | 16px | 1.625 | 400 | 500 | 0px | | `--tanrei-sys-typescale-body-small` | Inter | 13px | 1.5385 | 400 | 500 | 0.065px | | `--tanrei-sys-typescale-caption` | Inter | 11px | 1.4545 | 500 | 600 | 0.22px | | `--tanrei-sys-typescale-code` | Roboto Mono | 13px | 1.5385 | 400 | 500 | 0px | | `--tanrei-sys-typescale-code-small` | Roboto Mono | 12px | 1.3333 | 400 | 500 | 0px | | `--tanrei-sys-typescale-display` | Inter | 48px | 1.0833 | 450 | 550 | -1.92px | | `--tanrei-sys-typescale-eyebrow` | Inter | 12px | 1.3333 | 500 | 600 | 0.96px | | `--tanrei-sys-typescale-heading-1` | Inter | 32px | 1.25 | 500 | 600 | -0.96px | | `--tanrei-sys-typescale-heading-2` | Inter | 24px | 1.3333 | 500 | 600 | -0.6px | | `--tanrei-sys-typescale-heading-3` | Inter | 20px | 1.4 | 500 | 600 | -0.4px | | `--tanrei-sys-typescale-heading-4` | Inter | 18px | 1.4444 | 500 | 600 | -0.27px | | `--tanrei-sys-typescale-heading-5` | Inter | 16px | 1.5 | 500 | 600 | -0.16px | | `--tanrei-sys-typescale-heading-6` | Inter | 14px | 1.4286 | 500 | 600 | 0px | | `--tanrei-sys-typescale-label` | Inter | 14px | 1.4286 | 500 | 600 | 0px | | `--tanrei-sys-typescale-label-small` | Inter | 12px | 1.3333 | 500 | 600 | 0.12px | 生成自 `design/tokens/tanrei.light.tokens.json`, `tokens/sys/typescale.tokens.json` ## 强调级差 强调文本就是该角色在自身字重上加上所属系列的级差。角色所属的系列是其名称的第一段；`caption`、`code`、`code-small` 和 `eyebrow` 采用 label 的级差。各内置系统的四个级差： | 设计系统 | `emphasis.display` | `emphasis.heading` | `emphasis.body` | `emphasis.label` | | --- | --- | --- | --- | --- | | `tanrei` | 100 | 100 | 100 | 100 | | `cupertino` | 100 | 200 | 200 | 200 | | `m3-expressive-like` | 100 | 100 | 100 | 200 | | `m3-like` | 100 | 100 | 100 | 200 | 生成自 `tokens/systems/*.system.json`, `design/tokens//tanrei.light.tokens.json`