字体（Typography）作为 UI 中的一个核心基础元素，往往在设计及还原过程中被忽略。从 UI 角度而言，好的字体及展示方式可以极大的提升信息展示的效果。而从前端角度而言，为了减少资源请求，通常都是采用操作系统的默认字体。

目前我们在 UI 设计中，作为正文字体主要使用的是等线字体。

在 Mac OS 下，采用系统默认字体的方式当然是没有问题的，这得益于 Mac OS 一直以来的自带字体（如 Helvetica）的字形及优化都做的很好。然而在 Windows 下，则并不是很理想（对于有追求的设计者而言），微软雅黑（Microsoft YaHei）的优化问题也一直是被人诟病。

在 Mac OS 下，微软雅黑 也被优化了，这可能得益于 Mac 自身优秀的显示技术，但更可能是源于 Apple 的工程师们对细节的严谨

详细的总结应该从中文及西文（主要针对英文及阿拉伯数字）两部分展开，由于平时很少能接触到国际化的项目，所以本文从正文（中文及英文）及数字两部分进行说明。

关于中文（汉字）及西文（主要是英文字母）的区别，由于构型的问题，文字基线区别很大。中文的文字基线实在文字的边缘，而英文是在中间部分，忽略顶部和底部的构型。另外，行高（line-height）及 字间距（letter-spacing）的处理方式也不相同。专门研究此方面的专业文章很多。

Part 1 字体的版权问题

这几年，知识产权的保护越来越严格，字体侵权的问题也越来越多。涉及到外网的项目，请谨慎使用非操作系统自带的字体，避免产生不必要的商业纠纷。

这里单独提及 微软雅黑（Mircosoft YaHei），虽然它是 Windows 操作系统的默认显示字体，但是目前此字体已经禁止在未授权的情况下进行商用。不过，涉及的范围主要是设计部分，项目正常使用其作为默认字体是不受影响的。

从设计的角度而言，我们也建议使用更为方正的苹方（Pingfang SC）或思源（Source Han Sans）字体。我们的设计系统中，常规中文字体使用的是苹方，由于此字体不是操作系统自带字体，开发时如果条件允许，建议引入此字体（中文字体）。

在我们的设计稿中，字体也是非常重要的一部分，而显然 微软雅黑 在实际项目中的显示效果是非常不理想的，这源于它本身在 Windows 下显示的构型偏扁，另外又没有进行优化，导致字体的基线比较怪异。

Part 2 正文字体

正文字体 包含 中文字体 及 英文字体 两部分。

我们的设计系统使用苹方（PingFang SC）作为正文字体，它是一款开源字体，且字体的优化做的相对较好，字形周正，中英文部分的基线稳定，轮廓清晰。

单独的数值（如指标板中的数值或表格中的数值列）部分，我们不推荐直接使用此字体，更不推荐使用默认字体（如微软雅黑），这主要是因为 常规字体的数字部分是非等宽的，这不利于进行数字对比。

此字体在 Web 端的表现也要远优于 微软雅黑，不过它也不是完美的，它的字重提供的较少，并且常规字体（Regular）在 Web 端可能会显示的不够清晰。

当然这也取决于显示器自身，问题更多出现在 Windows 系统中。

为了照顾页面还原，我们选用 常规体（Regular）作为基础字体，在条件允许的情况下，建议再额外引入 中粗体（Semibold）。

Part 3 数字字体

很多时候，数值都是出现在具有比较性的 UI 结构中的（如 Table）。除了添加 千位分隔符 来方便快速识别以外，我们要求数字的字体是等宽的，而大多数字体，尤其是我们常用的字体，数字部分并非是等宽的（差别最明显的是数字 1）。这将导致在位数相同的情况下，数值的整体显示长度会有不同。

所以，我们引入等宽的数字字体，使数值的阅读更高效。

我们的系统使用的是 DIN Alertnate 字体。它是目前经常出现在设计中的英文字体，专门被用来处理数值部分的显示。当然，等宽字体并不止这一种，我们的初衷是希望让数字的阅读更高效，由此给用户带来更好的使用体验。

另外需要注意的是，此字体不建议和正文字体混用（无论是中文还是英文）。

它的构型较小，在混用时会降低数字部分的比重。如果出现混用的情况，请适当的进行放大，以保证数值部分的显示足够清晰。

附录一：正文字体下载

Link：CSDN - Design System & Application - 字体包

附录二：CSS 字体引入

Link：CSDN - CSS 中的自定义字体模块 @font-face

Design System Application - Chapter 2 字体 Typography相关推荐

Design System Application - Chapter 1 网格系统 Grid System
网格系统(Grid System)是本设计系统的基本规则,它是我用来解决浏览器适配问题并使界面整体表现的规范的非常有效的方法.另外需要指明,没有完美的方法,这就像前端中没有完美的可以解决所有问题并 ...
Design System Application - Chapter 3 字号 Font Size
本篇只针对结构性文字(UI 构成的文字部分及段落等) 进行说明,装饰性文字(Banner 等) 及指标板数值等特殊形态的文字部分不需遵循字号设定,但是涉及到结构性的部分,建议遵循网格系 ...
sketch里的ios控件_使用Sketch建立Design System
一. 有关Design System 之前的文章<使用Adobe XD建立Design System>中介绍了什么是Design System,它有什么用,在设计的哪个阶段使用以及如何用A ...
【EDA】Electric VLSI Design System(芯片设计软件): 介绍
http://savannah.gnu.org/projects/electric 清华大学镜像站点下载地址:https://mirrors.tuna.tsinghua.edu.cn/gnu/elec ...
学习Head First Design Pattern——翻译Chapter 2：The Observer Pattern
学习Head First Design Pattern--翻译Chapter 2:The Observer Pattern Page 37 图片〉〉嗨Jerry,模式组讨论已经推迟到星期六的晚上了, ...
什么是 Design System
因为研究 Design System,无意中发现了这本「Design Systems」.本来只是期望着看看别人的思路和想法,粗略的看了几个章节才发现自己错了.这本似乎并不太火的书可以说是目前市面上对整 ...
Microsoft Fluent Design System
转载自:http://www.ui.cn/detail/131217.html 就在刚刚举办的 Microsoft Build 2017 中,微软对外公布了它们最新的设计语言--"Fluen ...
Fluent Design System 设计语言元素
Fluent Design System 设计语言共有元素,分别为光照(Light).深度(Depth).运动(Motion).材质(Material)和缩放(Scale),目前包括人脉.计算器和 G ...
ADS（Advanced Design system）良率分析（Yield）、良率优化（YieldOptim）
前言先进设计系统 Advanced Design system(ADS)Agilent Technologies 是领先的电子设计自动化软件,适用于射频.微波和信号完整性应用. 原理分析我们使用软 ...
将ADS（Advanced Design system）中的版图导入到AD（Altium Designer）中编辑
前言先进设计系统 Advanced Design system(ADS)Agilent Technologies 是领先的电子设计自动化软件,适用于射频.微波和信号完整性应用. AD全名Altium ...

Design System Application - Chapter 2 字体 Typography

Part 1

字体的版权问题

Part 2

正文字体

Part 3

数字字体

Design System Application - Chapter 2 字体 Typography相关推荐

最新文章

热门文章