样式 排版

排版

Roboto 和 Noto 是 Android 和 Chrome 上的标准字体。

Roboto 是 Android 上的标准字体。

Noto 是 Chrome 和 Android 上针对未被 Roboto 覆盖的语言的标准字体。

文字类型

  • 英文和类英文(拉丁文、希腊文和西里尔文)
  • 方块字(中文、日文和韩文)
  • 其他文字(南亚和东南亚以及中东地区的语言)
应用栏

标题样式:Medium 20sp

按钮

英文:Medium 14sp,全大写
方块字:Medium 15sp,全大写
其他文字:Bold 15sp

副标题(Subheading)

英文:Regular 16sp(设备),15sp(桌面)
方块字:Regular 17sp(设备),16sp(桌面)
其他文字:Regular 17sp(设备),16sp(桌面)

正文(Body 1)

英文:Regular 14sp(设备),13sp(桌面)
方块字:Regular 15sp(设备),14sp(桌面)
其他文字:Regular 15sp(设备),14sp(桌面)

文本对比度

最小值:4.5:1
推荐值:7:1

Material Design 标准字体:Roboto 和 Noto

语言分类 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

语言文字可以分为三类:

英文和类英文:拉丁文(越南文除外)、希腊文和西里尔文,都支持 Roboto 和 Noto。Roboto 已经经过扩展,完整的覆盖了所有 Unicode 7.0 中定义的拉丁文、希腊文和西里尔文。支持的字符数量已经是之前预览版的两倍,从大概 2000 个字符增加到了大概 4000 个字符。

其他文字:这些语言文字需要额外的行高以适应更大的字体,包括南亚和东南亚以及中东地区的语言,比如阿拉伯文、印地文、泰卢固文、泰文和越南文。Noto 有两种字体粗细来支持这些语言。

方块字:这些语言文字需要额外的行高以适应更大的字体,包括中文、日文和韩文。Noto 有 7 种字体来支持这些语言。

全部语言列表请参考语言分类表

字体 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Roboto

Roboto 已经经过了大量的改进,可以适配更多的平台。它稍微宽一点和圆润一些,看起来更加清晰,更加乐观。

Material Design 中的 Roboto 示例

Roboto 示例

Material Design 中的 Roboto 字体和数字

Roboto A-Z 和数字

Roboto 字体粗细

Roboto 有 6 种粗细:Thin、Light、Regular、Medium、Bold、和 Black。

Material Design 中的 Roboto 字体粗细

Roboto 字体粗细

Noto

Noto 的垂直规格和 Roboto 一致。

Material Design 中的 Noto Sans 字体示例

英文和 CJK(中文、日文和韩文)的 Noto Sans 示例

Material Design 中的 Noto Sans 泰文和印地文示例

泰文和印地文(梵文)的 Noto Sans 示例

Noto 字体粗细

Noto Sans CJK(中文、日文和韩文)有 7 种粗细:Thin、Light、DemiLight、Regular、Medium、Bold、和 Black。Noto Sans CJK Regular 和 Roboto Regular 的字体粗细一致。

Material Design 中的 Noto Sans CJK 字体粗细

Noto Sans CJK 字体粗细

泰文、梵文和其他语言的 Noto 字体有 Regular 和 Bold 两种粗细。

Material Design 中的 Noto Sans 字体粗细

泰文和印地文(梵文)的 Noto Sans 字体粗细

一个开源的网络字体库

字体微调

微调包含在字体的结构中,通过调整(变形)符号,来提升文字在低分辨率显示器上的显示效果。为此带来的问题就是,微调过的字体会比没有微调的版本占用更大的空间。

Roboto 和 Noto 都有微调和未经过微调的版本,Google 建议:

  • 在 Android 和 macOS 上使用未经过微调的版本
  • 在 Chrome OS、Windows 以及 Linux 中使用微调过的版本

字体优先顺序

无论是 Android 还是 Web 端,字体优先顺序都应该首先是 Roboto,然后是 Noto,最后才是 sans-serif。

样式 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

同时使用多种大小和样式的字体会破坏布局。使用一组有限类型的字体大小进行排版,可以很好的适配布局网格。

这些尺寸和样式,是为了平衡在常规使用习惯下的内容密度和阅读舒适度而开发的。字号的单位是 sp(可缩放像素),这样就可以在辅助功能中开启大字体模式。

英文和类英文

拉丁文、希腊文和西里尔文。

基本样式集是基于 12、14、16、20、和 34 的排版比例。

Material Design 中的字体使用应保持一致性和可读性
Material Design 中的英文 Display 样式示例

英文的 Display 样式示例

Material Design 中的英文 Display 样式示例
Material Design 的英文 Headline 样式示例

英文的 Headline 样式示例

Material Design 的英文 Headline 样式示例

在各种形式的应用栏中,文本都应使用标题(Title)样式,Medium 20sp。

Material Design 中的英文标题样式示例

英文的标题(Title)样式示例

Material Design 中的英文标题样式示例

