UI字体的10个核心知识点，背诵也要背下来！

字体一直是 UI 设计中最重要的组成部分之一，而 UI 的字体设计运用又和平面有很大的差异，所以也是新手需要优先掌握的知识之一。

在这次的字体说明更新中，我们要以 Figma 的属性栏为基础展开说明，结合软件的使用用更直观简洁的方式让大家用最高效的方式掌握这些信息。

一、文字的基础属性认识

文字的基础属性就是控制文字样式轮廓和显示效果的基本属性类型，包括字体、字重、字号、字色、装饰等。

1. 字体的选择

屏幕中 UI 界面显示的文本样式源自系统安装的字体文件，每个字体文件内会记录若干文字、符号的图形，所以切换字体，就能得到不同的字体样式。同时，每个字体文件还包含了不同的特性，会对其它属性的设置产生关键的影响。

在 Figma 中进行 UI 设计时，字体选择主要根据面向的系统类型决定，以模拟真实的显示情况，下面是不同系统中的中英文字体选择：

如果设计的是中文界面，那么可以直接使用中文字体来输出英文或数字，无须为一个段落中混排的英文单独设置英文字体。只有在设计英文界面或者独立的英文、数字信息上，可以切换成英文字体。

同时，安卓和网页端的字体选择仅是建议，因为不同客户端使用的字体类型是有差异的（小米、OPPO、华为等都用自己的字体），UI 设计过程无法确保一个字体能应用到所有设备中，所以面向它们的设计只需要选择常规的黑体类型作为示意即可。

2. 字重的选择

字重是设置文本轮廓和笔画粗细的选项，不同字体会附带不同的字重选项（斜体也被算在字重选择中），比如苹方默认包含 Ultralight、Thin、Light、Regular、Medium、Semibold 6种字重，而微软雅黑默认只有 Light、Regular、Bold 三种字重。

通常，中文的字重较少（苹方6种），而英文的字重更多（SF Pro DISPlay 有18种）。同时中文的排版中，极细字体 Ultralight、Light 很少会用到，所以字重的选择就很固定（更简单），只需要遵照下面的规则即可：

标题字：Medium、Semibold一般文本：Regular注释：Light/Regular

而在 Figma 还引入了一个比较特殊的字体设置方式，即字体变量 Font Variable，通过调整数值来更改字重、倾斜角、圆角等，但这需要字体文件的支持，不是所有字体都能使用这种方法进行调节。

3. 字号的设置

字号就是文字大小设置，在 UI 设计中字号的设置也比较固定，只要确认文本的类型和权重，就有对应的字号选择范围，而不是凭感觉从小到大试过去。

主要的字号选择范围可以参考下面的规则：

大标题：16-24小标题：14-16正文字号：14-16注释文本：10-13

在字号的参数选择上，不需要遵循偶数和4的倍数，可以使用奇数和质数。同时，中文10号字以下基本已经无法看清，不要轻易使用，而英文因为笔画比中文简单，所以最小字号可以用到8左右。

4. 字色的设置

字色就是文字使用的色彩，在其它设计软件中字色往往会在字体属性设置栏里，但在 Figma 中字色的设置是在图层的填充 Fill 选项中实现。

除了使用彩色字体外，常规文本通常填充的是 “中性色”，即黑白灰。当我们把色彩模式切换成 HSB 以后，就可以以 B 值（灰度值）来设置字色，B 值越低则颜色越黑，反之则越白。

在白底中，字色从浅到深可以分为三档，可以参考下面的规则：

标题/正文：B 值5-40次要文本：B 值40-60注释文本：B 值60-80

要注意的是，实际设计中纯黑文本的使用要慎重，因为手机主流 Oled 屏的纯黑色是不发光的，会产生比较特殊的视觉效果。

如果是设计黑底白字的模式，那么字色的调整通常就不是调整 B 值，而是一开始填充白色后，通过透明度的调节来实现字色的控制。

