1. 汉字使用的历史与现状

在人类发展历程中，文字作为信息传播的载体，具有承上启下的重要作用。汉字是世界上使用时间最长、使用范围最广、使用范围最广的文字。大约在6000年前，开始出现齐整、规范的具有文字初步特征的图形符号。

后期，汉字经历了篆、隶、楷等多元化发展，百花齐放。自从木版印刷流行以来，雕刀刻出的字因为横细竖粗，醒目易读，得到了广泛的应用。因为活字印刷时，首尾会有墨渣，所以会刻意留下一些装饰，让墨汁溢出。

后来这种装饰也被保留了下来，经过字体的优化，就成了我们今天仍然广泛使用的宋体。时至今日，特别是在体制内，宋体仍然占有很大的地位。

后来人们模仿宋体的结构对字体进行调整，变成了笔画粗细一致、细而长的印刷字体，也就是我们今天所说的“仿宋”。

与此同时，“黑体”也诞生了。由于该字体醒目大方，粗细一致，结构醒目严密，字形规整，阅读方便，所以是现今界面设计中最常用的字体。现代汉字黑体是现代印刷技术传入东方后，以西方无衬线字体黑体为基础而创制的。因此，按照西方的说法，黑体也可以称为无衬线字体，宋体可以称为衬线字体。

近代以来，随着互联网的兴起，LED显示屏中的字体也有了很大的发展。

早期显示屏差，分辨率低sketch标注插件，屏幕色彩少，汉字笔画多，小黑体清晰度差，所以一般用于文章的重要标题。为了匹配低分辨率下的像素网格，对宋体字体进行了调整。调整后的字体在低分辨率下，在小点阵中也能很好的显示，识别度高。开启后，字体的识别性能得到了很好的保证。所以在互联网早期，衬线字体一直占据互联网的主导地位。

直到屏幕显示效果的提升，粗体才逐渐流行起来。在屏幕分辨率较高的情况下，粗体已经可以达到更好的识别效果，因此原有的衬线功能就不再需要了。相反，衬线字体在阅读时容易因装饰元素过多而产生视觉疲劳。因此在屏幕密度较高的移动载体上，无衬线粗体成功取代衬线字体占据了主导地位。

修改后的黑色字体中心更加开阔，间距更加均匀，显示更加舒适，醒目易读，更利于视觉信息的传递，在屏幕上占据主导地位。几大互联网巨头微软雅黑、苹果此后分别斥巨资为自家的OS系统打造了微软雅黑和苹果方正。因此通过分析可以看出，在未来的界面设计中，字体风格仍将以无衬线字体为主，字体形状甚至可能进一步简化。

二、iOS系统字体详解 1、默认字体- Han Sans/Robot

为了更好地追求视觉效果，提升设备端的用户体验，静雄与Adobe 合作推出了 Han Sans（Noto）作为中文字体。

字体的字形比较稳定，阅读起来比较轻松，并且有7种不同的粗细，完全满足不同场景下的设计需求。7种粗细分别是：Thin、Light、Bold和Black。对于英文，Robot作为基础字体，只有6种粗细：Thin、Light、Bold和Black。视觉语言与 Han Sans Noto保持一致。

另外官方手册也给出了标准字体大小，字体单位中不再使用px、pt作为单位，而是统一使用sp，换算方法为：

px = sp*ppi/160，sp = px / (ppi / 160)

按照1334×750的尺寸密度，1dp = 1 * 326/160 ≈ 2px

2.iOS默认字体-/San

在 iOS 中，苹果为中文添加了新字体，该字体居中纤细饱满，易于阅读，并提供了 6 种字重供设计师和开发者使用。因此在随后的设计趋势中，字重的使用更加多样化，使用中等粗体大号字体作为界面标题变得更加流行，这在 iOS 11 中的一些原生界面和一些知名应用中更为明显。

英文部分采用 San 字体，除了 iOS 和 Mac OS 之外，该字体也针对 Watch OS 进行了单独调整，并命名为 San。每款字体分为 Text 和 Apple Watch 两个属性，Text 只有 6 种粗细，而 Apple Watch 则有 9 种粗细。

3. 总结与结论

通过对比我们可以发现：其实字体形态和iOS并没有太大区别，所以没必要下载所有字体进行单独配置。所以在日常工作中我们只需要按照一套标准的iOS设计稿进行输出，自动进行延展，最后检查确认效果即可。

如果使用了标准字体以外的字体，除了颜色之外，还应该标注相应的字体粗细和高度（如 Font:SC-，line:52px），而不是单纯的标注为粗体或者细体。当然，如果人力允许，我们也可以单独做界面和字体的适配，以提升终端的视觉显示效果。

3.字体基本属性详解

在正常项目中，为了让页面上的字体更加贴合业务场景，需要调整字体间距和高度。但很多同学在输出批注时，往往只标注了字体大小和颜色，而其他参数没有标注或者标注错误。在最终进行视觉还原审核时，字体往往出现较大偏差，在视觉检测上浪费了大量不必要的工作。

