设计3分钟——建立一套字体系统
Hello，大家好，G哥又来了，这次给大家更新一个炒鸡有用的快速建立一套字体系统的方法。众所周知，在UI设计领域，字体规范的建立是一个重头戏。那么如何建立一套自己的字体系统呢？
参考资料：Youtube设计博主的这个视频教学（科学上网）的快速建立一套字体系统的方法，有兴趣的小伙伴自己可以看看。本文还参考了阿里Antdesign的字体模块，感兴趣的可以去看看。
——废话少说，开始正文——
字体系统目前的设定主要有几点需要注意（新手向，老手可跳至下一个分割线）：
字族 / 字重 / 字号 / 行高 / 对齐方式 / 字体样式 / 字色 / 字体用途
字族：字体种类——比如微软雅黑，苹方分别属于不同的字族；open sans和open serif也属于同一字库下的不同字族；这里还有衬线体，无衬线字体，花体等不同风格的字体，这个网上介绍比较多，就不多言了。
字重：字体的分量——比如常见的正体（常规），粗体，细体，中粗体；regular，bold，light等；
字号：字体的大小
行高：每行字体的高度
字体样式：下划线，斜体，这个因软件而异
字色：字体颜色
字体用途：字体在当前场景下的用途，是标题，正文，标签，说明文字等
——真正的开始——
字族，字重，字体样式，字色这4个基本都是比较简单向的常规操作，这里就不再赘述。下面重点介绍一下字号和行高的确定。
/字号
字号确定方式跟数学有莫大的关系，5层的字级关系可以有下面几种方式实现:
1.等差
——相邻字号差值固定
例：16px，18px，20px，22px，24px ... 差值为2（差值可自定义）
缺点：差值过小时字号对比层次不够明显，可以将差值调整合适范围，也可将差值构成斐波那契数列
2.等比
——相邻字号比值固定
例：16px，23px（16*1.414），33px（23*1.414），47px（33*1.414）... 比例为1.414，一般字号四舍五入取整数。
本方法是主流使用方法，这边提供一下比值，由小到大依次为（常用比例数值加粗）：
15:16 —— 1.067（小二度）
8:9 —— 1.125（大二度）
5:6 —— 1.200（小三度）
4:5 —— 1.250（大三度）
3:4 —— 1.333（完美四度）
1:√2—— 1.414（对角四度）
2:3 —— 1.500（完美五度）
5:8 —— 1.600（小六度）
1:1.618 —— 1.618（黄金选择）
3:5 —— 1.666（大六度）
9:16 —— 1.777（小七度）
8:15 ——1.875（大七度）
1:2 —— 2（八度）
2:5 —— 2.5（大十度）
3:8 —— 2.66（大十一度）
1:3 —— 3（大十二度）
1:4 —— 4（ 双八度）
可以根据需求使用，关于不同系数的对比将在以后更新（可能是个坑）
这里有字号大小比例对比的参考网站，可以在线预览不同缩放比例效果：
3.斐波那契数列（黄金分割）
——相邻字号的和为下一个字号的值
例：16px，16px，32px（16+16），48px（32+16），80px（32+48） ...
缺点：字号对比略大，建议信息层级少的情况下使用
字号的确定关键点在于基础字号的确定。基础字号要大于等于平台最小可识别文字（最小可识别文字：网页12px，移动端2倍下24px，平面印刷一般6点）
所以，把这个比例用到自己的字体系统中去，必定会更加有韵律。这一点不论是UI设计，对于视觉设计，应当是共通的。
/行高
行高是一个比较纠结的地方，目前没有一个统一定论。
根据文本内容不同一般在
1——1.2——1.3——1.4——1.5——1.6——1.8——2——2——2.2——2.4——2.5倍行距内选择。
Web
目前的现有的antdiesign解决方案里，通过字号+8的方式来确定行高，原地址，截图如下：
上下对比红蓝框可得出8的差值
在工作中我也使用过这套方案，唯一的感受就是，在非大量阅读文本下很不错，但是在针对长时间阅读性文本建议还是1.6或1.8倍的行距。（对于antdesign的字号大小一直没搞懂规律，关于5音阶的参考找到了国外文章但是对方是使用17个音阶，自然律是e=2.71828……，只能大致计算相邻字号比例近似约1.2，期待有朋友解答 —— 。——）
其实还有小伙伴有一些经验这里做一个收录：
APP中的行高，你做对了吗？——主要介绍行高的作用和常用参数
你不知道的sketch字号、行高、段落的秘密！——近期的文章，iOS 文本行高标注解决方案
UI
由于中西文字体的差异，以及不同平台的字体也不同，在这里针对不同平台提供sketch中文行高修正插件：
安卓修正（Auto Fix Android Text LineHeight）；
Android 默认字体为思源黑体，但修复行高后会出现错位，实际使用中可考虑使用苹方替代（汉字高度字型接近）视觉不受影响，至于修复后文字上下位移问题，建议先修复行高再调整上下元素间距。
ios修正（Auto Fix iOS Text Line Height）；
仅针对 iOS 字体行高在程序开发中的还原（仅测试过苹方字体）
UI设计中的字体系统（sketch）
在UI设计中字体系统规范就根据上面的基准——对文本样式命名（sketch里对组件命名能快速高效整理你的设计和团队协作）：
P/Roboto/black/center/regular
lable/opensans/white/left/bold
用途/字族/字色/对齐方式/字重 （如果只用一个字族就可以省略此项）
最终得到的层级关系：
总层级/子层级一/子层级二/子层级三/子层级四
（创建symbol的层级关系用斜线区分总层级和子层级——不区分中英文输入法，不用加空格）
这种命名方式在sketch里非常高效，虽然刚开始比较麻烦，但是一旦后期规范建立，效率嗖嗖的。
Sketch52之前的版本创建文本的符号（Symbol）按照此规则命名就可以创建自己的一套文字规范。
Sketch52之后创建符号（symbol）结合创建不同样式，只要按照命名规则分类，能更快速的创建文字规范，而且更换的时候并不会内容初始化。
接下来会写一篇关于sketch52更新的一些功能尤其是关于组件和样式的巨大变化（更加不一样的组件化），请小伙伴们敬请期待。
