数据可视化的目的是提供一个能快速传递大量信息的布局。良好的可视化可以帮助读者理解复杂难懂的数据，不会让设计成为障碍。因此，任何与图形相关的文本都应该易于阅读的。

本期白杨数说将从字体的选择与字重、字号规范与应用、字体优化与交接、常用字体与推荐四个方面介绍如何为您的数据可视化作品选择一个高可读性和美观的字体。

1

字体选择与字重

文字是界面最核心的元素，是作品传达给读者的主要内容。它的承载体即是字体。从字体的最基本属性（字族、字类、字重、字号等）说起，熟悉字体的特征，了解字体在界面的作用。

字族：是字体组织的基本单元，是其重要的组成部分。一个字族是指一组专门设计的、一起协调使用的字体。

最典型的字族是由字体组成的，而它的名称通常取自于字族中的“常规”分量的正文字体。正文字体和粗体、斜体以及粗斜体四种补充字体构成一个完整的组合。例如：Times New Roman、Bodoni或Helvetical。

字类：根据基本的字体设计变化而成的各种不同的字体，如细体字、黑体字、粗黑体等。

字重：即字的粗细。从最细的Ultra Light到正常的Regular到最粗的Extea Bold可以有很多级字重。分级的名字也没有统一的标准。

字号：指字的大小，排版领域使用的字号单位非常多：

①磅或点（pt）

②派卡（pica）

③中文字号

④像素（px）

⑤rem，em

（1）衬线体与无衬线体

①衬线体

衬线又被称为“字脚”，衬线体就是有边角装饰的字体。我们常用的西文字体Times New Roman等，中文的宋体、明体等都是衬线体。

②无衬线体

无衬线体则与衬线体相反，通常是机械和统一粗细的线条，没有边角的装饰，笔画简洁，容易辨认。最具代表性的无衬线体有西文字体Arial、Helvetica，中文字体有黑体、微软雅黑等。

衬线体和无衬线体是欧美人提出的概念。衬线字体更为优雅和复古，但因装饰过多，文字稍小就不易辨认，因此常用于艺术性文字、时尚品牌等；无衬线字体则具有技术感和理性气质，更受科技型企业或品牌的青睐，腾讯谷歌等互联网企业都是选用的无衬线字体。

因此在具有浓厚技术的可视化氛围中，为了体现科技感和数字感，结合我们的观测体验、展示形式等，我们统一选用的字体是无衬线体。在标注内容时也常常避免使用衬线体，因为额外的繁琐会混淆字体的视图。

（2）中文字体

在使用数字屏幕阅读时，字体的选择要选用无衬线体（比如黑体、微软雅黑），会更显厚重；尽量不要选用衬线体（比如宋体、书法体），会显单薄。

标题可以用Blod，更厚重也更加醒目，且不需要长时间观看；正文由于需要长时间观看，因此采用Regular字重，观感以及体验更佳。

（3）英文字体

英文字体类型的使用，需要选择更明显的粗体，一边数据展示更加直观，依旧选用无衬线体，推荐字体有：D-DIN字体

英文字体的字重用Regular更加纤细精致，由于英文字体分为大小写，注意不要全部大写，对于读者而言，这不易阅读。

（4）数字

考虑到画面的字体的种类不超过三种，且考虑到字体的统一性，数字的字体一般与英文字体保持统一，比较推荐：D-DIN字体。

数字字体的字重尽量使用Bold，因为在界面的展示中，一般数字字体都会比同字号下中文小4-6px，因此数字的字体大一点、厚重一点，数据才能更加清晰，作品也会更加符合数据可视化展示。

同时，数字字体尽量选用等距字体，比如数字“1”和“0”，有些字体的间距会相应的缩小，我们要选用的就是等距字体，这样在做一些列表数据对齐的时候，数据展示才能更加友好。

2

字号规范与应用

常规16:9屏（指的是1920*1080的分辨率）的字体大小的选择，我们参考了页面上常规大小，定义了一套关于不同尺寸下的标准字号，正常1080P页面，最小字号不小于16px。

常规32:9屏（指的是3840*1080的分辨率）其实是两块1080P的屏幕进行拼接，因此如果画面内容较多时，定义最小字号不小于16px。如果画面内容较少时，具体字号大小还要参考设备清晰度、环境灯光、视距等因素，对字体进行相应的放大，比例合适即可。

