前言

关于界面中文字，相信大家都听过这么一个概念「文本即界面」那么我们知道在早期 GUI 概念还是萌芽阶段的时候，界面大多是由文字和字符构成的，文本是构成界面最最基础的元素。

最早的 GUI 界面之一   Xerox Alto 1973年

文字设置也是刚开始学习 UI 设计的朋友们，最开始所遇到的常见问题。虽然我从事 UI 设计的时间并不长，还是想和大家分享一下自己对界面中文字设置的小小经验，不对的地方还请大家多多指正。

一、字体

关于字体的相关文章相信的大家已经看到过很多了，像是字体分为两大字族衬线体（serif）和无衬线体（sans serif）除此之外还有手写体以及不同的风格字体等等。这里我要为大家引申两个概念就是：印刷字体（print hand）和屏幕字体（Screen Font）。像是我们经常在书本中看到的宋体 就属于印刷体，而谷歌在去年发布的思源雅宋就属于屏幕字体。两者之间有什么区别呢？我们知道字体在屏幕中显示的效果一是受限于系统对字体的渲染机制，还有就是字体的字形。

很多大家耳熟能详的字体有时候可能就不太适合于现在的屏幕，下面给大家举个例子吧。大家都知道西方对字体的研究已经很久了，英文字体库的数量也远远大于中文字库。其中作为字坛万金油的 Helvetica 一度成为 iOS 7 的主力字体，下面把他和谷歌 Noto 字体做下对比。

上图中，左边的字体为 Noto San CJK , 右边为 Helvetica，无疑对于 Illustrator 这个词Helvetica 字体对前三个字母基本很难分辨了。

另一个除了字形上的区别以外，印刷字体和屏幕字体更重要一个区分在于屏幕字体的行高和字间距要比印刷字体的大一些，这也是苹果放弃 Helvetica 最终催生了我们现在所看到的 San Francisco 的重要原因。

字体在 UI 界面中很大的一个作用就是「悄无声息」的，准确帮助用户完成操作任务。因此界面中的字体尽量不要给用户太强眼的感觉。现在随着屏幕清晰度的一次次提高，以及大标题带来的流行趋势，很多产品也会在界面中使用除屏幕标准字以外的字体打造产品的差异化，例如 轻芒杂志App就在标题使用了方正新报宋来打造产品的差异化。

二、字号

自 iOS 11 出现大标题的设计趋势出现以来，界面中字号的设置视产品而定发生了一点改变。一些主要的字号还是没有怎么发生变化，界面中的常见字体具体如下（@2x）。这里我的一个小经验的就是要在字号上拉开文字的层级关系，可以按照 1.5的倍率关系去增加。比如说文字 24px 标题就可以设置 32 px。

发现没有以上的常见字号都是偶数值，在文字设置文字的时候一般会用 4 为跨度单位（@2x），比如 24、28、32、36.  值得注意的是界面中的字号设置不宜设置太多。

三、字距与行高

要想文本阅读的舒适离不开使用合适的字距和行高，以便于提高文字的可读性，有利于用户在使用的时候快速获取信息，界面中的多行文字我一般会设置 1.5 倍的行高。有的朋友会问为什么又是1.5？因为我们知道字库字号的增长从0.5pt到72pt都是以0.5的倍数关系增长的。而在网格设计中的6/9/12都和1.5有着直接关系，1.5是网格设计中的常用数值。

例：

中文字体属于方块字，字距的不明很容易给人造成理解上的混淆。关于字距我的一个经验就是 0.5依次增加和缩减 。 比如说字号比较小的时候可以把字距设置为 0.5 让字距变开一些，而在字号较大的标题文字可以使用字距为 -0.5 的设置使文字更紧凑方便一眼就看完。在这个基础上可以视字号设置字距为 -2、-1.5、-1、-0.5、0.5、1、1.5、2在这个基础上灵活变化。

在标题文字字数比较多的时候，缩减字距更易快速识别。

例：

四、字体颜色

关于字体颜色的设定一般是依据文字信息的重要程度分为不同的等级，层级越低的文字颜色就越浅依次类推。大家的可能都听过类似 #999999、#66666 这样的数值来作为界面中文字的颜色。

这是常见的文字配色，但是他太常见了。在力求打造差异化的今天这样单一的配色模式有点不太合适。

在此我和大家分享一下我的一个配色经验。先设置一个与品牌色系相关的暗色，再复制几个这个暗色。在这个颜色的基础上做不透明度的变化，具体如下

1.先选取一个和品牌色相关的暗色。

2.复制四个暗色色块出来。

3.在白色底版下依次按照 100% 、75%、55%、5%的不透明度，对色块进行在不透明度上的调整。

4，通过吸色工具吸取得到的颜色色值，现在一套文字配色就出现了。

在这个基础上也可以延伸修改打造适合自己产品的字体颜色。

总结

这篇文章主要是个人归纳了一些在界面中文字设置的技巧，在收集归纳的这段时间也让我意识到界面设计中往往成败于方寸指间。受我自身能力有限文中所述可能还有很多不对的地方还请大家指出，或者大家有其他文字设置的技巧也欢迎大家能一起留言讨论。

以上，希望这篇文章能对你有所帮助。

本文由 @LQING 原创发布于公众号“海盐社”，未经许可，禁止转载