界面视觉设计要素：字体篇

　　字体是界面设计中重要的构成要素之一，它能辅助信息的传递，是文字的外在表现形式；字体还可以通过其独有的艺术魅力，表达情感体验，并塑造品牌形象。本文总结了字体设计的重要性、界面常用字体推荐以及国内外权威设计体系中对字号、行高、字重的选择和设置。如果你想对界面字体设计有更深一步地了解和运用，本文将会提供一些帮助。
　　一、字体
　　1。字体设计的重要性
　　辅助信息传递
　　文字是信息内容的载体，是记录思想、交流思想、承载语言的图像或符号，而字体则是文字的外在形式特征，是文字的视觉风格表现。合适的字体可以辅助文字，将信息清晰、准确地传递给用户。
　　表达情感体验
　　字体的艺术性体现在其完美的外在形式与丰富的内涵之中。在文字信息传递给用户之前，人们首先感受到的是字体带来的视觉魅力以及情感表达。
　　塑造品牌形象
　　不同字体有着不同的风格特征：有的字体优美清新、线条流畅；有的字体造型规整、充满张力；还有的字体生动活泼、色彩明快根据产品的属性选择正确的字体，便能有效地塑造品牌形象。
　　2。界面常用字体推荐
　　字体的选择是由产品属性或品牌特性的关键词而决定。一般中文字体种类分为：黑体、宋体、仿宋、楷体等；英文字体种类分为：无衬线体、衬线体、意大利斜体、手写体、黑字体等。
　　中文字体推荐
　　线上中文字体推荐使用思源黑体、华文黑体、冬青黑体、微软雅黑、苹方简、黑体简、方正兰亭黑。其中iOS系统默认中文字体是苹方（PingFang），Android系统中文字体使用思源黑体（NotoSansCJK）。
　　介绍下思源黑体这款字体，它是由Google和Adobe合作开发出来的，风格介于现代和传统之间，可以广泛用于多种途径，比如手机、平板、桌面的用户界面、网页浏览或者电子书阅读等。它为人们带来了愉悦和高效的信息阅读体验，并且是免费的。
　　英文字体推荐
　　线上英文字体推荐使用SanFrancisco、HelveticaNeue、Roboto、AvenirNext、OpenS。其中iOS系统默认英文字体为SanFrancisco，Android系统默认英文字体为：Roboto。
　　Helvetica是一种被广泛使用的西文字体，1957年由瑞士字体设计师设计，微软常用的Arial字体也来自于它。作为一款经典的无衬线字体，Helvetica在平面设计和商业上非常普及和成功，被认为是现代主义设计理念的典范，其简洁朴素的线条风格非常受追捧。
　　数字字体推荐
　　线上数字字体推荐使用DIN、CoreSansD、HelveticaNeue。
　　DIN起源于1995年的德国，无衬线字体，易用耐看、字形开放，是设计师最爱的几类字体之一，适合显示比较长的大号数字，但是小字号的情况下识别度较低。
　　CoreSansD是由韩国设计师设计的一款无衬线字体，支持Thin、Light、Regular、Medium、Bold等类型字重，对大号数字的显示效果不错，不过它是收费字体。
　　HelveticaNeue除了上文介绍的简洁朴素、中性严谨、没有多余的修饰外，还是Helvetica的升级版，拥有了更多的字重，可以作为iOS和Android跨平台数字字体使用。
　　二、字号
　　1。关于字号
　　字号是界面设计中另一个重要的元素，字号大小决定了信息的层级和主次关系，合理有序的字号设置能让界面信息清晰易读、层次分明；相反，糟糕无序的字号使用会让界面混乱不堪，影响阅读体验。
　　2。字号的选择
　　字号的选择，可以遵循iOS、MaterialDesign、AntDesign等国内外权威设计体系中的字号规则，也可以根据产品的特点自行定义。
　　iOS字号规则
　　在iOS11系统中，使用SanFrancisco作为系统英文字体，包含了以下几种字号的文本样式：
　　11pt12ptCaption（说明文字）
　　13ptFootnote（脚注）
　　15ptSubhead（副标题）
　　16ptCallout（标注）
　　17ptBodyHeadline（正文模块标题）
　　20pt22pt28ptTitle（页面标题）
　　34ptLargeTitle（页面大标题）
　　需要注意的是，SanFrancisco字体有两种模式：文本模式SFProText和展示模式SFProDisplay，文本模式适用于字号小于20pt的文字，展示模式适用于字号大于等于20pt的文字。
　　MaterialDesign字号规则
　　在MaterialDesign设计体系中，使用Roboto作为英文字体，规定了以下文字排版的常用字号：
　　12sp小字提示
　　14sp（桌面端13sp）正文按钮文字
　　16sp（桌面端15sp）小标题
　　20spAppbar文字
　　24sp大标题
　　34sp45sp56sp112sp超大号文字
　　长篇幅正文，每行建议60字符左右，短文本建议每行30字符左右。
　　AntDesign字号规则
　　AntDesign受到5音阶以及自然律的启发定义了10种不同的字号，从小到大依次为：12px、14px、16px、20px、24px、30px、38px、46px、56px、68px。
　　建议主要字号为14px，其余字号的选择可根据具体情况进行自由的定义，尽量控制在35种之间，保持克制的原则。
　　Kiwi字号规则
　　Kiwi是饿了么的中后台设计语言，致力于打造出能够了解、洞察、温暖、激励用户的产品。在KiwiWeb中，规定最小字号为12px，主要文本字号为14px，最大字号为46px。
　　三、行高
　　1。关于行高
　　行高可以理解为一个包裹在字体外面的无形的框，字体距框的上下空隙为半行距。
　　参考W3C原理，眼睛到屏幕的距离25cm为最佳阅读距离。西文的基本行高通常是字号的1。2倍左右。而中文因为字符密实且高度一致，没有西文的上伸部和下延部来创造行间空隙，所以一般行高需要更大，根据不同人群的特点（儿童、年轻人、老年人）以及使用环境，可达到1。5至2倍甚至更大。
　　2。行高的设置
　　iOS行高设置
　　Apple官方的iOS字号与行高对应关系如下（1x倍率）：
　　FluentDesign行高设置
　　Microsoft官方的FluentDesign字号与行高对应关系如下（使用字体SegoeUI）：
　　AntDesign行高设置
　　蚂蚁金服的AntDesign字号与行高对应关系如下（优先使用系统默认字体）：
　　行高计算公式：LF8。其中L是行高（LineHeight），F是字号（FontSize），F12
　　四、字重
　　1。关于字重
　　字重是指字体的粗细，一般在字体家族名后面注明的Thin、Light、Regular、Medium、Bold、Heavy等都是字重名称。越来越多的产品界面需要通过字重来拉开信息层次，当下主流趋势iOS11大标题风格就是通过字重来拉开信息层级的。
　　不同的字重体现不同的层级关系和情绪感受，细的字体给人以细腻、轻盈的感觉，而粗体则给人庄重和严肃的感受，所以在定义字体规范时候需要考虑什么场景用什么字重，从而保持良好阅读体验。
　　2。字重的设置
　　字重的设置同样基于秩序、稳定、克制的原则。为了统一整体效果，一般情况下使用两种字重为佳，例如只出现Regular以及Medium这两种字体粗细，特殊情况下可以使用更粗或更细的字重进一步拉开信息层级。
　　当字号大小为1218pt时，使用R2026pt时，使用L2834pt时，使用T当字号大小超过34pt时，建议使用Ultralight。
　　以上是按字号与字重反比的规则设置，即字号越大，字重越细。当然也可以按正比的规则或者自定义规则，具体还是要根据产品的定位和用户的特点来设置，以保证信息层级清晰明了为准。
　　本文到此就要告一段落了，如果对你有一点帮助就请点个赞吧感谢你的阅读