这里我们会给大家详细介绍一些字体属性以及标注方法，以节省开发工作量，更好的还原视觉稿。

1. 字体基础结构详解

一般来说，为了保持字体的完整显示，字体设计师都会给字体预留一定的安全距离，设置合适的上升部和下降部之间的距离，让字体的显示更加均衡。这里我标注了对应的线图：

所以从这个图我们可以看出，我们在设计的时候，可能对字体使用了28px，而我们用测量工具测量的时候，确实是28px，但是实际上字体本身占用的距离包含了上行和下行区域，导致占用的空间大于28px，变成了40px。所以我们标注的时候，要按照实际的尺寸包括上行和下行，这样还原出来的视觉效果也是非常接近设计稿的。

因此我们在设计输出的时候，如果不调整行值，可以直接使用注解插件实时导出相应的参数，这样的参数最接近开发效果。如果没有Mac，可以用PS选中文字，选中的深色背景就是字体本身的间距。

下图中我做了两个例子来说明正确的标注方法，虽然标注起来可能比较麻烦，但在视觉还原的时候往往能达到事半功倍的效果。

2.字体行高、行距参数详解

所以在一些文字比较多的页面上，为了让阅读更加流畅，我们经常需要调整文字的高度和间距。那么我们先来看一下动效编程软件中可以配置的参数。

我们可以发现，改变字符间距、字符宽度和结束高度只需要配置、行数、这三个值即可，所以我们先来了解一下这三个值的含义：

（1）：字间距

所谓字符间距就是两个字符之间的距离，一般会加在字符的末尾。比如字符“AK”，其默认值是0，所以两个字符之间的间距就是字体默认设置的安全距离。如果你设置了50的值，那么就会自动在A的末尾加上50px，显示效果就变成“AK”。

（2）行：行高

即字段在UI Lable中实际占用的高度大小。前面说了默认字体会设置安全距离，所以设备中字段占用的行高=字体像素大小+升降安全距离+扩展值。每种字体都有对应设置的行高比例，可以通过选中字体监听行高值来查看。

另外，前面说过，标注间距的时候一定要包含行值，否则实现的时候可能会出现字体偏移位置不等的情况。

（3）：行距

很多同学发现，调整这个参数跟调整行值类似，但其实调整的是两行之间的间距，而不是单行字段所占的空间。

从上面我们可以了解到字体在实际设备中是如何排版的，所以一定要仔细标记，如果发现开发出来的字体样式和设计稿不一致，只需要提供上面的参数值即可。

如果你在一个团队中，仍然依赖手工注释，那么完整的注释应该是：Font-name；Font-size；Font-color；Font-line；Font-；Font-。

若没有设置的话，则留空即可，如：

4. 如何设置科学计数法字体大小

如今手机屏幕越来越大，分辨率越来越高，所以我们在设计的时候难免会为字体大小而感到困惑，文字是不是太小了？还是太大了不精致？标题和正文是不是没有区别？这样的问题可能经常困扰着一些年轻的设计师。

其实字体大小确实是有一套计算规则和公式的，今天我就给大家科普一下。

当我们注视某些物体时，测量视角的方法是先测量物体的长宽以及眼睛与物体之间的距离，然后得出相应的数学计算公式，其中：

θ=(·h/2d)2，换算一下h=2d·tan(θ/2)

1. 设计中最小的字体尺寸来自哪里？

就人眼的感光系统而言，一个像素相当于0.3角分。为什么人眼看不清远处物体的细节？或者看不清月球上的陨石坑？那是因为月球在你视网膜上的影像，其实只是一张100像素左右的图片，所以肉眼无法清晰地观察到陨石坑。

据科学研究：

人眼要识别信息物体，眼睛的视角必须大于0.3°，才能保证投射到视网膜上的文字信息分辨率足够大，才能被大脑识别。

那么我们就可以把数据代入公式进行计算了，人眼与手机的距离一般在30cm左右，也就是说正常情况下，当手机距离眼睛30cm左右时，利用可视角度计算公式，我们能识别的最低文字尺寸为h= 2*30·tan(0.3/2) ≈ 0.157cm，因为我们经常用1334×750的尺寸来做设计稿，dpi为324，也就是一英寸显示324个像素，1英寸为2.54cm，所以0.157cm=324*(0.157/2.54cm)= 20px

所以正常情况下我们在设计稿中使用最小字体大小的时候，肯定不小于20px。

2. 使用原子理论来决定字体大小

我们在设计的时候，字号单位必须遵循原子理论，即使用一个基数作为倍数，比如 2、4、6、8、10 或者 3、6、9、12。但实际上我们在为移动端设计的时候，单位必须遵循偶数原则，因为开发中的单位都是以一次性图片的基数为基准来计算的。所以实际上在制定字体规范的时候，以 2 为单位会导致字号过多，难以管理，而且 2 号字体的分化度本来就不大。

因此字体大小以 4 为单位是比较合适的：一来适配后不会出现@2x、@3x 处半个像素的情况，二来以 4 为单位可以满足字体大小的均衡性。那么我们可以制定相应的字体单位：

3. 使用大字体作为标题

