层级通过字体粗细、大小、行高和字母间距的差异来传达。更新后的排版缩放将样式组织成六个角色,其命名旨在描述其用途:display(显示)、title(标题)、label(标签)、body(正文)、numeral(数字)和 arc(弧形)。新角色与屏幕尺寸无关,可更容易应用于各种用例。
显示样式
显示样式用于显示大型短文本字符串,以展示高度概览性的焦点信息、重要指标、置信度或富有表现力的品牌瞬间。
- DisplayLarge 是最大的标题。显示样式是屏幕上最大的文本,保留用于简短、高度概览性的焦点信息、重要指标、置信度或富有表现力的品牌瞬间,这些内容得益于突出的缩放和样式。
- DisplayMedium 是第二大的标题。显示样式是屏幕上最大的文本,保留用于简短、高度概览性的焦点信息、重要指标、置信度或富有表现力的品牌瞬间,这些内容得益于突出的缩放和样式。
- DisplaySmall 是最小的标题。显示样式是屏幕上最大的文本,保留用于简短、高度概览性的焦点信息、重要指标、置信度或富有表现力的品牌瞬间,这些内容得益于突出的缩放和样式。
标题
标题是用于导航的分层文本,例如页面、章节标题或子章节标题(如 TitleSmall)。
- TitleLarge 是最大的标题。标题小于显示样式。它们通常保留用于中等强调的较短文本,不建议用于交互式组件,而是用于页面标题或副标题。
- TitleMedium 是中等标题。标题小于显示样式。它们通常保留用于中等强调的较短文本,不建议用于交互式组件,而是用于页面标题或副标题。
- TitleSmall 是最小的标题。标题小于显示样式。它们通常保留用于中等强调的较短文本,不建议用于交互式组件,而是用于页面标题或副标题。
标签
标签用于组件级别的文本,描述交互后会发生的动作。标签最常见和广泛的应用是按钮内嵌的文本。
- LabelLarge 是最大的标签。标签用于显示标题按钮上的标签等突出文本,应用于交互式组件。
- LabelMedium 是中等标签,也是最常用的标签。标签用于显示按钮上的主要标签等文本,应用于交互式组件。
- LabelSmall 是小标签。标签用于显示按钮上的次要标签、紧凑按钮上的标签等文本,应用于交互式组件。
正文
正文保留用于内容文本,例如正文段落、复杂数据可视化中使用的文本、时间戳和元数据。
- BodyLarge 是最大的正文。正文文本通常用于长篇写作,因为对于小文本尺寸效果很好。对于较长的文本部分,建议使用衬线或无衬线字体。
- BodyMedium 是第二大的正文。正文文本通常用于长篇写作,因为对于小文本尺寸效果很好。对于较长的文本部分,建议使用衬线或无衬线字体。
- BodySmall 是第三大的正文。正文文本通常用于长篇写作,因为对于小文本尺寸效果很好。对于较长的文本部分,建议使用衬线或无衬线字体。
- BodyExtraSmall 是最小的正文。正文文本通常用于长篇写作,因为对于小文本尺寸效果很好。对于较长的文本部分,建议使用衬线或无衬线字体。
数字
数字文本样式用于数字,通常限制在几个字符。在较大的显示尺寸下可以具有更强的表现力。提供灵活度,可在最小化本地化和字体缩放问题的情况下扩展宽度轴。
- NumeralsExtraLarge 是数字的最大角色。数字默认使用表格间距。它们突出并表达一览即懂的数字,通常仅限于两三个字符,无需本地化,例如充电屏幕或时间选择器。
- NumeralsLarge 是数字的第二大角色。数字默认使用表格间距。它们是大型数字字符串,仅限于较大的时间显示,无需本地化,例如倒计时或时间选择器。
- NumeralsMedium 是数字的第三大角色。数字默认使用表格间距。它们是中等大小的数字,仅限于短数字字符串,无需本地化,例如步数计数或时间选择器。
- NumeralsSmall 是数字的第四大角色。数字默认使用表格间距。它们用于在较小尺寸下需要强调的数字,无需本地化,例如日期和时间选择器。
- NumeralsExtraSmall 是数字的最小角色。数字默认使用表格间距。它们用于需要容纳较长数字字符串的数字,无需本地化,例如运动中指标。
弧形
弧形标题文本用于构成 UI 标识的弯曲文本,例如时间文本和弯曲标签。定制的字体轴专门优化沿曲线的排版,以适应字符位于弯曲屏幕顶部与底部时出现的不同间距。
顶部
- ArcLarge 用于弧形标题。弧形用于屏幕上沿弯曲路径的文本,保留用于屏幕最顶部或最底部的短标题文本字符串,例如确认叠加层。
- ArcMedium 用于弧形标题。弧形用于屏幕上沿弯曲路径的文本,保留用于屏幕最顶部或最底部的短标题文本字符串,例如页面标题。
- ArcSmall 用于有限的弧形文本字符串。弧形用于屏幕上沿弯曲路径的文本,保留用于屏幕底部的短弯曲文本字符串,例如时间文本。
底部
- ArcLarge 用于弧形标题。弧形用于屏幕上沿弯曲路径的文本,保留用于屏幕最顶部或最底部的短标题文本字符串,例如确认叠加层。
- ArcMedium 用于弧形标题。弧形用于屏幕上沿弯曲路径的文本,保留用于屏幕最顶部或最底部的短标题文本字符串,例如页面标题。
- ArcSmall 用于有限的弧形文本字符串。弧形用于屏幕上沿弯曲路径的文本,保留用于屏幕底部的短弯曲文本字符串,例如时间文本。
排版设置
垂直排版依赖于内边距、边框和基线来确保在任何尺寸下文本的可读性。在为排版设置、文本大小调整、密度以及在自适应布局中使用文本做出决策时,应考虑工程方面的因素和平台约定。
使用基线
基线是文本行所处的不可见线条。在 Material Design 中,基线是衡量文本与元素之间垂直距离的重要规范。

