文字规范
介绍
B 端UI 界面的视觉设计是一种偏向于排版的设计类型，而其中对于文字的使用更是重中之重。
文字包括字体，字重，字号，行高、颜色五个属性。一般情况下，字体采用系统自带的字体（例如苹方、微软雅黑、思源黑体），另外对于 B 端来说，一般都会有较为重要的数据，这时可以采用特殊字体给与一定的强调，最常用的便是 DINpro。
🔔 还有一点要注意
我们使用的字体一般是基于用户有什么字体，而由于 win 和 Mac 默认字体不同，所以要提前预留好字体风格类似的多种字体。并且可以设置多个字体，通过逗号隔开，如果第一个字体用户没有，那么会自动替换成下一个字体。
字号上，精简为主，可以用字重和颜色来表现层级，就不要用字号来体现。淘宝在 2019 年的改版中便升级了这一点。将原来的 11 个字体层级缩减至了 7个。
行高上，建议采用的方案是行高是字体行高为 150% 字号，取 4 的倍数。
但是会遇到额外间距的问题。
前段时间谷歌发布了新的 CSS 更新“leading trim”，可能会是之后的行高解决方案。感兴趣的小伙伴可以点击链接了解一下。
字重上，以开发的视角来看的话，包括从 100-900 的九个字重。一般我们只采用 regular、medium、semibold 三个字重。
字体
不同的字体气质不一样，并且不同场景下带给人的感受也不一样。所以需要在设计的时候考虑到字体的设计效果，然后在设计规范中注明。
界面常用字体推荐
🔎 字体的选择是由产品属性或品牌特性的关键词而决定
中文字体：黑体、宋体、仿宋、楷体等；
英文字体：无衬线体、衬线体、意大利斜体、手写体、黑字体等。
中文字体推荐
线上中文字体推荐使用
思源黑体、华文黑体、冬青黑体、微软雅黑、苹方-简、黑体-简。其中iOS系统默认中文字体是「苹方 PingFang」，Android系统中文字体使用「思源黑体 Noto Sans CJK」。
英文字体推荐
线上英文字体推荐使用
San Francisco、Helvetica Neue、Roboto、Avenir Next、Open Sans。其中iOS系统默认英文字体为「San Francisco」，Android系统默认英文字体为「Roboto」。
数字字体推荐
线上数字字体推荐使用
DIN、Helvetica Neue。
DIN 起源于 1995 年的德国，无衬线字体，易用耐看、字形开放，是设计师最爱的几类字体之一，适合显示比较长的大号数字，但是小字号的情况下识别度较低。
Helvetica Neue 除了上文介绍的简洁朴素、中性严谨、没有多余的修饰外，还是 Helvetica 的升级版，拥有了更多的字重，可以作为 iOS 和 Android 跨平台数字字体使用。
字号
字号是界面设计中另一个重要的元素，字号大小决定了信息的层级和主次关系，合理有序的字号设置能让界面信息清晰易读、层次分明；相反，糟糕无序的字号使用会让界面混乱不堪，影响阅读体验。
字号的选择
字号的选择，可以遵循 iOS、Material Design、Ant Design 等国内外权威设计体系中的字号规则，也可以根据产品的特点自行定义。
iOS` 字号规则
iOS11 系统中，使用 San Francisco 作为系统英文字体，包含了以下几种字号的文本样式。
| Large Title | 页面大标题 | 34pt |
|---|---|---|
| Ant Title | 页面标题 | 20pt/22pt/28pt |
| Body Headline | 正文/模块标题 | 17pt |
| Callout | 标注 | 16pt |
| Subhead | 副标题 | 15pt |
| Footnote | 脚注 | 13pt |
| Captione | 说明文字 | 11pt /12pt |
需要注意的是，San Francisco 字体有两种模式：
1.文本模式 SF Pro Text 和展示模式 SF Pro Display，文本模式适用于字号小于 20pt 的文字；
2.展示模式适用于字号大于等于 20pt 的文字。
Material Design 字号规则
在 Material Design 设计体系中，使用 Roboto 作为英文字体，规定了以下文字排版的常用字号。
长篇幅正文，每行建议 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 为最佳阅读距离。
TIP
西文的基本行高通常是字号的 1.2 倍左右。而中文因为字符密实且高度一致，没有西文的上伸部和下延部来创造行间空隙，所以一般行高需要更大，根据不同人群的特点（儿童、年轻人、老年人）以及使用环境，可达到 1.5 至 2 倍甚至更大。