7.2 排版指南

排版指南

排版*表达了层次结构和品牌形象。

*此“排版”为印刷领域类的文字排版，是“一种使书面语言文字显示时更具可读和易读性的艺术和技术（维基百科之排版-Typography）”，与通俗意义上所有元素的“布局”不同。

目录

字体属性

字体分类

易读性

系统字体

字体属性

字体是字母的集合。虽然每个字母都是唯一的，但字母间有确切的共享形态。字体代表了通过字母集合而形成的共享模式。

当使用排版设计的基本原则时，根据其样式、辨识性和易读性来选择字体是最有效的。

字型部分名称：孔径（Apeture）、升部（Acender）、基线（baseline）、大写字高（Cap Height），降部(descender)、行距（leading）、字间距（letter spacing）、无衬线（sans serif）、衬线（serif）、

字干（stem）、笔画（stroke）、X行高（X-height）。*

*此处专有名词翻译参考了日本设计师小林章先生的《西文字体》

基线

基线是指文本行所停靠的那条看不见的线。在Material Design中，基线是测量文本与元素间垂直距离的重要规范。

基线

4dp网格

字体与4dp网格基线对齐

无论pt/sp的大小，文字基线必须位于4dp网格上。为维持这个网格标准，行高必须是能被4整除的值。

从基线开始测量

规定UI元素与文字的距离以到基线为标准。基线值与软件无关，所以可在任何设计程序中使用，网格也同样如此。在Android和iOS上，代码可以从基线相关的规格转换成内边距。对于web，可以使用Sass或CSS自动计算。

1. 垂直对齐的是参考基线而非边界框，这样可以在设计软件和平台上实现更精确的操作。

2. 测量文本与其它组件的关系

大写字高

大写字高是指从基线开始测量的扁平大写字母（如M或I）的高度。圆形和尖角的大写字母（如S和A），可通过视线调节使这类字母略微高过大写字高，从而达到大小一致的视觉效果。每种字体都有其独特的大写字高。

大写字高

X字高

“X字高”是指小写字母“x”的高度，它可以表示字体中每个字形将会达到的高度或长度。

满足“X字高”的字体在使用小字型时具有更高的可读性，因为每个字母内的空白区域更清晰。

字体小写字母x的高度决定了其“X字高”。

升部与降部

升部存在于部分小写字母中，是超过大写字高或基线的垂直方向笔划。降部是这些字母中垂直向下的笔划。在一些情况下，当行高（基线间的垂直距离）过于紧凑时，笔划间可能会产生冲突。

升部与降部

字重

字重指的是字体笔划的相对粗细。一个字体可以有很多个字重，通常情况是4-6个。

一般字重：

1. 轻

2. 普通

3. 中等

4. 粗体

字体分类

衬线体

衬线是出现在字母笔划始端或末端的小形状或突起。带有衬线的字体称为衬线字体。衬线体可归为以下类型之一：

旧式衬线体类似于墨水书写作品，具有：

• 笔划粗细对比低

• 笔划中强调斜线

• 小写字母升部上衬线倾斜

过渡衬线体具有：

• 笔划粗细对比高

• 中等高度的“X字高”

• 笔划中强调垂直线

• 括弧性衬线

Didone或新古典主义衬线体具有：

• 笔划粗细对比非常高

• 笔划中强调垂直线

• 笔划末端成“球形”

Slab衬线体具有：

• 笔划粗细区别非常微小的粗衬线

• 细微或没有括弧性衬线

1. EB Garamond字体，旧式衬线体

2. Libre Baskerville字体，过渡衬线体

3. Libre Bodoni字体，Didone/新古典主义衬线体

4. Bitter，粗衬线体

无衬线体

没有衬线的字体称之为无衬线体，来自于法语单词“sans”，意思是“没有”。 无衬线体可归为以下类型之一：

• Grotesque：笔划粗细对比低，纵向或无明显加重

