原文:The Android Developer’s Guide to Better Typography

作者:Rod Sheeter

时间:2017 年 12 月 6 日

译按:去年更新的 Android Oreo,带来了 「可下载字体」 的新特性,给予开发者更灵活的字体配置方式,缩减 APK 文件大小和共享字体以环节存储空间占用对设备厂商也是利好。Google Design 的这篇文章以一款应用程序——Plaid 为例,介绍了具体的字体排印案例。

字体排印可以使一款应用程序的吸引力和可用性发生重大变化。现在,Android 开发者可以使用 Google Fonts 中的字体,其简单,高效,并提供了一种新的字体排印方式。

尽管每一位开发者都知道,「设计」在用户体验中扮演着重要角色 ,它可能是一款应用成功或失败的关键因素。但在面对推进发布,逃避集成自定义字体的复杂性或是看似神秘的选择字体的艺术时,还是有着直接使用默认字体的诱惑。

幸运的是,Android Studio 支持新的「可下载的字体」功能,可以更轻松地为应用程序构建独特的字体排版。此功能可以轻松地将完整的 Google Fonts 中自由、可靠且高质的字体轻松地在 JellyBean 及更高版本(SDK 16+)中自定义字体排印。

除了美学改进之外,「可下载的字体」还可以减小 APK 文件的整体大小,并减少内存占用,因为已下载的字体将在所有的应用程序之间共享。而因为不需要预先捆绑字体,APK 文件会进一步更减小。如果一个应用程序从 Google Fonts 下载了一款字体,Android 会将其保存在存储空间中,以便其他应用程序也可以使用它,而无需占用任何额外的存储空间。就像我们网站的 API 直接向网站提供字体一样,人们使用 Google 字体越多,共享的延迟就越大。

在本教程中,我们以示例应用程序为例,通过以 Google Fonts 中的字体替换具有的特性和动态范围样式的内容的标准字体,来改善字体排印。我们将使用一款名为 Alegreya 的字体,作为一款「超级字体家族」,其具有广泛的样式、字重和变体。这意味着我们将有大量的字体排印的选择来微调界面外观。

我们使用的示例应用程序是由 Nick Butcher 开发的 Plaid,这是一款发布 Material Design 相关新闻的可滚动 Feed 应用。这些全出血 1 的图块,你可以点击或点击以展开进入 dribble 的页面,其中有「喜欢」和「浏览」的统计信息。

本教程面向开发者,但它也解释了一些决定设计背后的「原因」,因此请注意这两点!

在我们开始之前

首先安装 Android Studio 3.0,然后从 Github 中 clone「Plaid」项目并 checkout b76937,这是我们将用于本教程的版本:

git clone https://github.com/rsheeter/plaid.git

cd plaid

git checkout b76937

现在,在 Android Studio 3.0 中打开该项目。

为了使用 Google Fonts 提供程序,你必须安装 Google Play 服务 12 版以上。如果你正在使用升级到最新系统的设备,则可以跳过; 但如果你使用的是 Android Studio 启动的模拟器,则可能使用的是旧版 Google Play 服务。从 Android Studio 更新 Android 虚拟设备,请按照下列步骤操作。

1. 创建一个带有 Play Store 的虚拟设备(Tools > Android > AVD Manager),Play Store 中的图标表示为:

2. 在 Android Studio 中启动一个虚拟设备。打开模拟器屏幕右侧的「Extended Controls」,点击垂直按钮面板底部的「…」图标:

3. 选择 Google Play 并检查版本号。如果您运行的是 11.2 版或更低版本,请点击 Update 按钮,这将引导至 Play Store,然后点击或点击绿色的 Update 按钮:

4. 现在已更新至 11.2 或更高版本,该设备将支持可下载的字体。

更新 About 页面

首先,我们来更新 About 页面。页面下半部分的「正文」段落目前被设置为 Roboto Regular,这是一款无衬线字体,页面上半部分的标题被设置为 Roboto Mono Regular。让我们将其转换为衬线字体 Alegreya,这是一种充满活力的当代设计,其灵感来自书法字母,具有充满活力和节奏多变的特点。 Alegreya 是一款「超级字体家族」,最初用于文学作品排印,包括衬线和无衬线的姊妹字体家族。

标题文字就像「英雄形象」,这一图像能将人引导到页面中。并能定义情感语气。这里的标题的字母作为「蒙版」,将薄荷绿的前景切掉,镂空显示后面的图像。从 Roboto Mono Regular 改为 Alegreya Black,将为背景图像提供更大的镂空区域,更加明亮。