在某些情况下,可以使用较大的副标题(Subheading)样式代替较小的正文(Body)样式。这些情况包括信息以较小的片段显示时、或者标题和正文样式的文本成对出现。

Material Design 中的副标题样式示例

英文的副标题(Subheading)样式示例

Material Design 中的副标题样式示例
Material Design 的英文正文样式示例

英文的正文(Body)样式示例

Material Design 的英文正文样式示例
Material Design 的英文正文样式示例

英文的正文(Body)样式示例

Material Design 的英文正文样式示例

按钮样式(Medium 14sp,全大写)可用于所有按钮,在区分大小写的语言中,按钮文本应该全部大写。对于不区分大小写的语言,考虑为扁平按钮使用彩色的文本,以使它们和正常文本区分开。

Material Design 按钮样式示例

英文的按钮样式示例

Material Design 按钮样式示例

方块字

中文、日文和韩文

字体粗细:Noto CJK 有和 Roboto 匹配的 7 种字体粗细,使用和英文相同的字体粗细设置。

字体大小:从标题(Title)到说明文字(Caption)的样式,字体大小都比对应的英文样式大 1px。对于大于标题的样式,则使用和英文相同的字体大小。

Material Design 中的 Noto CJK 字体粗细和大小设置
Material Design 中的方块字示例

方块字示例

Material Design 中的日文副标题示例

日文副标题(Subheading)示例

Material Design 中的日文正文样式

日文的正文(Body)样式

Material Design 中的日文正文(Body 1)样式

日文的正文(Body 1)的样式

Material Design 中的繁体中文副标题示例

繁体中文的副标题(subheading)示例

Material Design 中的繁体中文正文示例

繁体中文的正文(Body)示例

Material Design 中的繁体中文正文示例

繁体中文的正文(Body 1)示例

其他文字

南亚、东南亚以及中东地区的语言,包括阿拉伯文、印地文和泰文。

字体粗细:因为 Noto 中没有 Medium,所以使用 Regular 代替。Google 建议避免使用粗体字,从母语使用者的反馈中得知 Bold 显得过于沉重。

字体大小:从标题(Title)到说明文本(Caption)的样式,字体大小都比对应的英文样式大 1px。对于比标题(Title)更大样式,使用和英文相同的字体大小。

Material Design 中的字体粗细和大小调整指南
Material Design 中的其他语言示例

其他语言示例

Material Design 中的印地文副标题示例

印地文的副标题(subheading)示例

Material Design 中的印地文正文示例

印地文的正文(Body)示例

Material Design 中的印地文正文示例

印地文的正文(Body1)示例

Material Design 中的泰文副标题示例

泰文的副标题(subheading)示例

Material Design 的泰文正文示例

泰文的正文(Body)示例

Material Design 中的泰文正文示例

泰文的正文(Body1)示例

行高 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

为了达到适当的可读性和阅读流畅性,文本行高需要根据每个样式的字体大小和粗细来设定。文本换行应该仅用于 Body、Subhead、Headline 和较小的 Display 样式。所有其他样式应该保持只有一行文本。

英文和类英文

Material Design 中的英文样式与行高

英文和类英文的样式和行高

Material Design 中的字体行高组合示例

组合示例

Material Design 中的字体行高示例

单独的示例 - 增加行高

方块字和其他文字

对于所有的样式,行高都比类英文语言高 0.1em。英文和类英文语言大多只使用全角字框中的一部分,通常是 x-height 下面的那部分。中文、日文和韩文(CJK)等象形文字则使用了整个全角字框。其他语言的字符通常有一个很长的降部和/或升部。为了实现英文和 CJK 的设计理念相一致,也为了避免其他语言的两行文字相邻时出现被裁剪现象,方块字和其他文字的行高需要比英文的更高。

Material Design 中的方块字与文字行高

方块字和其他文字的行高

Material Design 中的泰文和印地文行高示例

泰文和印地文的行高示例

Material Design 中的中文和日文行高示例

中文和日文的行高示例

其他排版指南 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

颜色 & 对比度

文本颜色和背景颜色太相似,会导致很难阅读。对比度太大的文本也会难以阅读。尤其是深色背景上的浅色文本。

文本应该保持至少 4.5:1(基于亮度值计算)的对比度以保持文本清晰。最佳对比度为 7:1。

这些颜色组合还考虑了那些对颜色的感知不同的用户。

Material Design 中的文本颜色对比度
Material Design 中的对比度效果

浅色背景中的对比度

Material Design 中的深色背景与对比度

深色背景中的对比度

Material Design 中的对比度示例

图片上的对比度

Material Design 中的对比度插画

插画上的对比度

大型动态字体

为了获得最佳用户体验,请使用动态字体,而不是仅仅依赖较小的字体或允许对较大的字体进行裁剪。

正确使用大型字体可以使应用更有趣,可以区分布局,并帮助用户快速解读页面内容。

当布局中的文本长度不确定时,使用动态字体可以启用大型字体。动态字体会基于可用空间和字符大小,从排版模版中选择合适的字号。

Material Design 动态字体示例

动态字体示例