特殊尺寸屏（指的是非主流的分辨率，比如2880*1920的分辨率）的字号大小比较难定义，因为需要考虑的因素很多。总体来说，如果高度在1080px左右，那么就按16:9的字号规范来算。如果高度高于1080px且高出很多，则需要等比计算或放大，具体实践出的准确数值还得需要根据大屏的实际情况来综合考虑。

3

字体优化与交接

（1）优化字体

当给开发的字体太大，占用内存该怎么办？

其实我们可以用一些特殊的方法对原有的字体包进行优化，比如英文字体，我们可以删除其中非必要的中文字体和数字、符号等，只保留一些非必要的英文字母。具体方法：用FontCreator软件进行字体的优化与删减，并修改字体细节，重新命名发布。同时，也可以用自己设计的字体去应用到开发。

优化字体具体教程：https://www.bilibili.com/video/av82311138?vd_source=ef76cf00f87055472e4acd33c79e2b2f

（2）开发交接问题解析

①采用默认字体开发怎么办？

默认字体开发有时候可能会出现文字换行或者文字放不下的情况，因为不同字体的字间距以及大小可能是不同的，因此在初期就需要开发协调好，跟设计效果图的字体保持同步，这样才能保证设计效果的还原。

②本地部署电脑没有字体怎么办？

字体的存放一般有两种，一种是放到单独的服务器然后每次加载去服务器访问字体；另一种是跟代码放在一起。对于字体大小的要求，本地储存不需要考虑字体包大小，云储存需要考虑字体包大小。

云储存一般字体包大小可以限制在2、3M 左右，5、6M 的字体包就已经非常大了，太大会影响我们字体的读取，画面加载很慢。

最优解就是在部署本地的电脑上安装你需要的字体，这样的话程序就自动读取，可以识别本地部署的字体；如果不支持本地化部署的，字体是存放在服务器或者是跟代码打包放一起的，可以要求开发在全局代码中多写几个备用的字体。

比如你是 Windows 系统，那么自带的就是微软雅黑，iOS 系统自带的就是苹方平台，会自动根据写出的代码按顺序筛选自带的系统字体。

4

常用字体与推荐

一些特别好用的字体，会在设计过程中提升画面视觉，因此给大家推荐并分享了一些可以做可视化大屏的商用中英文字体。

（1） 可视化常用中文字体

中文字体包含了一些可以做标题的一些造型比较好看的字体，比如优设标题黑，站酷高端黑体，卢帅正锐黑体，胡晓波男神体等等。可做正文字体的比如，苹方简体，思源黑体等等。

（2）可视化常用英文/数字字体

英文字体和数字字体主要是分享了一些数据展示比较奇特的造型字体，比如：DS-digital、Furore、以及正常数据展示的 D-DIN 字体家族等。

字体下载链接：https://pan.baidu.com/s/1s6rIn4TKf8ggxJ0a2QJPTA

提取码：k5j3

5

总结

字体的最基本属性是：字族、字类、字重、字号，通过四种基本属性为切入点，精准的去讲述可视化的字体规范和样式。

在可视化大屏设计中，字体更加偏向于无衬线体，无衬线字体所具备的技术感和理性气质，更受科技型企业或品牌青睐；

在可视化大屏中，展示数据的重要性不言而喻，因此要注意中文、英文、数字字体的选择以及注意事项，一切以数据展示更加明显为前提；

在不同屏幕中，可视化大屏的字号大小规范是有区别的，并且需要结合影响字号的五大因素：屏幕大小、界面内容、观测距离、设备性能、主观人为去制定字体规范；

数据可视化中选择合适字体的方法你get到了吗？其实，可视化大屏设计字体规范不存在绝对字体规范，与其相信权威不如相信自己的眼睛，感兴趣的小白杨可以继续深入探索研究~

参考资料：

[1]https://medium.com/nightingale/choosing-a-font-for-your-data-visualization-2ed37afea637?source=collection_home---3------5-

[2]https://zhuanlan.zhihu.com/p/51249614

[3]https://www.zhihu.com/market/paid_column/1143181695594303488/section/1143227623382528000?km_channel=searchorigin_label=search

[4]https://baike.baidu.com/item/%E5%AD%97%E6%97%8F/1710088