• Humanist：笔划粗细对比中等，倾斜加重

• Geometric：笔划粗细对比低，纵向加重和圆形风格

1. Work Sans, grotesque无衬线体

2. Alegreya Sans, humanist无衬线体

3. Quicksand, geometric无衬线体

Monospace

Monospace字体中所有字符都显示为同样的宽度。

1. Roboto Mono, monospace

2. Space Mono, monospace

3. VT323, monospace

手写体

手写字体是非常规的，具有自然书写的感觉。这些字体通常在格式中使用H1-H6。它们有以下几种形式：

• Black letter: 高度对比、窄、有直线和角度曲线

• Script：书法风格的重现（相对更正式）

• Handwriting: 手写风格重现（相对没那么正式）

1. UbifrajturMaguntia, black letter

2. Dancing Script, script

3. Indie Flower, handwriting

展览体（Display）

这是多种类型字体的混合，它们仅仅适用于大尺寸的显示。

展览体通常在字体格式中使用H1-H6。

1. Shrikhand, 展览体

2. Chewy, 展览体

3. Faster One，展览体

易读性

可读性取决于字体中的字符，而易读性是指阅读单词或文本块的容易程度，这会受到字体风格的影响。

字间距

字间距，也称作字距，用于文字中对字母间距离的统一调节。

大型字体（例如标题）可通过缩紧字间距来减小字母间的距离并提高易读性。

缩紧字间距

对于小型字体，更疏松的字间距可以提高易读性，因为增大字母间隙加强了它们的形状对比。全部大写的文字，即使是小型尺寸，也会由于增加字间距而提高易读性。

疏松字间距

表格数字

在表格内或其它数值可能会经常变化的地方使用表格数字（也称作等宽数字），而非比例数字。

表格数字使数值保持视觉对齐，以便更好地浏览。

行宽

正文的行宽通常在40至60个字符之间。而在更宽的区域（例如桌面），行宽能达到120个字符，此时需要将行高从20sp增加到24sp。

对于英语正文来说，理想的行宽是40-60个字符。

短行英文的理想长度是20-40个字符。

行高

行高（也称作行距）控制了文本块中基线之间的空间量。文本的行高与其字号成比例。

1. 字号14，行高20dp

2. 字号20，行高28dp

段间距

将段间距保持在行高的0.75倍到1.25倍之间。

字号20sp，行高30dp，段间距28dp

字体对齐

字体对齐决定了文本在其显示空间内的对齐方式。方式有以下三种：

• 左对齐：文本靠左对齐排列

• 右对齐：文本靠右对齐排列

• 居中：文本与其所在区域的中间对齐排列

左对齐

左对齐文本是左到右语言（如英语）最常用的方式。

正文中使用文本左对齐

右对齐

右对齐文本是右至左语言（如阿拉伯语和希伯来语）最常用的方式。

左至右语言也可使用右对齐文本，但最好用于突出布局中的短版元素（如旁注），不推荐在长文本中使用。

旁注使用右对齐文本

居中

居中文本最适于突出布局中的短版元素(如重要引述)，不推荐在长文本中使用。

重要引述使用居中文本对齐。

系统字体

系统字体已预先安装在电脑或设备中。它们通常有广泛的语言支持且不收取开发者许可证费。在APP字体中使用系统默认字体会将平台的一致性与APP的界面和使用感受相互融合。不过，由于它们在设备中随处可见，因此可能不会特别突出。

使用系统字体

原生系统字体应该在大段文本或任何字号低于14sp的文本上使用。

Roboto是Android的默认系统字体。对于Android之外的平台和web产品，请使用对应平台推荐的系统字体。例如，iOS应用程序就应该使用苹果的San Francisco字体。

安卓

Roboto系统字体

iOS

San Francisco系统字体

*参考网站：维基百科

*参考书籍：小林章《西文字体》《西文字体2》

*原文作者为谷歌设计团队，本文为个人翻译作品，仅供学习参考