2017 Material Design中文完整版：第三章节第四节《样式：字体与排版》

四、字体与排版 Typography    

Roboto和Noto是Android和Chrome的默认字体。

 

Roboto是Android的默认字体。Roboto字体没有完全支持所有语言。

 

Noto是一个包含所有语言的字体，它是Chrome的默认字体。

文本类型

• 英文和类似英文的(例如拉丁文、希腊文和西里尔文)

• 密集型（例如汉文、日文和韩文）

• 高长型（南亚、东南亚和中东的语言）

  
  

应用栏

标题类型，Medium 20sp

按钮

英文：Medium 14sp，全部大写

密集型：Medium 15sp，全部大写

高长型：Bold 15sp

副标题

英语：Regular 16sp（移动设备），15sp（桌面端）

密集型：Regular 17sp（移动设备），16sp（桌面端）

高长型：Regular 17sp（移动设备），16s设备（桌面端）

正文（body）1

英文：Regular 14sp (移动设备)，13sp (桌面端)

密集型：miRegular 15sp (移动设备)，14sp (桌面端)

高长型：Regular 15sp (移动设备)，14sp (桌面端)

文本对比度

最少：4.5:1

优先：7:1

 

- 语言分类(Language categorization)  

可分为三类:

英文和类似英文：拉丁文（越南语除外）、希腊文和西里尔文，Roboto和Noto都支持。Roboto已经完全覆盖到在Unicode 7.0中已被定义的所有拉丁文、希腊文和西里尔文。目前被支持的文字数已经翻了一倍，从以前的版本中大约2000字到目前大约4000字。

文字高长型：这一类的语言需要更大的行距以适应更大的字形，这类文字的国家包括南亚、东南亚和中东地区（像阿拉伯文、印地文、泰卢固文、泰文、越南文）。Noto支持这些语言。

文字密集型：这一类语言也需要更大的行距以适应更大的字形，这类文字的国家包括中国、日本和韩国。Noto支持这些语言。

你可以在这里查看 完整列表 。

- 字体（Typeface）  

Roboto

Roboto已经能够很好的支持跨平台运用。Roboto略有点宽和圆，这可以使它在平台上显示得更加清晰，这也是它能够被广泛运用的原因。

Roboto案例

 

Roboto字母 A-Z 和数字

 

Roboto字重

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

Roboto字体粗细

Noto

Noto的垂直度量与Roboto一致。

Noto字体：英语和CJK（汉文，日文和韩文）

 

Noto字体：泰文和印度文(梵文)

Noto字重

Noto中的CJK（中文，日文和韩文）有7种粗细： Thin、Light、DemiLight、Regular、Medium、Bold 和 Black。Regular粗细的Noto CJK字重与Roboto Regular相同。

Noto字体中CJK的粗细

 

Noto中泰文、梵文和所有其他主要生活语言都有Regular和Bold字重。

Noto字体中泰文和印度文(梵文)的粗细

Google font directory（A directory of open-source web fonts）

 

Hinted字体

字体hinting（也被成为instructing）是用来调整（扭曲）一个字形，以便在低分辨率屏幕中生成更加清晰的文本。但作为取舍，hinted字体要比unhinted版本消耗更多的空间。

 

所有的Roboto和Noto字体都有hinted版本和unhinted版本。在此，Google建议：

• 在 Android和Mac OS X系统上使用unhinted版本的字体，因为两者不支持hinted版本。

• 在 Chrome OS、Windows以及 Linux系统上使用hinted版本版本。

  Font stack（字体堆叠，是CSS字体系列宣告中的一份字体清单）

对于Android和web属性，font stack应该先指定Roboto、Noto字体，然后再指定字体无衬线。

 

- 样式（Styles）  

过多的使用字型和字体样式非常容易毁掉布局。网格可以帮助你更好的在有限的范围内进行文字排版。

 

在典型使用场景下，字型和字体样式能够平衡内容密度和阅读舒适度。字体的单位sp（安卓开发用的字体大小单位，scaleable pixels），它能让大型字号获得更好的   可访问性           。

 

英文和类似英文文本  

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

 

基本样式是基于 12、14、16、20 和 34sp的字体进行排版的。

 

举例：陈列（Display）样式的使用

 

举例：标题（Headline）样式的使用

 

就构成因素来说，应用栏中出现的文本需要使用“标题”样式，Medium 20sp。

举例：标题（Title）样式的使用

 

 

在某些情况下, 使用较大的“副标题”样式而不是较小的“正文”样式。这些情况包括了信息以小片段的形式呈现或标题搭配了“正文”样式文本等。

举例：副标题（subheading）样式的使用

 

举例：正文（Body）的使用

 

举例：主体（Body）样式的使用

 

 

按钮样式（Medium 14sp，全部大写）适用于所有按钮。对于那些没有大写的语言，考虑使用有色文本使它们从普通文本中突显出来。

举例：按钮（Button） 样式的使用

 

 

密集型文字  

中文、日文、韩文。

 

