文字的使用

文字是应用当中使用最多的要素。显示一段供用户阅读的文字，程序运行时的信息提示都离不开它。

文字是内容的实际体现者，因此设计师需要将用户的注意力尽可能的吸引到文字当中。

字体可以分成两种类型：有衬线的-serif；无衬线的-sans-serif，也简称sans。serif的笔划端部会多出来一截修饰；sans的笔划端部是平的。

serif_sans_difference2

在过去，serif通常用来做文章的内容，sans用来做标题；但是现在，内容也开始使用serif了，这是一种新的趋势。在安卓系统中，就采用了sans字体做文字的默认显示。

不同的文字内容，需要吸引用户不同程度的注意力。例如，按钮上的文字和内容都需要吸引用户的注意力，但是它们的重要程度是不一样的。这种吸引的程度可以通过字体的大小和字体的颜色来实现。

字体

前面提到的serif与sans-serif是通过衬线将字体分成了2类。接下来我们开始认识认识字体。

从文字的形状出发，可以将文字分成三类，

  1. English-like：英文、拉丁文等字母组合型的文字；

    english_script_type

  2. Tall：像阿拉伯文字、泰文这种像绘画片段组合成的文字；

    tall_script_type

  3. Dense：像中文、日文、韩文等具有高密度笔画等文字；

    dense_script_type

我们主要进行中文应用的开发，所以会遇到很多Dense类型的字体。

字体和某个具体的字体是两个不同的概念，前者是对具有相同间架结构文字的总称，是个很宽泛的概念；而具体的字体指的是使用时，为了显示某个文字而具体使用的文字形状。

例如Arial字体，它下面就拥有多个子项目-字体家族。

arial_font

字体家族-font family是一个家族的名字，它的下面可以有多种字形-style。例如Arial字体家族，它就拥有多个字形：Regular-常规 Italic-斜体 Bold-粗体 Bold Italic-斜粗体，这几种字形也是其他字体家族中最经常具有的。

font_style

某个具体的字体，例如Arial Regular，就是由它所在的字体家族和字形来决定。所以每说到一个具体的字体，都可以找到它对应的字体家族和字形。

例如下面的Arial Arial Black Arial Hebrew，分别对应着3种不同的字体家族；而每个字体家族下面都有各自具体的字型。

fontfamily_sample

可以看到，有的字体家族下面可以只存在一种字形，也可以存在多种字形。这就完全看字体设计师的实现了。

例子里面的字体都是Arial字体，它下面的子项名称中虽然都有Arial，但都属于不同的字体家族。

Noto

对于Dense类型的文字，安卓系统使用Google提供的开源字体Noto。

Noto字体家族本身拥有了很多字体：Noto Sans，Noto Serif，Noto Momo……。

Noto拥有从英文字母到汉字的所有文字，对于我们开发中文应用，完全没有问题。显示简体中文的时候，使用的是Noto Sans CJK SC。

Noto有7种字形：Thin，Light，DemiLight，Regular，Medium，Bold，Black。它们对应的具体字体的粗细是各不相同。

noto_font_weight

关于Noto字体名字的由来，还有一个这样的小故事：

电脑中显示字符的时候，如果系统中没有安装对应的字体，那么就会在屏幕上显示一个空白的方框-口来代替。如果连续出现很多个不能显示的文字，显示的内容就像是口口口口口。外国人觉得这个方框像我们中国的豆腐，于是就叫它tofu。为了消灭这些豆腐，No tofu的口号就成为了Noto的名字。看来Noto为此发了大愿，消灭文字显示中的一切盲区。

大家可以在Google提供的官方网站获得Noto字体更为细节的信息。

Roboto

对于English-like类型的文字，安卓系统使用Google提供的开源字体Roboto，它看上去要宽且圆润，现在在很多平台上得到了广泛的应用。

Roboto有6种字形：Thin，Light，Regular，Medium，Bold，Black。

roboto_font_weight

