样式 排版

排版

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

Roboto是 Android 上的标准字体。

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

文字类型

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

应用栏

标题样式:Medium 20sp

Buttons

英文: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

语言分类 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

语言文字可以被分为三类:

英文和类英文:拉丁文(除了越南文)、希腊文和西里尔文都支持 Roboto 和 Noto 字体。Roboto 已经经过扩展,在 Unicode 7.0 上完整的支持了所有的拉丁文、希腊文和西里尔文。字母数量已经是先前预览版的两倍,从 2000 多扩展到 4000 多个字符。

其他文字:这些语言文字需要为更大的符号提供额外的行高,包括了南亚和东南亚以及中东地区的语言,比如阿拉伯文、印地文、泰卢固文、泰文和越南文。针对这些语言 Noto 支持两种字重。

方块字:这些语言文字需要为更大的符号提供额外的行高,包括中文、日文和韩文。针对这些语言 Noto 支持七种字重。

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

字型 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

Roboto

Roboto 经过大量的优化,已经可以适配多种平台。Roboto 的字形稍宽,有点圆润,这让它更加易读,并且增添了愉悦性。

Roboto 示例

Roboto A-Z 和数字

Roboto 字重

Roboto 有六种字重:Thin、Light、Regular、Medium、Bold、以及 Black。

Roboto 字重

Noto

Noto 的垂直规格与 Roboto 相一致。

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

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

Noto 字重

Noto Sans CJK(中文、日文和韩文)有七种字重:Thin、Light、DemiLight、Regular、Medium、Bold、以及 Black。Noto Sans CJK Regular 和 Roboto Regular 的字重一致。

Noto Sans CJK 字重

泰文、梵文、以及其他语言的 Noto fonts 有 Regular 和 Bold 两种字重。

泰文、印地文(梵文)的 Noto Sans 字重

字体微调

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

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

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

字体顺序

在 Android 和 Web 端,字体顺序应当首先是 Roboto,然后是 Noto,最后才是 sans-serif。

样式 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

任何布局中使用多种字体和样式都具有破坏性。对排版规模的限制可以很好的适配布局网格。

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

英文和类英文

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

字体样式的基本设置基于这样的排版规模:12、14、16、20、以及 34。

英文 Display 示例

英文 Headline 示例

当应用栏存在多种形式时,应当使用 Title 样式,Medium 20sp。

英文 Title 示例

在有些情况下可以使用稍大的 Subheading 样式来替代 Body,比如当信息是较小的片段时,或者标题和正文被线条划分成一组时。

英文 Subheading 示例

英文 Body 示例

英文 Body 示例

所有的按钮中都使用 Button 样式(Medium 14sp,全大写)。对于不区分大小写的语言,可以为扁平按钮添加颜色来将其与普通文本区分开。

英文 Button 示例

方块字

中文、日文和韩文。

字重:Noto CJK 已经有七种不同的字重来适配 Roboto,所以使用与英文相同的字重即可。

字号:从 Caption 到 Title 样式,所有的字号都比同样式的英文大 1sp(*原文为 1px,疑为笔误,译者注),大于 Title 的样式则使用与英文相同的字号。

方块字示例

日文 Subheading 示例

日文 Body 示例

日文 Body 1 示例

繁体中文 Subheading 示例

繁体中文 Body 示例

繁体中文 Body 1 示例

其他文字

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

字重:因为 Noto 中并没有这类文字的 Medium 字重,因此请使用 Regular。Google 建议尽量避免使用 Bold,从母语使用者的反馈中我们得知 Bold 显得过于沉重。

字号:从 Caption 到 Title 的字号都比同样式的英文 1sp(*原文为 px,疑为笔误,译者注)。大于 Title 的样式则使用与英文相同的字号。

其他语言示例

印地文 Subheading 示例

印地文 Body 示例

印地文 Body 1 示例

泰文 Subheading 示例

泰文 Body 示例

泰文 Body 1 示例

行高 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

为了满足最佳的可读性和适当的阅读速度,文字的行高需要根据不同样式的字号和字重来设定。文本换行应当仅应用于 Body、Subheading、Headline 以及字号较小的 Display。其他的样式应当保持只有一行。

英文和类英文

英文和类英文的字型和行高

组合示例

单独示例 —— 增加行高

方块字和其他文字

所有的样式的行高都比英文多 0.1em。英文和类英文的语言在设计时主要使用了全角字框低于 x-height 的那一部分。中文、日文和韩文(CJK)的表意文字则使用整个全角字框。其他语言中的字母通常都有一个很长的降部和/或升部。为了使 CJK 的设计理念与英文的趋于一致,也是为了避免其他语言的在换行时出现的裁剪现象,方块字和其他文字的行高设定要比英文的更高。

方块字和其他文字的行高

组合示例,泰文和印地文

组合行高,中文和日文

其他排版指南 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

颜色 & 对比度

文本的颜色过于接近背景色会让文本难以阅读。同样,有时候对比度太大也会难以阅读,特别是暗色背景上的亮色文本。

文本应当保持 4.5:1(基于明度的数值计算)的最小对比度。最佳对比度应当设定为 7:1。

这些颜色组合同时考虑到了那些对颜色不敏感的用户。

亮色背景中的对比度

暗色背景中的对比度

图片上的对比度

插图上的对比度

大型和动态字体

为了最佳的用户体验,使用动态字体,或者在允许缩短的文本中使用大型字体,来替代对小字体的依赖。

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

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

动态字体示例

UI 中的动态字体

换行

图片中展示了最佳的换行示例。

避免在行中出现巨大的留白。尽量不要把短文字(比如介词)放在行尾。考虑得当的换行可以避免使用连字符。

字符间距(Tracking)和字偶间距调整(Kerning)

行宽

可读性和行宽参考了来自 Baymard 研究所建议:

「为了获得良好的阅读体验,你应该在每行使用 60 个左右的字符。每行中使用的字符总数是提升文本可读性的关键要素。」

「太宽 —— 如果没行的文字太多,用户的视线就很难集中在文本上。因为太宽的行宽让用户很难判断哪里是一行的开始和结束。而且对于用户来说,在大段文本中找到正确的下一行也变的极为困难。」

「太窄 —— 如果行宽太窄,用户的视线就需要来回切换,这会打乱读者的阅读节奏。同时太窄的行宽也会给用户带来不必要的压力,用户可能会直接看到下一行而忽略正在阅读的这一行(可能会跳过一些关键文字)。」

原文:「Readability: the Optimal Line Length」

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

英文正文的理想行宽。顶部的数字就是每行的字符总数。

英文短行文本的理想行宽。顶部的数字就是每行的字符总数。

语言分类参考 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

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

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

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

方块字:这些语言文字需要为更大的符号提供额外的行高,但指标又不同于其他文字。包括中文、日文和韩文。

代码

描述

分类

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

祖鲁文

类英文