一、汉字使用的前世今生

在人类发展史上，文字作为信息传播的载体，具有承前启后的重要意义。 汉字是世界上使用时间最长、使用最广泛、最受欢迎的文字。 大约在6000年前，具有整齐规范特征和初始文字特征的图形符号开始产生。

后期，汉字经历了篆书、隶书、楷书等多元化发展，百花齐放。 自从雕版印刷普及以来，用刻刀雕刻的字体因其横细竖粗、醒目易读而得到广泛应用。 由于活字印刷的开头和结尾都会有墨水残留，所以故意留下部分装饰带有溢出的墨水。

后期，这种装饰被保留下来。 优化字体后，成为宋体，至今仍在广泛使用。 时至今日，尤其是在制度上，宋朝仍然占有很大的地位。

后来，人们通过模仿宋体的结构对字体进行调整，将其改为细长狭窄、笔划粗细一致的印刷字体，这就是我们今天所说的“假宋体”字体。

与此同时，“黑体”诞生了。 由于该字体醒目大方，粗细一致，结构醒目严密，字形端正，易于阅读，是当今我们在界面设计中使用最多的字体。 现代汉字“黑龙江”是现代印刷术传入东方后，以西方无衬线体中的“黑龙江”为基础而产生的。 因此，按照西方语言，黑龙江也可以称为无衬线字体，宋体称为有。 衬线字体。

近代以来，随着互联网的兴起，LED显示屏中的字体也得到了长足的发展。

早期的时代，显示效果差，分辨率低，屏幕颜色少，汉字笔划多，黑色小字体清晰度差，所以一般用于重要文章标题。 为了配合低分辨率下的像素网格，宋朝对字体进行了调整。 调整后的字体可以在低分辨率的小点阵中很好地显示，识别度较高。 开启后，字体的识别性能得到了很好的保证，所以在互联网发展初期，衬线字体在互联网上一直处于主导地位。

直到屏幕显示效果的进步，黑体才逐渐流行起来。 当屏幕分辨率较高时，黑体已经可以达到更好的识别效果。 因此，原来的衬线的功能就不再需要了，衬线反而由于装饰元素过多，阅读时容易造成视觉疲劳。 因此，在屏幕密度较高的移动运营商中，无衬线黑色字体成功取代了衬线字体，成为主导。

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

二、iOS系统字体详解 1、默认字体-思源海蒂/

为了更好地追求视觉效果，提高设备中的用户体验，安祖联合设计并发布了Noto中文字体。

字体形状比较稳定，易于阅读，并且具有7种不同的字体粗细，完全满足不同场景下的设计需求。 7 种字体粗细是：细、、、、粗体和。 在英文中，它被用作基本字体，只有 6 种粗细：Thin、 、 、 Bold 和 . 视觉语言与思源黑河能登一致。

另外，在说明书中，官方还给出了标准字体大小。 字体单位中不再使用px和pt作为单位，而是统一使用sp。 转换方法为：

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

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

2. iOS默认字体-萍方/三

在iOS系统中，针对中文，苹果添加了新的萍芳字体。 字体细长，中间饱满，易于阅读。 它还提供了6个字符供设计和开发人员使用。 因此，在随后的设计趋势中，字体粗细的使用也变得更加多元化。 使用中粗体和大字体作为界面标题已经变得越来越流行。 最明显的包括iOS 11中的一些原生界面和一些知名APP。

英文中使用 San 字体。 除了iOS和Mac OS之外，该字体还针对OS单独进行了调整，并命名为San。 每组字体又分为Text和两个属性。 Text 只有 6 个权重，而 Text 有 9 个权重。

3. 总结与结论

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

如果涉及到使用标准字体以外的字体，除了颜色之外，还应该标注相应的字体粗细和高度（如字体：SC-，行：52px），而不仅仅是粗体或细体的标记。 当然，如果人力允许的话，我们也可以单独做一套界面和字体适配，以提高端部的视觉显示效果。

3.字体基本属性详解

在日常项目中，为了让页面上的字体更适合业务场景，需要调整字体间距和高度。 然而，很多学生在最终输出注释时，往往只标注了字体大小和颜色，而其他参数则没有标注或者标注错误。 在最终的视觉修复审核过程中，字体常常出现较大偏差，耗费了大量不必要的时间。 视觉演练上的工作被浪费了。

那么这里我就给大家详细介绍一下一些字体属性和标注方法，以节省开发审核的工作量，更好的还原视觉稿。

1.字体基础结构详解

