Material Design 字体排印(一)字体系统

Material Design 字体排印(一)字体系统

原文:Material Design — Typography — The type system

良好的字体排印可以清晰有效地展示你的设计与内容。

字体量表

Material Design 字体量表包含一系列不同的对比样式,以支持你的产品及其内容的需求。

此字体量表是由 13 种字体系统支持的样式组成,包含包含可重复使用的文本分类,每个分类都有应用程序案例。

字体量表生成器

字体量表生成器由 Google Fonts 支持,是一个用于创建字体量表和相应代码的工具。你可以选择任何字体,工具会根据 Material Design 指南自动调整大小并优化可读性。

在字体量表中选择一个分类以查看字体的详细信息。通过右侧的菜单调整字体选择。

image.png

字体量表示例

下图示例使用 Roboto 字体应用于所有的标题(headline),字幕(subtitles),正文(body)和说明(captions),创建了一个有凝聚力的字体排印体验。层级是通过字重(Light, Medium, Regular)、字号、字间距和大小写的差异来产生的。

image.png
Material Design 字体量表(字间距值与 Sketch 兼容)

Material Design 字体量表

下载 Sketch 的 Roboto 字体量表:

image.png

字号单位

下方单位用于表示 Android、 iOS 和 Web 上的字号。

image.png

换算示例

image.png

网页浏览器根据根元素大小计算 REM(root em size)。现代网页浏览器的默认值为 16px,所以换算为 SP_SIZE/16 = rem。

字间距单位

UI 中调节字间距的单位:

image.png

字间距示例

image.png

应用字体量表

字体量表在组件和整体布局中以文本形式体现。字体属性可以自定义字体、字重、大小写、字号和字间距。

image.png
❶ 量表类别 ❷ 实际值

Headline

在字体量表中,Headline 从 1 到 6。Headline 是屏幕上最大的文本,一般为短小、重要的文字或数字。

对于 Headline,你可以选择一种表达性字体(expressive font),如显示字体(Display)、手书体(handwritten)或手写体(script)。这些非传统的字体设计细节复杂,有助于吸引眼球。

image.png
Headline 2 使用显示字体

image.png

image.png
Headline 3 使用手写体

衬线体或无衬线体很适合 Headline,特别是小字号。

image.png
Headline 6 使用无衬线体

Subtitle

Subtitle 比 Headline 小,通常用于篇幅较短的中等重点的文本。衬线体或无衬线体在 Subtitle 中表现良好。

image.png
Subtitle 1 使用无衬线体

image.png

对于 Subtitle,在使用包括显示字体、手书体和手写体在内的表达性字体时需谨慎:

image.png

注意: 在 Subtitle 中使用表达性字体时要注意。

Body

Body 文本的范围为 1–2,通常用于长文本,因为其适用于小字号本部分,推荐使用衬线体或无衬线体。

image.png
Body 1 使用衬线体

image.png

image.png
Body 2 使用无衬线体

不要在 Body 中使用表达性字体,包括显示字体、手书体和手写体:

image.png

不要:

不要在 Body 文本中使用表达性字体。

Caption 和 Overline

Caption 和 Overline(眉题)是字体最小的,被谨慎地用来注释图像或引入标题。

image.png
Caption 使用衬线体

image.png

image.png
Overline 使用无衬线体

不要在 Caption 和 Overline 使用表达性字体,包括显示字体、手书体和手写体:

image.png

不要:

不要在 Overline 中使用表达性字体。

Button

Button 文本用于各种按钮(如文本、概述和包含的按钮)、标签、对话框和卡片。

Button 文本通常使用全大写的无衬线体。

image.png
Button 使用全大写无衬线体

image.png

Button 文本可以使用一般大小写(sentence case)的无衬线体或衬线体:

image.png

注意:

当 Button 文本与非交互文本不同时,请谨慎使用,如这个使用大小写的无衬线字体的按钮。

不要使用表达性字体作为 Botton,包括显示字体、手书体和手写体:

image.png

不要:

不要在 Button 文本中使用显示字体。


Some rights reserved
Except where otherwise noted, content on this page is licensed under a Creative Commons Attribution 4.0 International license