Semantic / 排版
Display Typography
用于首屏、页面标题和章节标题。
展示
系统样例
display.heroExpanded设计清晰的界面
Design with clarity
- 字号
clamp(4rem, 10vw, 6rem)- 字重
- 700
- 行高
- 1.05
- 字距
-0.045em
display.hero设计清晰的界面
Design with clarity
- 字号
clamp(3.5rem, 8vw, 5rem)- 字重
- 700
- 行高
- 1.05
- 字距
-0.045em
display.titleLarge设计清晰的界面
Design with clarity
- 字号
clamp(3rem, 6vw, 4rem)- 字重
- 700
- 行高
- 1.05
- 字距
-0.045em
display.section设计清晰的界面
Design with clarity
- 字号
clamp(2.5rem, 4vw, 3rem)- 字重
- 700
- 行高
- 1.05
- 字距
-0.025em
display.titleMedium设计清晰的界面
Design with clarity
- 字号
clamp(2rem, 3vw, 2.5rem)- 字重
- 600
- 行高
- 1.05
- 字距
-0.025em
display.titleSmall设计清晰的界面
Design with clarity
- 字号
2rem- 字重
- 600
- 行高
- 1.2
- 字距
-0.025em
display.label设计清晰的界面
Design with clarity
- 字号
0.875rem- 字重
- 600
- 行高
- 1.35
- 字距
0.04em
Token
1 个分类
| 名称 | 类型 | 浅色 | 深色 | 预览 |
|---|---|---|---|---|
semantic.typography.display.heroExpanded.size超大首屏 | dimension | clamp(4rem, 10vw, 6rem) | clamp(4rem, 10vw, 6rem) | Aa |
semantic.typography.display.heroExpanded.weight超大首屏 | fontWeight | 700 | 700 | Aa |
semantic.typography.display.heroExpanded.leading超大首屏 | number | 1.05 | 1.05 | Aa |
semantic.typography.display.heroExpanded.tracking超大首屏 | dimension | -0.045em | -0.045em | Aa |
semantic.typography.display.hero.size首屏 | dimension | clamp(3.5rem, 8vw, 5rem) | clamp(3.5rem, 8vw, 5rem) | Aa |
semantic.typography.display.hero.weight首屏 | fontWeight | 700 | 700 | Aa |
semantic.typography.display.hero.leading首屏 | number | 1.05 | 1.05 | Aa |
semantic.typography.display.hero.tracking首屏 | dimension | -0.045em | -0.045em | Aa |
semantic.typography.display.titleLarge.size大标题 | dimension | clamp(3rem, 6vw, 4rem) | clamp(3rem, 6vw, 4rem) | Aa |
semantic.typography.display.titleLarge.weight大标题 | fontWeight | 700 | 700 | Aa |
semantic.typography.display.titleLarge.leading大标题 | number | 1.05 | 1.05 | Aa |
semantic.typography.display.titleLarge.tracking大标题 | dimension | -0.045em | -0.045em | Aa |
semantic.typography.display.section.size章节标题 | dimension | clamp(2.5rem, 4vw, 3rem) | clamp(2.5rem, 4vw, 3rem) | Aa |
semantic.typography.display.section.weight章节标题 | fontWeight | 700 | 700 | Aa |
semantic.typography.display.section.leading章节标题 | number | 1.05 | 1.05 | Aa |
semantic.typography.display.section.tracking章节标题 | dimension | -0.025em | -0.025em | Aa |
semantic.typography.display.titleMedium.size中标题 | dimension | clamp(2rem, 3vw, 2.5rem) | clamp(2rem, 3vw, 2.5rem) | Aa |
semantic.typography.display.titleMedium.weight中标题 | fontWeight | 600 | 600 | Aa |
semantic.typography.display.titleMedium.leading中标题 | number | 1.05 | 1.05 | Aa |
semantic.typography.display.titleMedium.tracking中标题 | dimension | -0.025em | -0.025em | Aa |
semantic.typography.display.titleSmall.size小标题 | dimension | 2rem | 2rem | Aa |
semantic.typography.display.titleSmall.weight小标题 | fontWeight | 600 | 600 | Aa |
semantic.typography.display.titleSmall.leading小标题 | number | 1.2 | 1.2 | Aa |
semantic.typography.display.titleSmall.tracking小标题 | dimension | -0.025em | -0.025em | Aa |
semantic.typography.display.label.size展示标签 | dimension | 0.875rem | 0.875rem | Aa |
semantic.typography.display.label.weight展示标签 | fontWeight | 600 | 600 | Aa |
semantic.typography.display.label.leading展示标签 | number | 1.35 | 1.35 | Aa |
semantic.typography.display.label.tracking展示标签 | dimension | 0.04em | 0.04em | Aa |
使用
使用规则
- 页面和组件通过语义或组件 Token 使用这些值。
- 不要在页面中复制原始值。
- 浅色和深色主题分别检查实际组合。