设置「About Activity」文本

由于「About Activity」文本目前为「default」文本样式,即 Roboto Regular,我们必须手动设置为另一个:

  1. 打开 app/src/main/res/layout/about_plaid.xml
  2. 选择 Design 面板
  3. Component Tree 面板中, 打开 about_description
  4. Attributes 面板中, 打开 fontFamily 下拉列表并选择 More Fonts… (你可能需要点击 View all attributes 才能看到 fontFamily
  5. 选择字体家族 Alegreya
  6. 选择字体样式 Regular
按照步骤 1-6 设置「About Activity」文本的样式

Android Studio 已经配置了我们的应用程序以从 Google Fonts「提供程序」中检索字体。为此,它对我们的源码树进行了一些更改:

app/src/main/res/font/ ( 查看更多 )

这个新目录包含描述字体资源的 XML 文件。在这种情况下,它提供了从 Google Fonts 提供程序加载字体的说明。

app/src/main/res/values/font_certs.xml ( 查看更多 )

为确保字体请求仅由可信方回应,该文件指定字体提供程序的签名。

app/src/main/res/values/preloaded_fonts.xml ( 查看更多 )

这是在安装和更新过程中加载的字体列表,以确保这些字体在启动应用程序时可用。

你可以在 commit a1e711c 中看到此步骤的示例 diff。

更新裁剪文本视图

文本样式目前是 Roboto Mono Regular。让我们继续上一步的更改:

7. 在 Design 视图中, 选择「CutoutTextView」

8. 打开「fontFamily」下拉菜单并选择「More Fonts…」

9. 选择字体家族「Alegreya」

10. 选择字体样式「Black」

11.(对于步骤 11, 请见下文)

如果你现在尝试此操作,字体仍然是 Roboto Regular,而不是 Alegreya Black,原因是默认情况下,声明性字体是异步获取的(了解更多)。完成之后,系统将尝试使用 setTypeface 更新 TextView 的字体,但这会因 CutoutTextView 不会扩展 TextView 而失败。

但是,CutoutTextView 并没有实现 fontFamily 属性(这里)。如果我们将字体提取标记为 blocking,那么 fontFamily 将在我们请求时做好准备。如果我们不将其标记为 blocking,那么为 fontFamily 返回的值将不可用。(我们也可以编写自己的异步获取,但我们稍后再谈。)

  1. 打开 app/src/main/res/font/alegreya.xmlalegreya-black.xml,然后将此属性追加到 <font-family> 元素的末尾:
app:fontProviderFetchStrategy=”blocking”

现在试试吧!(你可以在 commit f1c997 看到此步骤的示例 diff)

更新 text-size

看看「About」文本,它在灰色背景上略显灰色。 Alegreya 是一款衬线字体,具有较高的「笔画差异(stroke modulation)」 2,意味着字母从最粗到最细的字体都有很大的不同。这导致总体视觉对比度较低。字体中的细微变化可能会使其看起来模糊,尤其是在小字号的情况下。

为了缓解这个问题,我们将这个段落的 text-size 从 16sp 增加到 18sp。这将增加文本与其背景的明显对比。

about_plaid.xml 的 TextView 使用 TextAppearance.About 样式。要将文本大小从 16sp 更改为 18sp,可编辑 app/src/main/res/values/styles.xml 这一部分:

你可以在 github.com/rsheeter/plaid/commit/4dda25 上看到此步骤的示例 diff。

更新应用标题

接下来,我们将通过编程方式提取字体,以更改我们的应用程序的标题。标题目前为应用了「小型大写字母」的 OpenType 特性的 Roboto。我们还使用了额外的「tracking」来分隔这些字母。

(这个细节是借鉴了书籍排印的惯例,章节标题常位于页面的顶部并采用小型大写字母。了解更多关于字体排印的信息,可查阅 Jan Middendorp 的《Shaping Text》一书。)

异步获取会因 Toolbar 不是 TextView 而失败,就像 CutoutTextView 不是 TextView 一样。另外,Toolbar 无法实现 fontFamily 属性,所以我们不能只设置 blocking 来修复。

相应的,我们可以尝试以编程方式获取和赋值字体。

app/src/main/java/io/plaidapp/ui/HomeActivity.java 中使用 FontsContractCompat (参考 ) 按照以下四个步骤请求字体。

1. 我们需要一个线程等待字体,声明一个变量以保存:

private Handler fontHandler

2. 添加一个 Method 来管理字体处理线程:

3. 添加一个 Method 将 Typeface (参考 ) 应用于 Toolbar:

4. 在 onCreate 中,从字体提供程序启动异步获取:

切换到 Alegreya Sans SC Black

回到主页面,我们注意到标题看起来有点过于细。像许多衬线字体一样,Alegreya 的笔画差异导致视觉对比度较低,尤其是当与无衬线字体相比时。

幸运的是,Alegreya 是一款「超级字体家族」,其衬线和无衬线样式都有多种字重,适配这两种样式的字体并使用不同的字重来构建界面,以内容描绘 UI。让我们试试 Alegreya Sans Small Caps (SC) 吧。

Alegreya 的小型大写字母本身就较小,但我们可以通过增加其字重来改善这一点。试试 Black (900) 的字重。

1. 复制 res/font/alegreya.xml 以创建 res/font/font/alegreya_sans_sc_black.xml

2. 编辑 alegreya_sans_sc_black.xml 以更改 app:fontProviderQueryname=Alegreya Sans SC&amp;weight=900

3. 编辑 res/values/preloaded_fonts.xml 以添加新字体:

4. 在 HomeActivity.java 中指定新的 query:

将 Alegreya Black 更改为 Bold

再来看看主页上的标题

Black 字重在这里有点太强烈了,所以让我们把它降为 Bold (700)。

1. 将 alegreya_sans_sc_black.xml 重命名为 alegreya_sans_sc_bold.xml 并编辑以更改 app:fontProviderQueryname=Alegreya Sans SC&amp;weight=700

2. 在 HomeActivity.java 中更新 query:

您可以在 commit ac55478 处看到应用程序最终状态的示例 diff(使用了 Alegreya Sans SC Bold)。看看项目的比较吧。

更新 Dribble 视图

要进入应用程序中的「dribble」视图,请点击或单击主屏幕上的卡片。再一次的,我们用 Alegreya Black 替换 Roboto Mono Regular。

app/src/main/res/layout/dribbble_shot_title.xml 中,请注意标题和描述在使用 @style/TextAppearance.DribbbleShotTitle@style/TextAppearance.DribbbleShotDescription 设置样式。在 app/src/main/res/values/styles.xml 中找到它们(提示:Ctrl+点击)。现在改变字体:

你可以在 commit 0e53b56 查看示例 diff。

更改数字样式

「dribble」的视图还有一点需要改进。

「喜欢」和「浏览」按钮使用了所谓的「旧式数字」。这一设计是为了与文本段落中的小写拉丁字母混排。但是,对于旧式数字本身而言,看起来不合适,因为他们的降部 3 有时会挂在其他文本的基线 4 之下。

相应的,我们使用 lnum 特性。这告诉应用程序使用「齐线数字」,因为它们被设计为与大写字母相同的高度,所以更加易读。(了解更多内容,查看 Typekit

通过查看 app/src/main/res/layout/dribbble_shot_description.xml,我们可以看到,「喜欢」和「浏览」计数器的样式是 @style/Widget.Plaid.InlineActionButton

app/src/main/res/values/styles.xml 中找到 @style/Widget.Plaid.InlineActionButton(提示:Ctrl+点击)。

现在添加一条指令来为这些计数器使用齐线数字:

您可以在 commit 4dda25 看到一个示例 diff。

结论

经过这些简单的更改后,并借助了 Google 的免费开源字体库, 我 fork 的 Plaid 应用程序 现在具有了更醒目和更具功能性的字体排印。通过 Android 新的可下载字体功能,你可以使用 Google Fonts 中的任何字体来自定义应用中的字体排印。正如本教程所述,只需进行一些更改,就可以在易读性和用户体验方面带来真正的改变。希望对你有所帮助!

(译)注:

  1. 全出血:出血为印刷出版专有名词,指在打印中超出纸张裁剪的边缘部分,也就是需要裁剪的区域。这里的全出血意思是作品图块与屏幕边缘之间没有空隙。
  2. 笔画差异(stroke modulation):difference in stroke width within a letterform; also called stroke modulation. 字形内部笔画宽度的差异,亦称作「contrast」。
  3. 降部:descender,如 g、j、p、q、y 从基线向下延伸的部分。
  4. 基线:baseline,贴着如大写字母「A」和小写字母「b」下部的那一条「线」

发表评论

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