Material Design 动态字体示例
Material Design 中的动态字体设置

UI 中的动态字体

Material Design 中的动态字体设置

换行

此图片展示了换行的最佳实践。

Material Design 中的换行最佳实践

正确示例

避免在 Material Design 中留出太大的空隙

错误示例

避免在一行中留出太大的空隙。尽量不要在一行的末尾留下很短的词,如介词。精心考虑的换行可以避免使用连字符。

字间距和字距调整

Material Design 中的字间距和字距调整

行宽

可以考虑这个来自 Baymard 学院的关于可读性和行宽的建议:

“如果你想要一个良好的阅读体验,应该保持每行约 60 个字符。每行文本拥有正确的字符数,是文本可读性的关键。”

“太宽 – 如果一行文本太长,用户的眼睛会很难专注于文本。因为太长的一行文字让用户很难判断哪里是一行的开始和结束。此外,从一大块文本中正确的找到下一行也变得极为困难。”

“太窄 – 如果一行文本太短,用户的眼睛必须频繁来回移动,打乱了读者的阅读节奏。太短的行也会给用户带来压力,使用户在还没看完当前行时直接看到了下一行(可能跳过一些关键的文字)。”

原文: “Readability: the Optimal Line Length,”

http://baymard.com/blog/line-length-readability

Material Design 理想行长度的最佳实践

英文正文的理想行长度。数字表示每行的字符数。

Material Design 中的理想行长度与字符数

英文短文本的理想行长度。数字表示每行的字符数。

语言分类参考 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

为了方便国际化,Google 将语言分为三类:英文和类英文、其他文字、方块字。

英文和类英文:拉丁文(越南文除外)、希腊文、西里尔文、希伯来文、亚美尼亚文、格鲁吉亚文。

其他文字:这些语言需要额外的行高以适应更大的字体,包括南亚、东南亚以及中东地区的语言,比如阿拉伯文、印地文、泰卢固文和越南文。

Dense:这些语言需要额外的行高以适应更大的字体,包括中文、日文和韩文。

代码

描述

分类

af

南非荷兰文

类英文

am

阿姆哈拉文

类英文

ar

阿拉伯文(现代标准)

其他文字

az

阿塞拜疆文

类英文

bg

保加利亚文

类英文

bn

孟加拉文

其他文字

ca

加泰罗尼亚文

类英文

cs

捷克文

类英文

cy

威尔士文

类英文

da

丹麦文

类英文

de

德文

类英文

el

希腊文

类英文

en

英文(美国)

类英文

en-GB

英文(英国)

类英文

es

西班牙文(欧洲)

类英文

es-419

西班牙文(拉丁美洲)

类英文

et

爱沙尼亚文

类英文

eu

巴斯克文

类英文

fa

波斯文

其他文字

fi

芬兰文

类英文

fil

菲律宾文

类英文

fr

法文(欧洲)

类英文

fr-CA

法文(加拿大)

类英文

gl

加利西亚文

类英文

gu

古吉特拉文

其他文字

hi

印地文

其他文字

hr

克罗地亚文

类英文

hu

匈牙利文

类英文

hy

亚美尼亚文

类英文

id

印度尼西亚文

类英文

is

冰岛文

类英文

it

意大利文

类英文

iw

希伯来文

类英文

ja

日文

方块字

ka

格鲁吉亚文

类英文

kk

哈萨克斯坦文

类英文

km

高棉文

其他文字

kn

卡纳拉文

其他文字

ko

韩文

方块字

ky

吉尔吉斯文

类英文

lo

老挝文

其他文字

lt

立陶宛文

类英文

lv

拉脱维亚文

类英文

mk

马其顿文

类英文

ml

马拉亚兰文

其他文字

mn

蒙古文

类英文

mr

马拉塔文

其他文字

ms

马来文

类英文

my

缅甸文(缅甸)

其他文字

ne

尼泊尔文

其他文字

nl

荷兰文

类英文

no

挪威文(书面挪威语)

类英文

pa

旁遮普文

其他文字

pl

波兰文

类英文

pt

葡萄牙文(巴西)

类英文

pt-PT

葡萄牙文(欧洲)

类英文

ro

罗马尼亚文

类英文

ru

俄文

类英文

si

僧伽罗文

其他文字

sk

斯洛伐克文

类英文

sl

斯洛维尼亚文

类英文

sq

阿尔巴尼亚文

类英文

sr

塞尔维亚文(西里尔文)

类英文

sr-Latn

塞尔维亚文(拉丁文)

类英文

sv

瑞典文

类英文

sw

斯瓦希里文

类英文

ta

泰米尔文

其他文字

te

泰卢固文

其他文字

th

泰文

其他文字

tr

土耳其文

类英文

uk

乌克兰文

类英文

ur

乌尔都文

其他文字

uz

乌兹别克文

类英文

vi

越南文

其他文字

zh-CN

中文(大陆简体)

方块字

zh-HK

中文(香港繁体)

方块字

zh-TW

中文(台湾正体)

方块字

zu

祖鲁文

类英文