检查可读性
为了增强应用中字体的可读性,请完成这些可读性检查。
表格数字和等宽数字
在数值可能经常变化、动画化或快速变化的地方,例如倒计时器、选择器或正在进行的健身指标,请使用表格数字(也称为等宽数字),而不是比例数字。
使用等宽表格数字使数值在视觉上对齐,以便更好地扫描和对齐,并避免数字或相邻文本跳动。
行高
行高是每行文本之间的空间,与排版大小直接相关。在 Watch 设备上,垂直空间有限,因此行高经过优化以确保可读性,同时最大化在视口内可见的文本行数。

额外行高
在 Jetpack Compose 和 Android 上,排版会自动在最后一行获得额外的行高,以防止较长的字符重叠。这就是为什么某些截图测试无法完全对齐的原因。

额外行高速查表
默认样式(文本大小 / 行高) | 每行的默认行高 | 仅最后一行的额外行高 | 计算 |
---|---|---|---|
60 / 60 | 0 (100%) | + 15 (125%) | 60 / 75 (15/125%) (60+15) |
50 / 50 | 0 (100%) | + 13 (126%) | 50 / 63 (13/126%) (50+13) |
40 / 44 | 4 (110%) | + 7 (127.5%) | 40 / 51 (11/127.5%) (44+7) |
30 / 34 | 4 (113%) | + 3 (123.3%) | 30 / 37 (7/123.3%) (34+3) |
24 / 26 | 2 (108%) | + 4 (125%) | 24 / 30 (6/125%) (26+4) |
20 / 22 | 2 (110%) | + 3 (125%) | 20 / 25 (5/125%) (22+3) |
18 / 20 | 2 (111%) | + 3 (125%) | 18 / 23 (5/125%) (20+3) |
16 / 18 | 2 (112.5%) | + 2 (125%) | 16 / 20 (4/125%) (18+2) |
15 / 18 | 3 (120%) | + 1 (126.6%) | 15 / 19 (4/126.6%) (18+1) |
14 / 16 | 2 (114%) | + 2 (128.5%) | 14 / 18 (4/128.5%) (16+2) |
13 / 16 | 3 (123%) | + 0 (123%) | 13 / 16 (3/123%) (16+0) |
12 / 14 | 2 (116.6%) | + 1 (125%) | 12 / 15 (3/125%) (14+1) |
10 / 12 | 2 (120%) | + 0 (120%) | 10 / 12 (2/120%) (12+0) |