一般来说，为了保持字体的完整显示，字体设计者会为字体保留一定的安全距离，并设置适当的上升和下降距离，使字体显示更加平衡。 这里我标注了对应的线图：

所以从这张图可以看出：我们平时设计的时候，可能会使用28px的字体。 使用工具测量时，确实是28px，但实际上，字体本身所占用的距离包括了上升区域和下降区域。 ，这导致它占用的空间大于28px，变成了40px。 因此，我们在标注的时候，应该按照实际尺寸进行标注，包括上升部分和下降部分，这样恢复出来的视觉效果就非常接近设计稿了。

因此，如果我们在设计输出时不调整线条值，可以直接使用标注插件实时导出对应的参数。 这样的参数最接近显影效果。 如果你没有Mac，可以使用PS选择文本，那么选择的深色背景就是字体本身的间距。

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

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

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

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

(1)：字间距

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

(2)line：行高

即UI中字段所占高度的实际大小。 刚才提到，默认字体会设置一个安全距离，所以设备中字段占用的行高=字体像素大小+升降安全距离+高度扩展值。 每种字体都有对应的设定线条自动比例，可以通过选择字体、听线条值来查看。

另外，刚才也提到，在标记间距时，必须包含行值，否则在实现时很容易造成字体偏移位置不均匀。

(3)：行距

调整这个参数后，很多同学发现和调整line值几乎是一样的。 但实际上调整的是两行之间的间距，单行字段占用的空间并没有单独调整。

通过上面我们可以了解字体在实际设备中是如何布局的，所以我们在标注的时候一定要仔细标注。 如果发现开发的字体样式与设计稿不一致，那么我们只需要提供上述参数值即可。

如果团队中仍然依赖手动标注，那么完整的标注应该是：Font-name； 字体大小; 字体-; 字体线； 字体-; 字体-.

如果没有设置，则留空即可，如：

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

现在市场上的手机屏幕越来越大，分辨率也越来越高。 所以我们在设计的时候，难免会对字体大小的使用感到困惑。 文字太小了吗？ 还是太大了会显得不精致？ 标题和正文有区别吗？ 这样的问题可能经常困扰一些年轻的设计师。

事实上，说到字体大小，确实有一套计算规则和公式。 今天我就给大家科普一下。

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

θ=(·h/2d)2，通过转换 h=2d·tan(θ/2)

1. 设计稿中的最小字体是如何得到的？

对于人眼的感光系统来说，人眼上的一个像素相当于0.3弧分。 为什么肉眼看不清远处物体的细节？ 或者你看不清月球上的陨石坑，因为在你的视网膜上，月球形成的图像实际上只是一张100个像素左右的图片，所以肉眼无法清楚地观察到陨石坑。

根据科学研究发现：

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

然后我们就可以将数据代入公式计算了。 人眼与手机的具体距离通常为30cm左右。 也就是说，正常情况下，当手机距离眼睛30cm左右时，利用视角计算公式，我们可以识别出最低的文字大小为h= 2*30·tan(0.3/2) ≈ 0 .，因为我们经常使用1334×750的尺寸作为设计稿。 dpi为324，即一英寸上显示324个像素，而1英寸为2.54cm，则0.=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，我们可以提高效率，规范页面的字体大小。 如果设计团队成员都以该工具为主要工具，不妨尝试这样配置，以提高团队协作的效率。 一方面可以统一、规范页面的字体样式。 另一方面节省了调整字体的时间，减少了不必要的工作量。

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

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

1.更大、更大胆的标题

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

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

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

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

采用单一色调的不同亮度作为字体和图标的颜色，可以在区分信息层次的基础上，使页面显得更加整齐，减少视觉干扰。

7. 字体使用总结

互联网在进步，因此设计趋势也以多种形式出现，而字体作为一种基本语言，是设计师需要掌握的基本技能之一。 本文中的案例是作者花费大量时间绘制和收集的。 希望对所有读者有所帮助。

另外，其实在工作中，也建议大家总结自己的经验，提炼和沉淀关键信息。 一方面可以让自己的知识更加扎实，另一方面也可以帮助后人成长。

——————

这是我第一次发表《人人都是产品经理》专栏，心里很不安。

虽然阅读很容易，但写作却不容易！ 文章较长，非常感谢您的耐心阅读。 如果您对文章感兴趣，也可以在这里点赞或者留言支持作者！ 以后我会经常给大家带来文章，订阅作者专栏也可以获得知识传授。 谢谢你们！