字重：Noto CJK文本有七种粗细，就像Roboto中的英语一样。

 

字体大小：对于需要大写的标题，可以使用比同等英文字体大1px的字体作为大写。对于字体大小大于标题字体的，英文类型的大小正合适。

 

举例：密集型语言

 

例子：日文，副标题

 

  

例子：日文，正文

 

例子：日文，正文1

 

例子：繁体中文，副标题

 

例子：繁体中文，正文

 

例子：繁体中文，正文1

 

高长型文字  

南亚、东南亚和中东地区（像阿拉伯文、印地文,泰卢固文,泰文,越南文）

 

字重：使用Regular，因为Medium在Noto中不可用。Google建议不要使用Bold，因为从母语者反馈回来的信息表示Bold会显得字体太重。

字体大小：对于需要大写的标题，可以使用比同等英文字体大1px的字体作为大写。对于字体大小大于标题字体的，英文类型的大小正合适。

 

举例：高长型文字

 

举例：副标题（subheading）样式的使用，印地文

 

举例：正文（Body）样式的使用，印地文

 

举例：正文1（Body1）样式的使用，印地文

               

举例：副标题（subheading）样式的使用，泰文

               

举例：正文（Body）样式的使用，泰文

               

举例：正文1（Body1）样式的使用，泰文

 

- 行距  

为了达到最佳的阅读效果和合适的间距，行高要根据每个字体的大小和粗细来决定。只有“正文”、“副标题”、“标题”和较小的文本类型中才允许换行。其它文本类型应以单行形式出现。

 

英文和类似英文文本  

英文和类似英文的类型以及行距

               

对比的案例

个别例子-增加行高

密集型和高长型文字

对两类型的所有语言文字，其行高都要大于英语语言文字0.1em。英语及其类似语言一般只使用到em box中的一部分，通常是x-height下方的部分。但是如中文、日文和韩文（CJK）这样的象形文字就会用到整个em box。字体高的语言中通常会有降部或/和升部。为了CJK达到和英文一样设计目的-避免高长型字体因行高的原因出现被“剪掉”的现象，高长型字体的行高必须大于英语及其类似语言以及密集型语言（CJK）。

               

行高：密集型和高长型语言

 

行高的对比案例，泰文和印度文

行高的对比案例，中文和日文

 

- 其他排版指南  

颜色＆对比

文本颜色与背景颜色太像会导致用户很难阅读。但是，对比过于强烈的文本也会导致很难阅读。这一点在浅色文本与深色背景的组合上尤其明显。

 

要获得良好的辨识度，文本应当满足一个最低的对比度，也就是 4.5:1（依据亮度值计算）。其中，7:1的对比度是最适合阅读的。

这些色彩组合同样要考虑到用户对于不同文本对比度的不同反应。

浅色背景上的对比

 

深色背景上的对比

在图片上的对比

 

在插画上的对比

大号文字与动态类型

为了更好的用户体验，使用动态类型文本代替小号文本或允许进行省略的大号文本。

如果使用得当，大号文字会让应用显得更加有趣，更容易对页面布局进行区分，以及更有助于用户快速理解内容。

动态类型文字能使大号文字可以在文本允许长度未知的情况下显示在其范围之内。动态类型下文字的大小会根据可用空间和字体大小来选择排版模式。

动态类型的例子

动态类型的UI运用

换行

下图展示了换行的最佳案例：

可行

不可行

避免在一行中留下巨大空隙。尽量避免行的末端留下一个很短的单词（如介词）。换行之前要考虑好避免单词断字。

 

字间距  

行的长度  

Baymard的研究给了我们一些有关行的长度和文字可读性方面的建议：

“如果你想拥有良好的阅读体验，建议每行大约60个字符。每一行的适量字符数是保证文字可读性的关键因素。”

“太长——如果一行文本太长，用户的注意力会很难集中在文字阅读上。这是因为文本过长导致用户很难看清楚一句话的开头和结束在哪里。”

“太短——如果一行文本太短，眼睛需要经常来回观看（换行），这样会打破读者的阅读节奏。文本太短的话也会让人产生压力，会使他们还没读完当前行的文字就去读下一行的文字（因此会有潜在跳过重要词句的问题）”

来源: “Readability: the Optimal Line Length,”

英文正文每一行的理想长度。这些数字代表每一行的字符数。

 

英文短的文本行的理想长度。这些数字代表每一行的字符数。

 

- 语言类别参考  

为了便于国际化，Google已将语言分为三个类别：英文和类似英文的、高长型的、密集型的。

英文和类似英文的：拉丁文（越南文外）、希腊文、西里尔文、希伯来文、亚美尼亚文和乔治亚文。

 

高长型的：此类文本需要更高的行高以适应更大的字形，这类文本包括南亚、东南亚和中东的语言，像阿拉伯文、印地文、泰卢固文、泰文、越南文。

 

密集型的：此类文本需要更高的行高以适应更大的字形，但与高长型的文字有着不同的标准。这类文字包括中文、日文和韩文。