目录
- 1. 概览Overview
- 2. 字体Fonts
- 3. 字体等级和标记Type scale & tokens
- 4. 选择字体样式Applying type
原文：Typography – Material Design 3
字体排印让文字清晰美观。
1 概览Overview
- 排版样式包括：显著标题Display、主标题Headline、标题Title、正文Body和标签Label。
- 应用可变字体，提供更多选择。
- 使用设计标记定义字体、行高、尺寸、字距和字重。
1.1 亮点Highlights
1.1.1 可变字体Variable fonts
Roboto Flex和Roboto Serif
关于可变字体的考虑因素包括轮廓Grade、宽度Width、光学尺寸Optical Size等维度。
Roboto Flex和Roboto Serif在大尺寸下具有连续的变化范围，从极细到极粗各种样式。
1.1.2 五种字体样式Five type styles
样式类型按照五种职责进行定义：显著标题display、主标题headline、标题title、正文body和标签label。
以职责命名可以传递更多意义，能够在更广泛的用例中轻松运用。
图3 质感设计第三版拥有5中不同的字体样式：显著标题、主标题、标题、正文、标签。
1.1.3 字体排印标记Typography tokens
质感设计早期版本对字体排印样式采用硬编码。设计标记提供了在产品中定义字体排印的改进方法。标记为元素样式分配一个可配置项，而非固定编码。
字体职能规定了尺寸，如小号、中号和大号，让排印能够匹配设备或环境。
图4 字体排印标记提供多种尺寸以适配设备或设置。
2 字体Fonts
2.1 默认字体Default typefaces
安卓系统的默认字体是Roboto。
Roboto包含3300多个字形，包括世界上的数百种文字。
要获得额外的字体排印灵活性，可以使用Roboto衍生的可变字体Roboto Flex。它扩展了字重、字宽和其他可定制属性（如特定尺寸设计）的范围，还包括900多个字形，支持拉丁字母、希腊字母和西里尔字母。
图5 Roboto Flex包含全部Roboto样式，以及更多字重和字宽，为更多尺寸提供优化。
Roboto Serif是另一个可变字体系列，旨在创造舒适阅读体验。体积虽小，功能强大，可以用到任何地方（包括应用界面），因为它在多种尺寸上具有可扩展的字重和字宽。
图6 Roboto Serif提供了多种字重和字宽。
Noto是一种全球字体集合，支持所有现代和古代字符。
Noto Sans字体系列与Roboto字体兼容。Noto Sans支持150多种花体和数千种文字。对于不支持的文字，Note可作为“后备”字体。
图7 不同书写系统下的多种Noto Sans字体
3 字体等级和标记Type scale & tokens
3.1 字体等级Type scale
字体等级是在整个应用中使用的一系列字体样式，提供灵活一致的样式以实现多种目标。质感设计字体等级由15种不同样式组成，每种都有特定应用和意义。样式按照用途分配（例如显著标题或主标题），根据尺寸（大或小）归类。在质感设计默认字体等级中，标题、标签、正文均采用Roboto字体，提供一致体验。
图8 字体等级是一组不同的样式，以满足产品环境和内容的不同要求。单一产品很少使用所有的字体样式。应当从字体等级中选择适合样式。
3.2 字体排印标记Typography tokens
| 职能 | 尺寸 | 样式 | 设计标记 | 默认值 |
|---|---|---|---|---|
| 显著标题 | 大号 | 字体 | md.sys.typescale.display-large.font | Roboto |
| 行高 | md.sys.typescale.display-large.line-height | 64 | ||
| 尺寸 | md.sys.typescale.display-large.size | 57 | ||
| 字距 | md.sys.typescale.display-large.tracking | -0.25 | ||
| 字重 | md.sys.typescale.display-large.weight | 400 | ||
| 中号 | 字体 | md.sys.typescale.display-medium.font | Roboto | |
| 行高 | md.sys.typescale.display-medium.line-height | 52 | ||
| 尺寸 | md.sys.typescale.display-medium.size | 45 | ||
| 字距 | md.sys.typescale.display-medium.tracking | 0 | ||
| 字重 | md.sys.typescale.display-medium.weight | 400 | ||
| 小号 | 字体 | md.sys.typescale.display-small.font | Roboto | |
| 行高 | md.sys.typescale.display-small.line-height | 44 | ||
| 尺寸 | md.sys.typescale.display-small.size | 36 | ||
| 字距 | md.sys.typescale.display-small.tracking | 0 | ||
| 字重 | md.sys.typescale.display-small.weight | 400 | ||
| 主标题 | 大号 | 字体 | md.sys.typescale.headline-large.font | Roboto |
| 行高 | md.sys.typescale.headline-large.line-height | 40 | ||
| 尺寸 | md.sys.typescale.headline-large.size | 32 | ||
| 字距 | md.sys.typescale.headline-large.tracking | 0 | ||
| 字重 | md.sys.typescale.headline-large.weight | 400 | ||
| 中号 | 字体 | md.sys.typescale.headline-medium.font | Roboto | |
| 行高 | md.sys.typescale.headline-medium.line-height | 36 | ||
| 尺寸 | md.sys.typescale.headline-medium.size | 28 | ||
| 字距 | md.sys.typescale.headline-medium.tracking | 0 | ||
| 字重 | md.sys.typescale.headline-medium.weight | 400 | ||
| 小号 | 字体 | md.sys.typescale.headline-small.font | Roboto | |
| 行高 | md.sys.typescale.headline-small.line-height | 32 | ||
| 尺寸 | md.sys.typescale.headline-small.size | 24 | ||
| 字距 | md.sys.typescale.headline-small.tracking | 0 | ||
| 字重 | md.sys.typescale.headline-small.weight | 400 | ||
| 标题 | 大号 | 字体 | md.sys.typescale.title-large.font | Roboto |
| 行高 | md.sys.typescale.title-large.line-height | 28 | ||
| 尺寸 | md.sys.typescale.title-large.size | 22 | ||
| 字距 | md.sys.typescale.title-large.tracking | 0 | ||
| 字重 | md.sys.typescale.title-large.weight | 400 | ||
| 中号 | 字体 | md.sys.typescale.title-medium.font | Roboto | |
| 行高 | md.sys.typescale.title-medium.line-height | 24 | ||
| 尺寸 | md.sys.typescale.title-medium.size | 16 | ||
| 字距 | md.sys.typescale.title-medium.tracking | 0.15 | ||
| 字重 | md.sys.typescale.title-medium.weight | 500 | ||
| 小号 | 字体 | md.sys.typescale.title-small.font | Roboto | |
| 行高 | md.sys.typescale.title-small.line-height | 20 | ||
| 尺寸 | md.sys.typescale.title-small.size | 14 | ||
| 字距 | md.sys.typescale.title-small.tracking | 0.1 | ||
| 字重 | md.sys.typescale.title-small.weight | 500 | ||
| 正文 | 大号 | 字体 | md.sys.typescale.body-large.font | Roboto |
| 行高 | md.sys.typescale.body-large.line-height | 24 | ||
| 尺寸 | md.sys.typescale.body-large.size | 16 | ||
| 字距 | md.sys.typescale.body-large.tracking | 0.5 | ||
| 字重 | md.sys.typescale.body-large.weight | 400 | ||
| 中号 | 字体 | md.sys.typescale.body-medium.font | Roboto | |
| 行高 | md.sys.typescale.body-medium.line-height | 20 | ||
| 尺寸 | md.sys.typescale.body-medium.size | 14 | ||
| 字距 | md.sys.typescale.body-medium.tracking | 0.25 | ||
| 字重 | md.sys.typescale.body-medium.weight | 400 | ||
| 小号 | 字体 | md.sys.typescale.body-small.font | Roboto | |
| 行高 | md.sys.typescale.body-small.line-height | 16 | ||
| 尺寸 | md.sys.typescale.body-small.size | 12 | ||
| 字距 | md.sys.typescale.body-small.tracking | 0.4 | ||
| 字重 | md.sys.typescale.body-small.weight | 400 | ||
| 标签 | 大号 | 字体 | md.sys.typescale.label-large.font | Roboto |
| 行高 | md.sys.typescale.label-large.line-height | 20 | ||
| 尺寸 | md.sys.typescale.label-large.size | 14 | ||
| 字距 | md.sys.typescale.label-large.tracking | 0.1 | ||
| 字重 | md.sys.typescale.label-large.weight | 500 | ||
| 中号 | 字体 | md.sys.typescale.label-medium.font | Roboto | |
| 行高 | md.sys.typescale.label-medium.line-height | 16 | ||
| 尺寸 | md.sys.typescale.label-medium.size | 12 | ||
| 字距 | md.sys.typescale.label-medium.tracking | 0.5 | ||
| 字重 | md.sys.typescale.label-medium.weight | 500 | ||
| 小号 | 字体 | md.sys.typescale.label-small.font | Roboto | |
| 行高 | md.sys.typescale.label-small.line-height | 16 | ||
| 尺寸 | md.sys.typescale.label-small.size | 11 | ||
| 字距 | md.sys.typescale.label-small.tracking | 0.5 | ||
| 字重 | md.sys.typescale.label-small.weight | 500 |
质感设计字体等级包含两种参考标记类型：品牌和基础。你可以在设计中使用两个不同的字体系列。品牌字体（标记为md.ref.typeface.brand）建议用于大号文字，如主标题Headline和显著标题Display。基础字体（标记为md.ref.typeface.plain）则用于小号文字，如正文字体Body和标签Label。
3.3 定义字体等级Customizing your type scale
如果需要支持不同尺寸的设备，可以定义字体等级，添加或移除样式，甚至使用其他字体替换Roboto。
质感设计采用以14号为基准尺寸的大二度字体等级。基准尺寸是排版正文最常用的样式。
图9 质感设计字体等级采用大二度比例（1.125）。
字体等级渲染尺寸应当以产生显著区别为目标，避免细微差异。
图10 质感设计字体等级包含15种样式。
图11 你的产品大概不会使用质感设计字体等级中全部的样式。在本例中，我们选择五种字体尺寸，忽略其他样式。
图12 如果质感设计字体等级无法满足需求，你可以修改相应数值。本例中，我们将中号显著标题样式修改为不同的尺寸。
在定制字体排印时，首先将选定字体应用到现有样式，匹配字体尺寸和字重。然后调整行距和字距来满足定制要求。粗字体需要大字距，长字符也需要不同的间距。
图13 自定义字体创造独特表现力。
3.3.1 字体尺寸单位Font size unit
下列单位用于描述Android和Web应用字体尺寸。
| 平台 | Android | Web |
|---|---|---|
| 字体尺寸单位 | sp | rem |
| 转换比例 | 1.0 | 0.0625 |
Web浏览器按照根元素尺寸计算rem（基准em）。当代Web浏览器的默认值通常是16像素，转换关系为SP_SIZE/16 = rem。
3.3.2 转换示例Example conversions
| Android | Web |
|---|---|
| 10sp | 0.625rem |
| 12sp | 0.75rem |
| 24sp | 1.5rem |
| 60sp | 3.75rem |
3.3.3 字距单位Letter spacing units
下列是界面中的字距单位。
| 平台 | Android | Web |
|---|---|---|
| 字距单位 | em | rem |
| 转换比例 | 字距像素值/字体尺寸sp值 | 字距像素值/字体尺寸sp值 |
3.3.4 字距示例
| Android | Web |
|---|---|
| (0.2字距/16sp字体尺寸)=0.0125em | (0.2字距/16sp字体尺寸)=0.0125em |
3.4 调整维度Adjustable axes
尽管可变字体可以拥有很多种属性，就于产品设计而言，其中最有用的四种样式属性（或维度）是：字重、轮廓、宽度和大小。
3.4.1 字重Weight
字重是定义字体中字形笔画粗细的属性。常用的字重有常规regular和粗体bold。字重范围可以包括从极细到极粗的各种样式。
可变字体通常会提供一系列连续的笔画粗细变化，提供无限多种字重。
图14 可变字体Roboto Flex提供了连续变化的字重范围。
3.4.2 轮廓Grade
轮廓是对字体笔画粗细的次要调整，和字重是不同的维度。字重和轮廓都会影响笔画粗细，轮廓调整更为细腻，不会改变字符宽度和换行位置。
图15 Roboto Flex提供的轮廓范围从-150到+200。
图16 在深色与浅色模式切换时，同一样式的字符可能变得粗重。此时可以用负轮廓抵消影响。
图17 轮廓可以改变显著程度，不影响文字布局。
3.4.3 宽度Width
宽度是字符占据的水平空间大小。宽度小每行能包含更多字符，宽度大能够体现个性。
图18 Roboto Flex提供的宽度范围从25至150。
图19 正例：宽度小包含更多字符，适合于小区域（如标签）。
图20 反例：宽度大占空间，避免用在空间受限区域（如顶部应用栏）。
3.4.4 光学尺寸Optical size
光学尺寸是同一字体在不同尺寸下的优化版本。小号字体注重可读性。大号字体充分展现文字形态细节，提供多种字重和宽度。
图21 Literata字体提供了7pt到72pt的光学尺寸。
图22 正例：请使用与字体尺寸相匹配的光学尺寸。
图23 反例：不要在小号字体中使用大号光学尺寸。选用较小的光学尺寸。
4 选择字体样式Applying type
字重、尺寸、行高和字距的差异可以表现层级结构。质感设计最新的字体等级将样式分为五种职责，按用途命名：显著标题Display、主标题Headline、标题Title、标签Label和正文Body。这些职责独立于具体设备，易于应用到多种场景。
4.1 字体职责Roles
4.1.1 显著标题Display
有三种显著标题样式：大号、中号、小号。显著标题是屏幕上最大的字体，用于简短的重要文字或数字，在大尺寸屏幕上效果最好。显著标题建议选用表现力强的字体，比如手写体或花体。并尽量选用适当光学尺寸。
图24 表现力强的字体可用于显著标题。
图25 使用显著标题卡片。
图26 强表现力字体用醒目设计吸引读者。
4.1.2 主标题Headline
主标题适合在小屏幕上显示简短的强调文字。这类样式用于标记重要段落或内容。主标题可以使用表现力强的字体。为了维护可读性，要选择适当的行高和字距。
图27 主标题可以选择表现力强的字体。
图28 小屏幕上显示的短文本采用主标题样式。
图29 使用主标题样式的对话框。
4.1.3 标题Title
标题比主标题小，相对较短的中等强调程度文字。例如，用标题样式来区分次要段落或内容。标题不建议使用表现力强的字体，如展示字体、手写体和花体。
图30 新闻标题采用标题样式吸引读者注意。
图31 使用标题样式的顶部应用栏。
图32 要闻：在分类头部使用标题样式的示例。
4.1.4 正文Body
正文样式用于在应用中展示的大段文字。适合正文样式的字体应该是在小尺寸下可读性强的，可以让用户舒服的阅读大段文字的。不要使用表现力强的或装饰性的字体，它们在小尺寸下难以辨认。
图33 正文样式必须保证大段文字的可读性强。
图34 一篇使用正文样式的介绍食谱的文章。
图35 示例：在设置流程中使用正文样式。
4.1.5 标签Label
标签样式是较小的、面向功能的样式，用于组件内的文字或内容中的小号文字，比如图片说明等。例如，按钮组件使用大号标签样式。
图36 标签样式应当能在小尺寸下快速阅读，例如在按钮中。
图37 使用标签样式显示时间的音乐播放器。
图38 使用标签样式显示目标文字的导航栏。
4.2 排版Typesetting
垂直排版使用内边距、外框盒子和基线来保证文字在任何尺寸下的可读性。
在设计排版时要考虑工程实现和平台规范，包括字体缩放、密度和自适应布局中的文字。
4.2.1 使用内边距和外框盒子排版Using padding and bounding boxes
适用于Web和iOS应用。某些设计工具也使用外框盒子排版，但方法不同，需要适配工程实现。在Web界面中，行高与外框盒子高度相同。文字在外框盒子内垂直居中，遵照CSS的“半行间距”标准。文字的垂直位置不能直接设置，是通过外框盒子和字体度量共同决定。
图39 外框盒子高度由指定的行高决定，文字上方和下方的空白距离相同。
内边距是界面元素之间的空白，例如图片与外框盒子，或外框盒子内边缘与文字之间的空间。
图40 外框盒子里文字周围的内边距。
指定界面元素到固定参照点（如容器边缘）的距离。Web应用可以使用Sass或CSS自动计算属性值。
图41 在Web和iOS应用中使用行高、内边距和容器尺寸设定排版。
使用内边距和外框盒子实现垂直对齐：
- 行高 外框盒子高度。
- 居中 使用居中对齐让外框盒子内部上下两边有相等的距离。
- 距离 利用外框盒子高度和上下内边距来确定距离。
图42 1. 行高 2. 居中 3. 距离
4.2.2 使用基线排版Using the baseline
适用于Android应用和跨平台应用。基线是一个虚拟线，文字排列在基线之上。在质感设计中，基线是衡量文字与其他元素间垂直距离的重要规范。
图43 一行文字排列在不可见的基线上。
对于Android平台，指定相对于基线的距离可以实现精确排版。基线可以在设计师之间传递文字位置信息，不受平台或设计工具的影响。
图44 Android屏幕依赖于到基线的距离。
使用基线实现垂直对齐：
- 行高 从一行文字的基线到另一行文字基线的距离。
- 居中 以中心对齐为参考，而非测量到基线的距离。
- 距离 使用基线到固定参照点的距离。
图45 1. 行高 2 居中 3 距离
4.3 确保可读性Ensuring readability
4.3.1 行高Line height
行高是指每行文字之间的距离，与字体大小直接相关。质感设计类型标记针对尺寸和用途进行了优化。
图46 使用标题、主标题、显著标题的大号文字建议使用1.2倍行高保证可读性。
图47 使用正文和标签的小号字体建议使用1.5倍行距。行高过于紧密将破坏文字流畅性，行高过于宽松，各行之间不连贯。
4.3.2 表格数字Tabular number
在表格或数值频繁变化的地方（例如时钟），使用表格数字（也称等宽数字），不要使用比例数字。使用等宽数字来保持数值在视觉上对齐，便于浏览。
图48 1 比例数字 2 等宽数字
图49 使用等宽数字防止当数值改变时布局发生位移，例如时钟界面。
4.4 在排版中使用质感符号Using Material Symbols with typography
质感符号的设计借鉴了字体设计决策。符号经常出现在文字旁边。合适的图标能将界面内容紧密联系起来，增强产品整体的品牌感。
图51 正例：符号和文字尺寸一致。
图52 反例：混用不同尺寸的符号和文字。
图53 正例：符号和文字线条粗细一致。
图54 反例：符号和文字线条粗细不同。
图55 正例：符号基线下移文字尺寸的11.5%。
图56 反例：符号和文字使用相同基线。
4.5 无障碍性Accessibility
4.5.1 色彩与对比度Color & contrast
选择合适的文字背景对比度提供视觉无障碍性。色彩对比是两种色彩亮度之间的感知差异，用对比度衡量。关键对比度表明了无障碍对比级别。
文字应当与背景色之间产生足够的对比度。足够的对比度取决于字体大小和需要的无障碍级别。
排版文字的默认色彩是表面前景色彩on surface。表面前景色彩on surface variant是一个很好的备选项。
图60 排版文字的默认色彩。
在表面色彩展示上的超链接文字使用主要色彩primary color或第三色彩tertiary。超链接文字应当加下划线。
图61 超链接文字应当加下划线，使用主要或第三色彩。