字体是界面设计中重要的构成要素之一，它能辅助信息的传递，是文字的外在表现形式；字体还可以通过其独有的艺术魅力，表达情感体验，并塑造品牌形象。本文总结了字体设计的重要性、界面常用字体推荐以及国内外权威设计体系中对字号、行高、字重的选择和设置。如果你想对界面字体设计有更深一步地了解和运用，本文将会提供一些帮助。
辅助信息传递
文字是信息内容的载体，是记录思想、交流思想、承载语言的图像或符号，而字体则是文字的外在形式特征，是文字的视觉风格表现。合适的字体可以辅助文字，将信息清晰、准确地传递给用户。
表达情感体验
字体的艺术性体现在其完美的外在形式与丰富的内涵之中。在文字信息传递给用户之前，人们首先感受到的是字体带来的视觉魅力以及情感表达。
塑造品牌形象
不同字体有着不同的风格特征: 有的字体优美清新、线条流畅；有的字体造型规整、充满张力；还有的字体生动活泼、色彩明快… 根据产品的属性选择正确的字体，便能有效地塑造品牌形象。
字体的选择是由产品属性或品牌特性的关键词而决定。一般中文字体种类分为：黑体、宋体、仿宋、楷体等；英文字体种类分为：无衬线体、衬线体、意大利斜体、手写体、黑字体等。
中文字体推荐
线上中文字体推荐使用 思源黑体、华文黑体、冬青黑体、微软雅黑、苹方-简、黑体-简、方正兰亭黑 。其中 iOS 系统默认中文字体是「苹方 (PingFang)」，Android 系统中文字体使用「思源黑体 (Noto Sans CJK)」。
介绍下「思源黑体」这款字体，它是由 Google 和 Adobe 合作开发出来的，风格介于现代和传统之间，可以广泛用于多种途径，比如手机、平板、桌面的用户界面、网页浏览或者电子书阅读等。它为人们带来了愉悦和高效的信息阅读体验，并且是免费的。
英文字体推荐
线上英文字体推荐使用 San Francisco、Helvetica Neue、Roboto、Avenir Next、Open Sans 。其中 iOS 系统默认英文字体为「San Francisco」，Android 系统默认英文字体为：「Roboto」。
Helvetica 是一种被广泛使用的西文字体，1957 年由瑞士字体设计师设计，微软常用的 Arial 字体也来自于它。作为一款经典的无衬线字体，Helvetica 在平面设计和商业上非常普及和成功，被认为是现代主义设计理念的典范，其简洁朴素的线条风格非常受追捧。
数字字体推荐
线上数字字体推荐使用 DIN、Core Sans D、Helvetica Neue 。
DIN 起源于 1995 年的德国，无衬线字体，易用耐看、字形开放，是设计师最爱的几类字体之一，适合显示比较长的大号数字，但是小字号的情况下识别度较低。
Core Sans D 是由韩国设计师设计的一款无衬线字体，支持 Thin、Light、Regular、Medium、Bold 等类型字重，对大号数字的显示效果不错，不过它是收费字体。
Helvetica Neue 除了上文介绍的简洁朴素、中性严谨、没有多余的修饰外，还是 Helvetica 的升级版，拥有了更多的字重，可以作为 iOS 和 Android 跨平台数字字体使用。
字号是界面设计中另一个重要的元素，字号大小决定了信息的层级和主次关系，合理有序的字号设置能让界面信息清晰易读、层次分明；相反，糟糕无序的字号使用会让界面混乱不堪，影响阅读体验。
字号的选择，可以遵循 iOS 、Material Design、Ant Design 等国内外权威设计体系中的字号规则，也可以根据产品的特点自行定义。
iOS 字号规则
在 iOS11 系统中，使用 San Francisco 作为系统英文字体，包含了以下几种字号的文本样式：
11pt/12pt Caption (说明文字)13pt Footnote (脚注)15pt Subhead (副标题)16pt Callout (标注)17pt Body/Headline (正文/模块标题)20pt/22pt/28pt Title (页面标题)34pt Large Title (页面大标题)需要注意的是，San Francisco 字体有两种模式: 文本模式 SF Pro Text 和展示模式SF Pro Display ，文本模式适用于字号小于 20pt 的文字，展示模式适用于字号大于等于 20pt 的文字。
Material Design 字号规则
在 Material Design 设计体系中，使用 Roboto 作为英文字体，规定了以下文字排版的常用字号：
12sp 小字提示14sp (桌面端 13sp) 正文/按钮文字16sp (桌面端 15sp) 小标题20sp Appbar 文字24sp 大标题34sp/45sp/56sp/112sp 超大号文字长篇幅正文，每行建议 60 字符左右，短文本建议每行 30 字符左右。
Ant Design 字号规则
Ant Design 受到 5 音阶以及自然律的启发定义了 10 种不同的字号，从小到大依次为：12px、14px、16px、20px、24px、30px、38px、46px、56px、68px。
建议主要字号为 14px，其余字号的选择可根据具体情况进行自由的定义，尽量控制在 3-5 种之间，保持克制的原则。
Kiwi 字号规则
Kiwi 是饿了么的中后台设计语言，致力于打造出能够「了解、洞察、温暖、激励用户」的产品。在 Kiwi Web 中，规定最小字号为 12px，主要文本字号为 14px，最大字号为 46px。
行高可以理解为一个包裹在字体外面的无形的框，字体距框的上下空隙为半行距。
参考 W3C 原理，眼睛到屏幕的距离 25cm 为最佳阅读距离。西文的基本行高通常是字号的 1.2 倍左右。而中文因为字符密实且高度一致，没有西文的上伸部和下延部来创造行间空隙，所以一般行高需要更大，根据不同人群的特点 (儿童、年轻人、老年人) 以及使用环境，可达到 1.5 至 2 倍甚至更大。
iOS 行高设置
Apple 官方的 iOS 字号与行高对应关系如下 (@1x倍率)：
Fluent Design 行高设置
Microsoft 官方的 Fluent Design 字号与行高对应关系如下 (使用字体 Segoe UI)：
Ant Design 行高设置
蚂蚁金服的 Ant Design 字号与行高对应关系如下 (优先使用系统默认字体)：
行高计算公式: L = F + 8。其中 L 是行高 (Line Height)，F 是字号 (Font Size) ，F ≥ 12
字重是指字体的粗细，一般在字体家族名后面注明的 Thin、Light、Regular、Medium、Bold、Heavy 等都是字重名称。越来越多的产品界面需要通过字重来拉开信息层次，当下主流趋势 iOS11 大标题风格就是通过字重来拉开信息层级的。
不同的字重体现不同的层级关系和情绪感受，细的字体给人以细腻、轻盈的感觉，而粗体则给人庄重和严肃的感受，所以在定义字体规范时候需要考虑什么场景用什么字重，从而保持良好阅读体验。
字重的设置同样基于秩序、稳定、克制的原则。为了统一整体效果，一般情况下使用两种字重为佳，例如只出现 Regular 以及 Medium 这两种字体粗细，特殊情况下可以使用更粗或更细的字重进一步拉开信息层级。
当字号大小为 12-18pt 时，使用 Regular；20-26pt 时，使用 Light；28-34pt 时，使用 Thin；当字号大小超过 34pt 时，建议使用 Ultralight。
以上是按字号与字重反比的规则设置，即字号越大，字重越细。当然也可以按正比的规则或者自定义规则，具体还是要根据产品的定位和用户的特点来设置，以保证信息层级清晰明了为准。
本文到此就要告一段落了，如果对你有一点帮助就请点个赞吧~ 感谢你的阅读~
作者：Neil彭彭，公众号：彭彭设计笔记，不定期更新 UI/UX 设计类精品文章
本文由 @Neil彭彭 原创发布于人人都是产品经理。未经许可，禁止转载。
题图由作者提供
黄克俭先生，我们都尊敬 地称他为黄老师，因为除了他各种形式 的社会任职之外，还是中央工艺美院 的博士生导师，何其幸运， 我们能有机会与黄老师朝夕相处、谈笑风生和舌剑唇枪，不是门生胜似门生。才华横溢的黄老师是幽默风趣的，他的那些国际玩笑和世界游戏出自于他的留学美国和游学世界的学习经历和与世界巨子们共同指点江山的气魄。黄克俭的国际影响力也许远远大于在国内知名度，因为他不仅仅是奥运会研究与运行方面的专家学者，同时还是北京奥申委陈述报告多媒体总策划，曾帮助多家著名国内外企业包括中国移动、中国国际航空公司和由中体产业、歌华集团与澳大利亚组成的联合体成为奥运会合作伙伴和赞助商，更重要的，他还是中国文字电脑字库“华文字库”的创始人和经营者，他的合作伙伴是、IBM、Adobe等世界级巨头：1996年，他的华文字库被美国苹果电脑公司选作其字库的专业级字库，同年成为美国奥多比（Adobe）公司唯一系统中文字库，被广大国外系统厂家所采用；1998年，华文字库被中国金山电脑有限公司选作WPS的高级字库；1999年，美国微软公司为其选购的12套中文字体中有10套是华文字库的字；2000年，华文字库被美国IBM公司选定为系统级字库。
相关问答
华文字体是常州华文印刷有限公司推出的字体,是有版权的。其他人未经版权人许可使用,构成侵权。所谓版权系专属知识产权,如果是大众的、通行的字体的使用是不...
一般的电脑是有华文宋体的,华文宋体是中文操作系统里的一种常见字体,并且在大多数电脑操作系统和软件中都会预装。这个字体常用于中文文档和网页的显示,能够清...
网上搜索“字体下载”,找到这个字体,下载到自己的电脑里,解压后把那个T字形的文件复制到控制面板、字体文件夹里就行了,(如果控制面板没有这个字体夹,切换...
先把下载包解压,再把字体粘贴到到C盘windows里的font文件里就可以了先把下载包解压,再把字体粘贴到到C盘windows里的font文件里就可以了
1、搜索“华文彩云”字体,找到下载链接。2、点击进入链接下载“华文彩云”字体。3、将下载好的字体压缩包进行解压。4、双击解压后的字体文件,在打开的页面...
首先到字体下载大宝库网站中下载华文行楷字体,并解压你下载的字体压缩包:WinVista\Win7系统:鼠标右键单击字体文件,然后点击>"Install"安装字体Windo...
是你安装word这个软件的问题,安装的版本不同,字体属于word软件的文件中没有新魏字体这个文件。你可以上网搜索你自己需要的系统字体,下载,然后把字体放到系...
1、打开需要设置艺术字的word文档。2、选定需要设置艺术字的数据,这里以标题为例。3、点击上方工具栏中的“文本效果”选择一个喜欢的文本效果。4、点击上方...
华文行楷是中文的一种书体,不属于字体文件格式。您在WPS中找不到该字体很正常,因为WPS只支持一些常见的字体格式,如TrueType、WOFF等。如果您需要使用华文行楷...
华文彩云字体是一种艺术字体,其字形已经设计成了彩色的,因此不需要填色。如果您想要在华文彩云字体的基础上添加颜色,可以使用图像处理软件,例如Photoshop或I...