5. 装饰设置

Figma 还提供了一些比较常规的文本装饰设置 Decoration，主要包含下划线和删除线两种。在强调或原价类型的文本中可以直接使用该设置完成划线的添加，而不用我们单独添加。

二、文字的排版属性认识

确认完文字的样式以后，还要设置文字的排版，而 Figma 中提供的文字排版选项主要有布局、对齐、行高、字距、段间距等基本选项。

1. 文本布局的设置

文本的布局设置显示在 Figma 属性栏中的 Layout 面板，包含自动宽度、固定宽度、固定尺寸三种选项。理解它们的特点就要先认识文本区域，任何文本的现实都只能显示在文本区域内，而布局控制的就是文本区域的尺寸特性。

自动宽度：默认布局形式，在输入文本后文本区域会自动向右延长，主要在应用在单行文本中。固定宽度：固定文本区域宽度，如果输入的内容过多就会实现自动换行，向下延长，主要应用在多端长文本中。固定尺寸：固定文本区域的宽度和高度，不管输入多少文本这个区域的尺寸都不变。通常会结合 Figma 字体基础设置中的 Truncate Text 使用，文本超出时自动使用省略号。主要用于标题或简介文本中。

2. 对齐的设置

对齐就是文本在文本区域内的对齐方向，包含水平和垂直两个方向的设置。其中水平方向的左、中、右对齐很好理解，根据场景中文本在区域内左、中、右对齐的需要设置即可。

但是垂直方向的上、中、下设置，则有明确的条件，只有在文本区域使用自动固定尺寸的模式下，才有设置的差异，否则自动和定宽模式的文本区域没有上下的空隙进行对齐。

3. 行高的设置

行高是指文本单行显示的高度，也是影响文本区域大小的关键因素。任何字体的默认行高（auto）都是大于字号的，这才能保证一些特殊字符有显示空间，且当文字出现两行以后上下留有缝隙。

因为默认行高的存在，所以文本区域必然会大于文字边缘，在 UI 设计的常规情况下，是不会强行抹除这个间距进行排版的，而是依旧使用文本区域对齐。

只有在特殊的价格或数字类型中，可以移除行高的缝隙方便排版，想要实现这样的效果可以在 Vertical trim 选项中实现。

单行文本使用默认行高即可，如果多行文本通常还需要增加行高才能便于阅读。具体行高应该设置成多大没有绝对准确的数值，如果没有把握可以在设置在字号的 1.6 - 2倍之间，确保多行阅读的体验。

4. 字距的设置

字距就是文字左右之间的距离，使用的单位是百分比（字号的）。在中文字体的排版中，是不需要使用字间距的，因为中文的特性是文字定宽，形成统一的节奏。

但在英文排版上，字间距就必须要设置，因为英文的字符宽度不一，需要控制字符间距形成更稳定的阅读节奏。而因为字号不同，人眼对字间距的感受也不一样，所以不同字号要设置不同的字间距，没有统一的数值。

如果在英文界面设计中不知道该怎么设置字间距，可以参考苹果官方的字体样式列表。

5. 段间距的设置

段间距是段落之间的间距设置，确保段落之间有一定的留白更有利于阅读的体验。当我们在一个文本区域内输入多段文本时（文章内容），可以单独通过该属性的设置来实现段落间距的控制，而不是使用回车作为隔断。

段间距的设置也没有固定的标准，通常在行高的40%-80%之间，看具体效果和设计目标决定。

虽然 Figma 还提供了其它排版细节的属性设置，但上面5个是 UI 设计中最重要也最常用的5种，优先掌握它们的知识和使用场景即可。

结尾

UI 字体设置要掌握的核心知识点就上面这些，建议大家就是强行背也要背下来，而不是在实际设计过程中“凭感觉”去设计，这样做出来的界面字体漏洞百出，是没办法进步的。

作者：超人的电话亭