质感设计-样式-字体排印Typography

tq1086

已于 2024-03-18 22:38:55 修改

阅读量119

点赞数

分类专栏：翻译质感设计文章标签： Material Design

于 2024-03-18 22:38:19 首次发布

原文链接：https://m3.material.io/styles/typography/overview

版权

翻译同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

质感设计

2 篇文章 0 订阅

订阅专栏

字体等级是在整个应用中使用的一系列字体样式，提供灵活一致的样式以实现多种目标。质感设计字体等级由15种不同样式组成，每种都有特定应用和意义。样式按照用途分配（例如显著标题或主标题），根据尺寸（大或小）归类。在质感设计默认字体等级中，标题、标签、正文均采用Roboto字体，提供一致体验。

图8 字体等级是一组不同的样式，以满足产品环境和内容的不同要求。单一产品很少使用所有的字体样式。应当从字体等级中选择适合样式。

3.2 字体排印标记Typography tokens

表1 字体排印样式
职能	尺寸	样式	设计标记	默认值
显著标题	大号	字体	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 超链接文字应当加下划线，使用主要或第三色彩。

tq1086

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
质感设计-样式-字体排印Typography

如果需要支持不同尺寸的设备，可以定义字体等级，添加或移除样式，甚至使用其他字体替换Roboto。质感设计采用以14号为基准尺寸的大二度字体等级。基准尺寸是排版正文最常用的样式。图9 质感设计字体等级采用大二度比例（1.125）。字体等级渲染尺寸应当以产生显著区别为目标，避免细微差异。图10 质感设计字体等级包含15种样式。图11 你的产品大概不会使用质感设计字体等级中全部的样式。在本例中，我们选择五种字体尺寸，忽略其他样式。图12 如果质感设计字体等级无法满足需求，你可以修改相应数值。
复制链接

扫一扫