Roboto与Noto是兼容的，当选定Roboto的一种粗细的笔划时，就能在Noto当中找到对应粗细的笔划。

大家可以在Google提供的官方网站获得Roboto字体更为细节的信息。

大小

不同的位置，文字显示的大小也可能有所不同。Material Design对界面上各个显示元素中使用到的文字大小，作出了规定。

显示English-like内容的时候，在中文系统中显示英文：

显示的位置 字体类型 字体大小
Display 4 Light 112sp
Display 3 Regular 56sp
Display 2 Regular 45sp
Display 1 Regular 34sp
Headline Regular 24sp
Title Medium 20sp
Subheading Regular 16sp
Body 2 Medium 14sp
Body 1 Regular 14sp
Caption Regular 12sp
Button Meduim 14sp

显示Dense内容的时候，在中文系统中显示汉字：

显示的位置 字体类型 字体大小
Display 4 Light 112sp
Display 3 Regular 56sp
Display 2 Regular 45sp
Display 1 Regular 34sp
Headline Regular 24sp
Title Medium 21sp
Subheading Regular 17sp
Body 2 Medium 15sp
Body 1 Regular 15sp
Caption Regular 13sp
Button Meduim 15sp

规律就是，显示正文时（从title开始），中文比显示英文要大1sp。

Display对大家来说可能比较陌生：它的用法是将文字作为一个大区域的显示，例如手机待机时屏幕上显示的时间信息，就是将文字当作Display来运用的。

格式

为了便于用户阅读，让用户有良好的阅读体验，我们还要考虑文字当中，

  • 行之间的间距。

    2_4_table_text_format

  • 每一行占据的宽度。对于长段的内容，字符控制在60个每行；对于简短的内容，字符控制在30个每行。

颜色

文字使用的颜色与背景的颜色相关，采用白色或者黑色，目的是提高文字的可读性，不要让文字的颜色和背景的颜色混在一起。

文字的颜色需要根据显示的位置体现出不同的深浅颜色。这种颜色的深浅是通过调整字体的透明度实现的，而不是将字体设置成一种灰色。

字体颜色

安卓系统根据显示内容的重要性，将文字主要分成了好些类：textColorPrimary textColorSecondary textColorPrimaryActivated textColorSecondaryInverse 等等。不过最重要的就是：

  • textColorPrimary：就是Primary text-主要文字内容使用的颜色。它使用在文字的title，headline，subhead，Body1～2，Button这些位置。
  • textColorSecondary：就是Secondary text-次要文字内容使用的颜色。它使用在Display 1～4，Caption这些位置。

浅色背景

对于浅色背景，字体使用纯黑色-#000000，根据使用场景的不同，透明度不同，

使用的场景 透明度
Primary text 87%
Secondary text 54%
Disable text, Hint text 38%

假如文字需要与图标配合使用，那么文字的颜色也是使用纯黑色-#000000，但是会根据图片当前是否处于激活的状态而不同，

图标激活状态 图标对应文字的透明度
激活 54%
未激活 38%

深色背景

对于深色背景，字体使用纯白色-#FFFFFF，根据使用场景的不同，透明度不同，

使用的场景 透明度
Primary text 100%
Secondary text 70%
Disable text, Hint text 50%

假如文字需要与图标配合使用，那么文字的颜色也是使用纯白色-#FFFFFF，但是会根据图片当前是否处于激活的状态而不同，

图标激活状态 图标对应文字的透明度
激活 100%
未激活 50%

字体的下载和使用

前面提到的Noto字体和Roboto字体，可以分别在
Noto的官网 和Robot的官网看到更为详细的介绍，并下载。

假如你的电脑上并没有安装这两种字体，请去官网下载。

下载以后(这里用安装Noto的简体中文字体来举例),

  1. 将得到的压缩包解压；

    noto_font_unzip

  2. 依次双击字体文件*.ttf或*.otf；

    installed_noto_font

这样就可以将这些自己安装到电脑上了，在设计的过程中，就能够选择到对应的字体了。

select_noto_font