随着设计行业的发展和视觉理解能力的提高，现在更多的设计师愿意使用大字体、大间距来在页面层面区分信息。这是因为大字体阅读起来更加舒适，能够准确、快速地传达信息，提高阅读效率，减少视觉疲劳。

因此，在日常的项目中，不妨大胆地使用大字体作为主标题，以扩大页面不同信息之间的层级关系。

5.合理配置字体，打通层级关系

在移动端界面设计中，除了之前文章中提到的利用间距网格来分隔不同的内容层级之外，适当调整字体样式也是不错的选择。通过调整字体粗细和颜色，可以让页面的视觉逻辑更加清晰，主次分明，减少对用户的视觉干扰，提高页面的可操作性。

那么我们该如何设置这两者呢？

1. 尽量减少页面上不同色调的数量

在日常的界面设计需求中，一些重要的字段可能会被业务方重点突出，他们首先想到的是用红色标注字体，或者加入各种颜色。但事实上这样的设计在最终上线后往往适得其反，因为过多的颜色导致页面缺乏焦点，视觉疲劳，页面跳出率增加，难以达到预期的效果。

研究表明，页面越干净整洁，跳出率就越低。这个规律几乎适用于所有的界面设计。

因此字体颜色不宜过多，可以考虑在同一个色系下使用不同的明度来区分不同层级的字段。通过先确定主色再扩展主色的方式，可以适配多种场景的文字颜色，配置好对应的色板后，再根据页面层级适当填充文字颜色即可。

2. 使用不同的权重来区分内容

为了更好地区分不同信息之间的层级关系，除了配置颜色外，使用不同粗细的字体来区分内容也是不错的选择。

使用较粗的字体作为主标题，较浅的字体作为辅助信息，可以更好地增加单色环境下内容的响应和对比度，减少页面上过多字体颜色的使用，从而使页面更加整洁，内容更加清晰，降低页面跳出率。

比如，对于比较重要的信息，我们可以采用较粗的字重，对于比较弱的信息，我们可以采用较细的字重。比如下面的余额宝和京东小额金库的界面，虽然两个界面都留有较大的留白空间，但是京东金融在字重的设置上更加严谨，所以在层级关系的处理上，京东更胜一筹。

不同的字体粗细给用户的感受完全不同：较粗的字体往往比细的字体传达出更庄重、实用和严谨的感觉，而细的字体则显得更活泼、有趣，给人一种愉悦的感觉。

刚才我们提到了使用字体粗细的必要性，那么我们如何定义字体粗细呢？

如果字体粗细使用不规范，整个页面的视觉逻辑就会比较混乱，所以往往这个时候，我们需要设计一个文字标准，比如主标题用什么字体粗细，正文用什么字体粗细样式。认真敲定整个文字的使用规则，并将标准延伸到整个产品页面设计，也是统一产品视觉语言的重要一环。

例如京东在价格字体上采用了自主设计的一套品牌专属字体，价格是电商中极其重要的信息，使用统一的字体可以大大增强品牌归属感。

3.-文本样式提高协作效率

对于文本管理，创建了 Text Style。通过 Text Style，可以大大提高效率，规范页面的字体大小。如果设计团队所有成员都使用它作为主要工具，那么不妨尝试配置它，提高团队协作的效率。一方面可以规范页面的字体样式，另一方面节省调整字体的时间，减少不必要的工作量。

6. 字体应用发展趋势及总结

从 iOS 11 的更新不难看出，目前界面风格的趋势是更加简洁，减少一屏内容，有利于减轻阅读负担，更好地展示重要信息。这里我对字体进行了单独梳理，经过分析，近期字体使用特点主要有以下三点：

1. 更大、更醒目的标题

大标题可以吸引注意力，抓取眼球并传达信息，增加页面空间的张力，减少视觉阅读疲劳。

2. 字体粗细层次更加明显

通过显示差异化的字体粗细，可以更好地增加单色环境下内容的响应和对比度，减少页面上过多字体颜色的使用，使得页面更加整洁，内容更加清晰，降低页面跳出率。

3. 使用字体亮度来区分内容中的信息

使用单一色调的不同亮度作为字体和图标的颜色，可以使页面显得更加整洁，并在区分信息层次的同时减少视觉噪音。

7.字体使用总结

互联网在进步，设计潮流也有各种表现形式，而字体作为基础语言sketch标注插件，是设计师需要掌握的基本技能之一。本文中的案例是作者花费大量时间绘制和收集的，希望对各位读者有所帮助。

另外，在工作中，也建议大家对自己的经验进行总结，提炼、沉淀关键信息，一方面这样可以让自身的知识更加扎实，另一方面也能帮助后来者成长。

————–

这是我第一次尝试发表《人人都是产品经理》的专栏，心里非常紧张。

读起来容易，写起来不容易！文章很长，非常感谢大家的耐心阅读。如果大家对文章感兴趣，也可以在这里点个小赞或者留言支持作者！以后我会经常给大家带来文章，也可以订阅作者的专栏，获取知识的传递。谢谢！

如有侵权请联系删除！