# 字体

字体是体系化界面设计中最基本的构成之一。 我们的用户通过文本来理解内容和完成工作,科学的字体系统将大大提升用户的阅读体验及工作效率。

# 字体选用

在B端产品中,字体使用建议优先级排序为(基于数字/英文&mac 系统优先原则) : Helvetica Naue (英文/数字)、Helvetica(英文/ 数字)、Arial(英文/数字)、 PingFang SC、Microsoft YaHei UI、微软雅黑。为了保证界面整洁,设计规范中约定字号不超过4种,同时基于电脑显示器屏幕大小、行业用户习惯、最佳阅读距离等要素,设计规范需要对字号进行了规定。目前常用的字号标准有2种:

第一种,12px(说明文字)、13px (正文)、14px (导航文字)、16px (大标题)。

第二种,12px(说明文字)、14px (正文)、14px (导航文字)、16px (大标题)。

# 字体家族

字体Famliy,也叫做字体回退。是浏览器常见的字体CSS属性其目的是保证字体在不同的平台及浏览器内,都有着良好的适应性和可读性。现实情况是因为作为我们作为B端产品提供方,不知道真实用户究竟在电脑中安装了哪些字体,而通过字体回退,来保证页面显示的最佳效果字体Family是需要在项目之初就能有所明确,因为字体最为B端页面当中最基础/底层的原子,如果随意变化,全局的设计方案都会受到波及,因此风险较大,比如常见的字体Family:

Mac OS下英文使用: San Francisco、中文使用: Ping Fang SC

Windows系统下英文使用: Segoe UI、中文使用: Microsoft YaHei

# 字阶与行高

字阶和行高决定着一套字体系统的动态与秩序之美。 字阶是指一系列有 规律的不同尺寸的字体。行高可以理解为一个包裹在字体外面的无形的盒子。 黄色是行高,因为行高的出现,代表着文字有着更为统一的高度, 并且在实际间距的测量中,必须把行高算为字体内部的元素当中。

文本框

HoneyComb 定义了 6 个常用尺寸的字体以及与之相对应的行高。

文本框

在Honeycomb的视觉体系中,我们建议的主要字体为14,与之对应的行高为22。其余的字阶的选择可根据具体情况进行自由的定义。建议在一个系统设计中 (展示型页面除外) 字阶的选择尽量控制在3-5种之间,保持克制的原则。

# 字重

字重的选择同样基于秩序、稳定、克制的原则。多数情况下,只出现 regular 以及 medium 的两种字体重量,分别对应代码中的 400 和 500。在英文字体加粗的情况下会采用 semibold 的字体重量,对应代码中的 600。

文本框

# 字体颜色

文本框

# 字体行高的使用场景

由于每个浏览器使用的字体不同以及用户的自定义字体,所以在开发的时候尽量使用系统原生的字体比如微软雅黑苹方等字体

文本框