原文:Material Design – Typography – The type system 

 

通过字体排印,尽可能清晰地、有效地展示设计与内容。

字体量表

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

此字体量表是由 12 种字体系统支持的样式组成,包含各有预期应用场景与意义的可重用的文本类别。

Material Design 字体量表。(字间距值兼容 Sketch)

 

Roboto Roboto

 

下载

通过 Sketch 中 type styles 使用字体量表。

Material Design 字体量表

 

字体大小单位

Android、iOS 和网页字体大小单位:

平台 Android iOS Web
字体大小单位 sp pt rem
换算比例 1.0 1.0 0.0625

换算示例

Android iOS Web
10sp 10pt 0.625rem
12sp 12pt 0.25rem
24sp 24pt 1.5rem
60sp 60pt 3.75rem

网页浏览器根据根元素大小计算 REM。现代网页浏览器的默认值为 16px,换算公式为 SP/16 = rem。

 

字间距单位

UI 中调节字间距的单位:

平台 Android iOS Web
字间距单位 em pt rem
换算比例 (Sketch 字元间距 / sp) = 字间距 1.0 (Sketch 字元间距 / px) = 字间距

字间距示例

Android iOS Web
(.2 字元间距 / 16sp) = 0.0125 em -0.1 pt (.2 字元间距 / 16px) = 0.0125 rem

 

应用字体量表

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

❶ 量表类别  ❷ 实际值

Headline

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

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

 

使用显示字体的 Headline 2。

 

 表达性字体 表达性字体

 

使用手写体的 Headline 3。

 

 

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

使用无衬线体的 Headline 6。

 

Subtitle

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

使用无衬线体的 Subtitle 1。

 

 无衬线字体 无衬线字体

 

 

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

  注意: 

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

 

Body

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

使用衬线体的 Body 1。

 

 衬线体 衬线体

 

使用无衬线体的 Body 2。

 

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

  不要: 

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

 

Caption 和 Overline

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

使用衬线体的 Caption。

 

 衬线体 衬线体

 

使用无衬线体的 Overline。

 

 

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

  不要: 

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

 

Button

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

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

使用全大写无衬线体的 Button。

 

 无衬线字体 无衬线字体

 

 

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

  注意: 

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

 

不要在 Button 文本中使用表达性字体,包括显示字体、手书体和手写体。

  不要: 

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

 


 

发表评论

电子邮件地址不会被公开。 必填项已用*标注