关于文字，UI设计师需要知道这些

1.2.3 字间距

字间距是单个字符之间的水平距离，即文字 "田字格" 边框的间距，默认状态下通常为 0，用来控制文本的横向宽松程度，单位也是 pt。

这个属性对于中文的排版来说并没有太多用处，因为中文的字符区域是以正方形进行设计的，且在设计时就以已经考虑了最佳的默认显示样式，所以只有一些比较特殊的场景会用到。

而对于英文来说字间距就显得尤为重要，因为不同字母的字宽是不同的，往往需要我们根据字号、字重的不同动态调节间距参数，所以苹果在官方字体规范中使用 SF 不同字号状态下就会应用不同的字间距数值。

为什么很多英文设计稿一看就是中国设计师做的，因为这它们使用的都是字间距为 0 的英文，在英文母语环境下这样的间距是无法被接受的。

1.2.4 行高

行高是一行文本垂直方向的高度，这个高度和字高无关，文字内容默认处于这个高度的水平居中位置，如下图所示。

在一般的 UI 软件中，我们可以发现通常默认行高一定比字号本身更大，例如字号为 12pt 的文字行高为 17，导致文本区域高度大于实际的字高。这是一个正常现象，因为如果行高和文字同高或更小，那么在多行文本状态下就无法正常显示。

但是，还有一个在 Sketch、XD 等软件中没有包含的属性需要引起我们重视，那就是 —— "行间距"。

行间距是一个独立于行高之外的属性，在一些复杂的设计、排版软件中会出现，以及iOS、Android 等前端语言中也有提供这个属性，它是造成我们标注与实际开发过程出错的罪魁祸首。

无论是设计过程中，或者设计标注文件中，都要抛弃掉任何有关行间距的概念，具体的原因会在后续内容中说明，这里只要搞清楚它们的区别即可。

1.2.5 段间距

前面我们已经了解了，在定宽和固定尺寸的文本区域中，文字超出一定数量会换行，这是自动执行的，但当我们想要对数量较多的文字做出主动的划分，就会对内容进行换行操作，即——生成新的段落。而段间距，就是和前面所有元素无关的控制段和段之间距离的属性。

根据亲密性的原则，段落之间首尾的行之间间距应该大于段内的间距，这时候就应该增加段间距，使得文本的阅读体验得到进一步的提升。

比如本段和上一段内容……

在上面了解了文字基本属性以后，接下来我们要简单介绍一次有关 iOS、Android 端的文字规范。规范内容主要分为两个方面，一个是使用的字体介绍，另一个是对文字大小的应用。

2.1 iOS 文字规范

2.1.1 可用字体

在 iOS 中中文和英文都有各自的官方字体，中文只有一个字体，那就是 "苹方"，而英文有两个系列的字体，一个是黑体 "SF Pro" 另一个是衬线体 "NewYork"。

在中文字体环境中，我们使用苹方这个字体即可，苹方中也有携带英文字符，所以中英文混排不需要特意设置英文字体，统一使用苹方即可。

而英文环境下，使用的字体就比较复杂。我们可以根据需要选用 SF Pro 或者 NewYork 作为主要用字，但作为系列字体，它们实际上还各自包含好几个字体类型，目前官网对 NewYork 的说明还语焉不详，所以我们先从 SF Pro 入手。

苹果官方为 SF 系列提供了 7 种字体，用于各种不同的设备，其中 SF Pro Text 和 SF Pro Display 是用于手机和 ipad 客户端的系统字体。

而这两个字体的区别，在于当我们使用的字号小于 20 时，使用 SF Text，大于或等于 20 时，则使用 SF Display，这需要我们在设计英文界面时手动进行切换。以及，每个 SF Pro 字体下包含了接近 20 种字重，直接让设计师体会英文排版的复杂性。

除了官方提供给我们的字体以外，系统还有内置一些其它的英文字体可以供我们使用，在一些特殊的标题或者数字中使用。具体的我就不罗列出来了，大家可以参考下方的链接：

iOS 所有的系统字体列表

2.1.2 文字设置

2.2 Android 文字规范

2.2.1 可用字体

Android 系统中，Google 为 Material Design 系统指定的字体，中文是思源黑体，英文是 Roboto。相对于 iOS 来说，MD 的字体使用上比较简单，没有那么多系列要选。

但是，安卓于 iOS 不同的是，不同手机厂商会对系统进行深度定制，使用自己的设计语言，所以自然会更换掉机器默认的用字。我们无法为每个系统都开一个新的设计稿，所以通常在安卓系统的设计中，只要使用思源黑体和 Roboto 即可。

2.2.2 文字设置

2.3 系统规范与应用

可能有些同学看了上面的列表和参数，就认为有关字体设置的难题都解开了……哪有那么容易。

iOS、Android、Windows 等系统的设计语言，都是基于英语环境下诞生的，给出的文字设置也是基于英文的参数。这种情况导致，这些设置不能无差别的应用到我们设计的界面中去，会为我们的设计带来非常多不合理的地方和限制。

例如，官方规范中的字间距，在不同尺寸下有不同的数值，这在中文中是完全不需要，且英文适用的阅读文本字号，比中文更小等。

所以，系统的规范只能作为一种参考，而不能作为我们直接套用的来源。合理的设计源自合理的思考，所以，我们会在下一部分开始讲解文字在设计过程中的具体设置。

既然前面说了，官方的文字只能作为参考，所以这一部分，就要从思路开始，详解我们设计过程中如何一步步完成文字的应用。

3.1 文字的角色

在 UI 中应用文字，有一个非常重要的概念，就是 —— 文字的角色。这个词听起来很抽象，但并不难理解，比如下图京东的购物信息：

包含的文字角色有商品标题、价格、原价、商品介绍、优惠信息、新品提示、标签提示等，它们的样式各不相同，不仅丰富了页面的视觉体验，也便于用户理解内容。

文字的角色是决定它们样式的关键因素。在我们用过的 Word 或 PPT 中，都有提供一个样式选择的列表，它们就是文字角色最基本的体现，比如标题、二级标题、三级标题、正文、注释等等。

不同的角色，它们在画面中的定位就不一样，有各自的作用，所以我们必须通过不同样式体现。

而角色中还包含一种内建的逻辑，即 "权重" 的等级，大标题、价格就像主角一样，需要重点给特写，而注释类文字则是龙套无足轻重。