在人类发展历史过程中，笔墨作为信息传播的载体，有着承上启下的主要意义。而汉字，是天下上利用韶光最久、空间最广、人数最多的笔墨。从距本年夜约六千年前，就开始出身了具有整洁规范、初步具有笔墨特色的图形符号。
而到了后期，汉字分别经历了篆体、隶书、楷书等多元化的发展，百花齐放。而自从雕版印刷术的盛行之后，刻字用的雕刻刀所雕出来的字体由于横细竖粗，能干易读，得到了广泛的利用，由于活字印刷的时候首尾会有墨残留，以是故意会留一部分装饰来溢墨。
而到了后期，这个装饰也得以保留下来，对这个字体进行优化过后，便是至今我们仍在广泛利用的宋体。在当今，特殊是在Windows系统中，宋体仍霸占很大的一席之地。
后来人们又通过模拟宋体字体构造，对字体进行了调度，改成了笔画粗细同等，纤细狭长的印刷字体，也便是本日我们称之为“仿宋体”的字体。
与此同时，“黑体”出身了，由于字体能干大方，粗细同等，构造能干严密，字形端正，随意马虎阅读，以是也便是我们本日，在界面设计中，所用到的最多的字体。当代汉字的黑体是在当代印刷术传入东方后依据西文无衬线体中的黑体所创造的，以是按照西文的说法，也可以把黑体称作为无衬线体，把宋体叫做为有衬线体。
到了当代，随着互联网的兴起，LED屏幕中的字体也得到了较大的发展。
在早期时期中，显示屏效果较差，分辨率低，屏幕颜色较少，而汉字笔画较多，黑体小字体的清晰度较差，以是一样平常紧张用于文章主要标题。而宋体在为了匹配低分辨率下的像素栅格，对字体进行了调度，调度后的字体能在低分辨率下的小点阵中得以良好的显示，辨识度较高，在开启了ClearType之后，字体的被识别性能得到良好的担保，以是在互联网初期阶段中，有衬线体在互联网中一贯处于霸主地位。
直到后面屏幕显示效果的进步，黑体才逐步得以盛行，在屏幕分辨率较高的情形下，黑体已经能得到较好的识别效果，因此已经不须要原衬线体的功能，衬线体反而由于装饰性元素过多，阅读起来随意马虎造成视觉疲倦。因此在屏幕密度较高的移动端载体中，无衬线黑体成功替代有衬线体成为霸主地位。
修正后的黑体中宫更为开放，布白更为平均，显示效果更为舒适，能干利于阅读，更利于视觉信息的传达，从而在屏幕中起着主导地位。几大互联网巨子微软雅黑及苹果在此之后分别花重金打造了微软雅黑及苹方，用于自身的OS系统中。以是通过剖析，可以看来，在将来界面设计中，字体样式还是会以无衬线体为主，乃至可能会更进一步简化字体的形状。
二、Android与iOS系统字体详解1.Android默认字体-思源黑体/Robot
在Android设备中，Android开山祖师Google为了更好的追求视觉效果，提高用户体验，以是联合了Adobe设计发布了思源黑体(Noto)来作为中笔墨体。
该字体字形较为平稳，利于阅读，且有个7个不同的字重，充分知足了不同场景下的设计需求，7个字重分别为：Thin、 Light、DemiLight、Regular、Medium、Bold 和 Black。而英文，则利用Robot来作为根本字体，只有6个字重：分别为Thin、Light、Regular、Medium、Bold 和 Black，视觉措辞与思源黑体Noto保持同等。
其余在Google的Material Design手册中，官方还给出了标准的字号大小。在安卓的字体单位中，不再以px，pt作为单位而是统一的利用了sp，换算办法：
px = spppi/160 ，sp = px / (ppi / 160)
按照iPhone7的尺寸1334×750.密度326ppi 来换算，那么Android的1dp = 1 326/160 ≈ 2px
2.iOS默认字体-苹方/San Francisco
在iOS系统中，中文方面苹果则加入了全新的苹方字体，字形纤细中宫饱满，利于阅读，并且还供应6个字重供设计开拓者利用。所往后面的设计趋势中，字重的利用变的开始多元化了起来，利用Semibold中粗体、大字号作为界面的标题变的更为盛行起来，较为明显的有 iOS 11 中的一些原生界面及一些有名APP。
而在英文方面，则利用了San Francisco 的字体，除了在iOS和Mac OS上，还单独为Watch OS单独对字体进行了调度，命名为 San Francisco Compact。而每套字体下面又分为Text与Display两种属性，Text只有6个字重，而Display则有9个字重。
3.总结&结论
通过比拟，我们可以创造：实在Android与iOS字体字形方面差异化明显不大，不用特意下载所有字体进行单独配置。那么在平常事情中，我们只须要按照一套标准的iOS设计稿输出即可，在Android方面进行自动延展，末了走查确认一下效果即可。
如果涉及到利用除Regular标准体之外的字体，那么除了颜色，还应该标注相应的字重字高档信息(如Font：Pingfang SC-Semibold，line:52px) ，而不应当只标注一个加粗或者加细。当然如果人力许可的情形下，我们也可以单独为Android做一套界面及字体适配，提高Android真个视觉显示效果。
三 、字体的基本属性详解
在平时项目中，为了让页面中的字体更加贴合业务场景，须要对字体的字距字高进行调度。但很多同学在末了输出标注的时候，每每只标注了字号及颜色，而其它参数都没有进行标注或者标注的禁绝确，在末了视觉还原审核的时候，字体每每偏差较大，花费很多不必要的事情量去摧残浪费蹂躏在了视觉走查上。
那么这里就给大家详细先容一些字体属性及标注方法，节约开拓走查事情量，更好的还原视觉稿。
1.字体根本构造详解
一样平常来说，为了保持字体的完全展示，字体设计师都会给字体预留一定的安全间隔，设定得当的升部线及降部线间隔，让字体展示的更为平衡。这里我标注了一个相应的线稿：
以是由此图可以看出：平时我们在设计的时候，可能字体利用的28px，在利用工具量的时候，也确实是28px，但实在字体本身占用的间隔是包含了升部及降部区域的，这样就导致其占用空间大于28px，而变成了40px。以是我们在标注的时候，应该按照包含升部降部的实际大小进行标注，这样所还原的视觉效果，也是极为靠近设计稿的。
以是我们在设计输出的时候，如果没有调度line值，是可以直接借助sketch的标注插件sketch measure，来实时导出相应的参数，这样的参数是最靠近开拓效果的。如果没有Mac的同学，可以利用PS选中笔墨，那么选中的深色底便是字体本身的间距了。
下图我做了两个示例，来阐述精确的标注方法，虽然标注的时候会麻烦些，但每每在视觉还原的时候，每每能达到事半功倍的效果。
2.字体的行高行距参数详解
那么在一些笔墨较多的页面，为了让阅读更为顺畅，我们每每须要对笔墨的字高字距进行调度，那么我们先来看一下sketch及动效编程软件Origami中的可配置参数。
我们可以创造，对付变动字距、字宽及端高，那么我没只须要配置好Charater、line、paragraph三个值即可，那么我们先来理解一下这三个值的含义：
（1）Character：字间距
所谓的字间距，则是在两个笔墨中间的间隔，一样平常加在一个字符的后段。如字符『AK』，默认Character为0，那么两个字符中间的间距，则是为字体默认所设定的安全间隔。如果给Character设定一个值50，那么会自动在A的后段加上50px，那么显示效果则变成了『A K』
（2）line：行高
即UI Lable 中字段所占用的高度实际大小，刚刚有提到默认字体会设定一个安全间隔，那么在设备中字段所占用的line高度 = 字体像素大小+升降安全间隔+扩高值。每个字体都有相应设定的line Auto比例，可以通过sketch选中字体后听过line值来进行查看。
其余刚刚提到，标注间距的时候，务必得把line值包含在内，否则实现出来随意马虎涌现字体偏移位置不对等情形。
（3）Paragraph：行距
很多同学在调完这个参数，创造跟调度line值差不多。但实在 Paragraph 调度的是两行中间的间距，不单独调度单行字段的占用空间。
通过以上我们能理解字体在于实际设备中，是怎么样的布局办法，以是我们标注的时候，一定须要标注的较为仔细。如果创造开拓出来的字体样式与设计稿不一致，那么我们只须要供应以上这几个参数值即可。
如果在团队中还是靠手动标注的同学，那么完全的标注该当为：Font-name；Font-size ；Font-color ；Font-line ；Font-character ；Font- Paragraph 。
如果没有设定，不填即可，如：
Font-name：Pingfang SC -SemiboldFont-size ：32pxFont-color ：#333333Font-line：AutoFont-character：5Font- Paragraph :0四、科学的字号大小如何设定
现在目前市场中手机屏幕越来越大，分辨率也越来越高。那么我们在做设计的时候，在字号利用方面，难免会感到迷茫，笔墨是不是又点小了？或者大了显得不精细？标题跟正文没啥差异？像这种问题可能常常困扰着一些年轻的设计师。
其实在字号大小方面，确确实实有着一套打算法则及公式在内，本日这里给大家进行一下科普。
当我们在查看一些物体时，丈量视觉角度的方法为先量一下物体的的长宽以及眼睛间隔物体的间隔，得出相应的数学打算公式，个中：
θ=(arctan·h/2d)2，通过换算h=2d·tan(θ/2)
θ即视角度数d为眼睛离物体的间隔h为物体高度1.设计稿中最小的字号怎么来的？
关于人眼感光系统，人眼上的一个像素相称于0.3个角分。为何人的肉眼看不清远处的物体细节？或者看不清玉轮上的环形山，那么是由于在你的视网膜上，玉轮形成的图像实在不过便是一个100个像素旁边的图片而已，以是环形山无法被肉眼不雅观察得清。
而根据科学研究创造：
人眼对付信息物体的识别，在眼睛内视角度数＞0.3°，才能保笔墨信息体投射到视网膜中的分辨率足够大，能够被大脑所识别。
那么我们将数据可以套入进公式打算，人眼间隔手机的详细常日是30cm旁边，那么也便是说，正常情形下，在手机间隔眼睛30cm旁边，利用视角打算公式，我们能识别到的最低的笔墨大小为h= 230·tan(0.3/2) ≈ 0.157cm ，由于我们常常利用iPhone8的尺寸1334×750作为设计稿。iPhone8的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.利用大字号作为标题
随着设计行业的发展，对付视觉的理解进步，现在更多设计师更乐意利用大号字体，大间距，来区分页面层级的信息。由于大号的字体阅读起来更为舒适，能精准快速的传达信息，提升阅读效率，降落视觉疲倦。
以是大家在平时项目中，也不妨大胆的利用一下大字号字体来作为主标题，拉大页面不同信息的层级关系。
五、合理配置字体拉开层级关系
在移动真个界面设计中，除了前几篇文章讲的利用间距网格来拉开不同内容的层级外，对字体样式进行适当的调度也是个很不错的选择。通过调度字重、字色，能让页面的视觉逻辑变为更加的清晰明了，主次分明，降落因视觉给用户带来的滋扰，提升页面的可操作性。
那么我们如何来设定这两块呢？
1.只管即便减少页面中的不同色相的颜色数量
在日常界面设计的需求中，有些较为主要的字段，可能业务方为了突出，第一韶光，想到的便是把字体标红处理，或者添加各种各样，五花八门的颜色。但实在每每这样的设计，在末了上线后的效果，反而随意马虎揠苗助长，由于颜色过多，而导致页面缺少重点，视觉疲倦，反而增加了页面的跳出率，难以取得想要的效果。
经由调研显示：页面越干净，越整洁，页面的跳出率越低，而这套规则险些适用于所有的界面设计。
以是字体颜色这块，颜色种类不宜过多。可以考虑通过利用同色系中的不同明度，来对不同层级字段进行差异化处理。我们可以通过先确认主色，再对主色进行名都延展，来适配多场景的笔墨颜色。配置好相应的色板之后，可以再根据页面层级关系对笔墨颜色进行得当的添补。
2.利用不同的字重来区分内容
为了更好的拉开不同信息之间的层级关系，除了配置颜色外，通过合营，利用不同字重的字体来对内容进行区分也是个很好的选择。
利用较粗的字重来作为主标题利用，细字重作为赞助信息，能更好的在单色环境中增加内容的呼应及比拟，减少页面中字体过度色的利用，从而能够让页面更加的整洁，内容清晰明了，降落页面的跳出率。
例如我们较主要的信息，可利用较粗的字重，弱信息则细字重。比如以下的余额宝及京东小金库界面，虽然两个界面在留白方面都留有较大余地，但京东金融在于对字重的设定更为严谨，以是在于对层级关系的处理上京东要更胜一筹。
而不同的字重，给予用户的感想熏染也是截然不同的：较粗的字重每每传达的感想熏染比细体要更为持重、踏实严谨，而细体则显的更为活泼、有趣，给人愉快的觉得。
刚刚提到了字重的利用必要性，那么我们如何定义字重呢？
如果字重没有进行规范利用，那么全体页面的视觉逻辑则会变的更为混乱，以是每每这个时候，我们须要设计一个笔墨规范，例如主标题利用什么样的字重，正笔墨重样式。仔细敲定全体笔墨的利用规则，并将规范延展到全体产品的页面设计中来，也是统一产品视觉措辞的主要部分。
比如京东在价格字体方面，利用了独立设计的一套品牌专有字体，而价格在电商中是一个极为主要的信息，通过统一字体，能很好的提升品牌归属感。
3.Sketch-Text Style提高协作效率
sketch在于对笔墨管理这块，做了一个 Text Style 样式，通过Text Style，能很好的提高效率，规范页面字号的大小。如果设计团队成员均利用Sketch作为主力利用工具，那么不妨考试测验配置一下这块，提高团队协作效率。一方面可以统一规范页面的字体样式，另一方面免去了调度字体的韶光，减少不必要的事情量。
六、字体利用发展趋势&总结
从iOS 11 更新就不丢脸出，目前界面风格的趋势都是倾向于更为简洁化，在一屏的内容里做减法，这样有利于降落阅读包袱，将主要的信息更好的展示。在这里，我分别对字体进行了梳理，剖析下来，近期的字体利用特色紧张有如下三点：
1.更大、更粗的标题
大标题能很好的吸引视线，第一韶光捉住眼球，通报信息。拉大页面空间的张力，降落视觉阅读疲倦。
2.字重层级更为明显
通过字重的差异化显示，能更好的在单色环境中增加内容的呼应及比拟，减少页面中字体过度色的利用，从而能够让页面更加的整洁，内容清晰明了，降落页面跳出率。
3.用字体明度做内容上的信息区分
利用单一色相的不同明度作为字体及图标的颜色，能够在区分信息层级的根本上，能让页面显得更为整洁，降落视觉滋扰。
七、字体利用总结
互联网在进步，以是设计趋势也是有着各种各样不同的形式，而字体作为基本措辞，是设计师须要节制的基本技能之一。这篇文章里面的案例花了作者大量韶光进行绘制&网络，希望能对各位读者有所帮助。
其余其实在事情中，也建议大家对自己的履历进行总结，对关键信息进行提炼加以沉淀，一方面能让自己的知识更加稳定，另一方面也可以帮助后来者进行发展。
————–
第一次考试测验在大家都是产品经理上揭橥专栏，内心表示很忐忑。
阅文虽易，写作不易！
文章较长，非常感谢您的耐心阅读。如果对文章感兴趣，也可以在这里通过留下一个小赞或者留言来支持作者！
后面会常常给大家带来一篇文章，也可以通过订阅作者的专栏，来得到知识的通报，感激大家！
本文由 @A.kun阿坤 原创发布于大家都是产品经理。未经容许，禁止转载
题图来自 pexels，基于CCO协议