Typography · Design System

展示

系统样例

无衬线

设计系统 Design System 0123global.typography.family.sans

等宽

全局 → 语义 → 组件global.typography.family.mono

圆体

0123456789global.typography.family.rounded

字号阶梯

固定值用于正文和控件，流体值用于大标题。

120.75rem

清晰的层级 Aa 0123

130.8125rem

清晰的层级 Aa 0123

140.875rem

清晰的层级 Aa 0123

161rem

清晰的层级 Aa 0123

181.125rem

清晰的层级 Aa 0123

201.25rem

清晰的层级 Aa 0123

241.5rem

清晰的层级 Aa 0123

322rem

清晰的层级 Aa 0123

40clamp(2rem, 3vw, 2.5rem)

清晰的层级 Aa 0123

48clamp(2.5rem, 4vw, 3rem)

清晰的层级 Aa 0123

64clamp(3rem, 6vw, 4rem)

清晰的层级 Aa 0123

80clamp(3.5rem, 8vw, 5rem)

清晰的层级 Aa 0123

96clamp(4rem, 10vw, 6rem)

清晰的层级 Aa 0123

字重

用层级表达重要程度，不用尺寸代替字重。

regular界面文字 400

medium界面文字 500

semibold界面文字 600

bold界面文字 700

行高与字距

正文保持可读，展示标题保持紧凑。

leading.display1.05
leading.control1
leading.heading1.2
leading.compact1.35
leading.body1.6
tracking.display-0.045em
tracking.heading-0.025em
tracking.normal0
tracking.label0.04em

Token

1 个分类

名称	类型	浅色	深色	预览
`global.typography.family.sans`界面字体栈	fontFamily	`ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", "PingFang SC", sans-serif`	`ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", "PingFang SC", sans-serif`	Aa
`global.typography.family.mono`代码与 Token 字体栈	fontFamily	`"SFMono-Regular", Consolas, "Liberation Mono", monospace`	`"SFMono-Regular", Consolas, "Liberation Mono", monospace`	Aa
`global.typography.family.rounded`数字与紧凑标签字体栈	fontFamily	`"SF Pro Rounded", ui-rounded, system-ui, sans-serif`	`"SF Pro Rounded", ui-rounded, system-ui, sans-serif`	Aa
`global.typography.size.12`12px	dimension	`0.75rem`	`0.75rem`	Aa
`global.typography.size.13`13px	dimension	`0.8125rem`	`0.8125rem`	Aa
`global.typography.size.14`14px	dimension	`0.875rem`	`0.875rem`	Aa
`global.typography.size.16`16px	dimension	`1rem`	`1rem`	Aa
`global.typography.size.18`18px	dimension	`1.125rem`	`1.125rem`	Aa
`global.typography.size.20`20px	dimension	`1.25rem`	`1.25rem`	Aa
`global.typography.size.24`24px	dimension	`1.5rem`	`1.5rem`	Aa
`global.typography.size.32`32px	dimension	`2rem`	`2rem`	Aa
`global.typography.size.40`32–40px	dimension	`clamp(2rem, 3vw, 2.5rem)`	`clamp(2rem, 3vw, 2.5rem)`	Aa
`global.typography.size.48`40–48px	dimension	`clamp(2.5rem, 4vw, 3rem)`	`clamp(2.5rem, 4vw, 3rem)`	Aa
`global.typography.size.64`48–64px	dimension	`clamp(3rem, 6vw, 4rem)`	`clamp(3rem, 6vw, 4rem)`	Aa
`global.typography.size.80`56–80px	dimension	`clamp(3.5rem, 8vw, 5rem)`	`clamp(3.5rem, 8vw, 5rem)`	Aa
`global.typography.size.96`64–96px	dimension	`clamp(4rem, 10vw, 6rem)`	`clamp(4rem, 10vw, 6rem)`	Aa
`global.typography.weight.regular`常规	fontWeight	`400`	`400`	Aa
`global.typography.weight.medium`中等	fontWeight	`500`	`500`	Aa
`global.typography.weight.semibold`半粗	fontWeight	`600`	`600`	Aa
`global.typography.weight.bold`粗体	fontWeight	`700`	`700`	Aa
`global.typography.leading.display`展示行高	number	`1.05`	`1.05`	Aa
`global.typography.leading.control`控件行高	number	`1`	`1`	Aa
`global.typography.leading.heading`标题行高	number	`1.2`	`1.2`	Aa
`global.typography.leading.compact`紧凑行高	number	`1.35`	`1.35`	Aa
`global.typography.leading.body`正文行高	number	`1.6`	`1.6`	Aa
`global.typography.tracking.display`展示字距	dimension	`-0.045em`	`-0.045em`	Aa
`global.typography.tracking.heading`标题字距	dimension	`-0.025em`	`-0.025em`	Aa
`global.typography.tracking.normal`正文字距	dimension	`0`	`0`	Aa
`global.typography.tracking.label`标签字距	dimension	`0.04em`	`0.04em`	Aa

使用

使用规则

页面和组件通过语义或组件 Token 使用这些值。
不要在页面中复制原始值。
浅色和深色主题分别检查实际组合。