B端基础 | 如何搭建中台字体规范、很有意思。

King国王刘

北京/UI设计师/1年前/1866浏览

版权

King国王刘

第一部分中文字体的历程传承（还挺有意思的）。第二部分字体规范（结合大厂规范）。第三部分实战（做个界面说说）

写在前面

还是尽量把事情解决了。可以让你看完后有所收获。后台的字体规范，我自己感觉相对并没有那么复杂。不过也是后台规范里很重要的一部分。之前一个萌新设计师。在做后台界面设计练习时。她居然不知道不同的部分用多大的字号更不知道用什么字体。

全文8000字左右、我的阅读速度大概需要10分钟。

山高路远，希望我能有幸和你同行。下面是我精心准备的内容，希望对你有用~

第一部分 | 一套中文字体是怎么设计出来的

做了设计师这么久用过很多字体。侵权的不侵权的好像都用过。还好到现在没有被字体公司告侵权。用过那么多字体。你不好奇一款字体是怎么设计出来的吗。反正我是比较好奇，所以这部分内我们就看看字是怎么来的。

如果你对这部分不感兴趣。直接看第二部分和第三部分就行。

1、汉字的起源和演变

我印象中我们的汉字应该是从甲骨文开始的。后来逐渐演变成了现在的文字。世界上所有的国家里，只有我们中国的文化是始终没有间断过的传承下来，也只有我们的“汉字”是世界上唯一的古代一直演变过来没有间断过的文字形式。从大约是在公元前14世纪，殷商后期的“甲骨文”被认为是“汉字”的第一种形式，直到今天，各种字体纷纷诞生。

汉字的形成为系统的文字是公元前16世纪的商朝。考古证实，在商朝早期，中国文明已发展到相当高的水平，其主要特征之一就是甲骨文的出现。甲骨文是刻在龟甲和兽骨上的古老文字。

1-1、汉字传说

你一定通过仓颉造字的故事。是的我也听过。小的时候听得，说仓颉原本是给黄帝喂猪的。长得有四个眼睛十分聪明。喂猪也搞的很好。但是后来喂猪越来越多，有时杀几个有是母猪产几个。那时候也不知道咋记。仓颉就整天的想办法。于是就想出来了个“结绳记事”用不同的绳节来记猪的增减。这样后那猪让他养的明明白白。

后来黄帝看。唉、仓颉这小子行呀。于是让他管理更多的事情。这需求复杂了“结绳记事”解决不了了。仓颉又犯难了。这摸复杂的业务靠我用脑子记显然是有点难为人了。这么一天，仓颉遇到了一群猎人。他惊讶的发现猎人居然知道哪里有豹子、哪里有羚羊、哪里有野猪。于是仓颉问他们是怎么知道的。猎人说看脚印呀。

仓颉从动物脚印上得到了启发，学会了给东西贴标签于是我们的汉字就造出来了。剧说在仓颉造出汉字时。天上突然下起了谷子雨。都说是天上的神仙奖励仓颉的功德，才有了这一场神奇的雨。后来每年这个时候，就成了人间的“谷雨”节气。

仓颉造字，是中国古代神话传说之一，仓颉造字的地方叫“凤凰衔书台”。仓颉造字，出自《荀子》《吕氏春秋》《淮南子》等著作。黄帝时期，有一个史官叫仓颉，他观察鸟兽的足迹并从而受到启发，就创造了文字。传说他创制文字时，天上降下粟米，鬼在夜间哭泣。因为天担心人们学会文字后，都去从事商业而放弃农耕，造成饥荒。鬼怕人们学会文字后，会作疏文弹劾它们，因此才在夜间哭泣。
汉字的诞生非一人一手之功，是先民长期累积发展的结果。流传下来的仓颉造字的传说，说明仓颉应当是在汉字发展中具有特别重大贡献的人物，他可能是整理汉字的集大成者。

1-2、汉字的发展（楷书、行书、草书、宋体、黑体）

汉字是全世界唯一的一个一直传承迭代的文字。不得不说真牛叉。从14世纪的商周的算卦用的甲骨文、到先秦祭祀用的钟鼎文（不知道文鼎字库和这个有没有关系）西周后期汉字演变成为大篆。大篆两个特点1、线条化；2、规范话。是之后方块字的基础。秦统一后让李斯将文字统一。删除复杂的搞了一波简化后的文字基本没有了象形文字的痕迹、被称为小篆。

小篆整齐和谐十分的美观、但是写起来速度比较慢。机会再统一小篆的同时。就出现了更简化的隶书，隶书里出现了一些偏旁部手，隶书发展到汉代进入了成熟阶段。字的易读性和书写速度大大提升。之后隶书慢慢的就演变成了草书。在盛唐时期、人们结合了隶书和狂草出现了一种新字体楷书。今天咱们得印刷体就是楷书变化而来的。

介于书写工整的楷书和狂野的草书之间还有一种行书。行书是最受大众喜欢最常用的一种字体。现在我们写字基本也都是用的行书字体。

宋体的来历、毕生改进雕版印刷为活字印刷。产生出了一种新型书体。宋体醒目宜读特点横细竖粗。雕刻起来也更容易。后来人们又模仿宋体字的结构、笔意，改成笔画粗细一致、秀丽狭长的印刷字体，这就是仿宋体“仿宋体”也是模仿“宋体”而产生一种字体，其发展十分迅速。是人们最喜欢使用的一种规范字体，在印刷品还有各种不同场合得到了广泛的应用。

与此同时，“黑体”也诞生了，这种字体醒目大方，笔迹全部一样粗细，结构醒目严密，笔划粗壮有力，撇捺等笔画不尖，使人易于阅读。由于其醒目的特点，常用于标题，导语，标志等等。丰富了汉字的表现形式。黑体字又称方体或等线体，没有衬线装饰，字形端庄，笔画横平竖直，笔迹全部一样粗细。汉字的黑体是在现代印刷术传入东方后依据西文无衬线体中的黑体所创造的。由于汉字笔划多，小字黑体清晰度较差，所以一开始主要用于文章标题。

汉字的演变：甲骨文-->金文-->小篆-->隶书-->草书-->楷书-->行书。

2、简体和繁体

不知道你有没有好奇过，为什么汉字还会有简体和繁体的区别。他们到底是怎么来的。反正我是好奇过于是乎我就查阅了一些资料。我们来一起看看吧。

繁简字体一直共存，随着时间的推移，简体字和繁体字逐渐分化。在宋朝以后，繁体字逐渐成为官方和正式场合的书写标准，而简体字在民间广泛流传，成为日常书写的主要形式。

你可能都想不到我们之所以用简化字是因为要提高大家的识字率。简化字最早可以追溯到太平天国运动。太平天国运动是东亚地区第一个进行系统行汉字简化的政权。甚至影响到后来的新中国的汉字简化运动。

2-1、简体字

1934年1月，国语统一筹备委员会第29次常委会通过了钱玄同的《搜采固有而较适用的简体字案》，呈请教育部施行。1935年8月国民政府教育部公布了《第一批简体字表》，一共收录了324个民间流传最广的俗字、古字和草书字。但因为有争议，第二年2月，《第一批简体字表》被收回。

1954年中国文字改革委员会成立。1956年由中华人民共和国国务院公布的《汉字简化方案》，并最终制定出了一个《简化字总表》。后来又在1977年搞了一个二简，但用力过猛被大佬们给否了。2000年10月31日《中华人民共和国国家通用语言文字法》通过，次年元旦正式施行，确立了规范汉字作为国家通用文字的法定地位。

简体字并不是都是现代人创作出来的。大部分是之前的俗字（就是古代的民间用字）草书、楷体、隶书里面来的。还有抗战解放时期，还造了一批字叫解放字（屌不屌）。汉字简化的方法有六种。一是更换偏旁，二是删除局部，三是同音替代，四是全部改造，五是简化类推，六是草书楷化。

2-2、繁体字

旅游的时候不知道你们有没有发现。很多历史古迹里的碑文，好多我们看不太懂。那些可能应该是繁体字吧。我之前理解的繁体字就是被咱们简体字所代替的文字。

繁体字，汉字的一种字体形式，欧美各国称之为“传统中文（Traditional Chinese）”，一般是指汉字简化运动被简化字所代替的汉字，有时也指汉字简化运动之前的整个汉字楷书、隶书书写系统。繁体中文已有两千年以上的历史，直到1956年前一直是各地华人中通用的中文的标准字。

现在我感觉繁体没有简体书写方便。哈哈、而且感觉简体更好识别。

3、怎么造一套字（阿里巴巴刀隶体）

我们在电脑上使用的字体是怎么被造出来的。以前就很感兴趣，但是一直也没有去过多的了解过这次就认真的了解了一下。一套中文字库，包含庞大的字符数，简体中文字符集的中国国家标准（GB2312标准）包含6763个基础汉字。其中最常用的汉字至少也要3500字～4000字。就是说，要完成一个基本可用的中文字库，至少需要设计近3500个字。一般的做一款字体需要以下的流程。

3-1、前期的思考

先要有个需求把。你想要做一个什么字体。是要满足我们的业务，还是要纯粹装个B、还是要卖字体。你做的字体大概想表达什么。表达自己的品牌。或者传递企业价值。等等。先有个目标，确定字体立意。

3-2、设计绘制

确定了我们文字的用途、那是不是应该设计出一些字样来看一下。好多的字库字体设计都会从永字开始。因为永字八法、包涵了点、横、竖、勾、提、撇、捺、弯。

字样确定后根据我们的字样立规矩了。基础笔画，字框，偏旁库，以及设计原则。这些搞定了就是召集小伙伴们搞这3000多字了。

3-3、编码实现

功夫不负有心人。在网上找到了一个Mac电脑用的字体设计软件。可以做好字后直接编码导出安装使用。是的你可以自己去设计一个字体试试看了。很有意思。

这个软件叫Glyphs3做字很方便的，下载有30天的免费期。我看的教程是下面这个。B站杨洋XHM。https://space.bilibili.com/178368144

我自己就用了一上午时间做了一个，KingBig-丑丑体的拉丁文字体。能用上自己做的字体是一种很奇妙的感觉。如果你想尝试一下我做的丑丑体加我好友我发你。哈哈哈

个人开发一款字库意义不大，除非是非常有名在平面设计领域，大部分设计师都认识你，这样你是可以去个人销售自己的字库的。而且3000到4000的文字设计模板，那工作量。需要的是设计师们一起合作完成。

不过中文字库可能我们做不了。但是我们有没有可能做数字的字库呢。这个工作量就比较低了。10个数几个符号。我们之前项目里需要一款瘦瘦的数字字体来显示当时在我们版权字体里没有找到合适的。就自己做了一套来嵌入到系统里用。或者你想把自己写的字变成专属的手写体那这个软件可以帮你完美解决。

第二部分 | 中后台字体规范

文字显然是最重要的传递信息的元素之一。网页文字将与网页中的界面系统相结合，从而形成一个可供用户操作的产品系统，用户除了阅读，还需要完成一系列与界面系统产生的交互行为。因此，在网页设计中，文字系统是影响产品可用性的重要因素。

在大场的文字规范里、基本都是从、字体、字阶、行高、字重、字体颜色等方面对文字做规范化处理。

1、字体

在网页设计里、大部分用的字体大类都是黑体。因为在屏幕的显示中、可读性强、亲和、现代、清晰。在前端开发中。前端工程师会写一个生明，就是有先用什么字体。如果没有这字体那摸要第二优先，以此类推。

--font-family: "Source Han Sans CN","Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;这个就是一个平台系统字体的生明

下面是字节跳动的Arco Design设计规范里的字体选择。

字节跳动的Arco Design 设计规范字体声明

@font-family: 'nunito_for_arco', 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB',
'Microsoft YaHei', '微软雅黑', Arial, sans-serif;

2、字阶（字号）

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

在TDesignue设计规范里把字阶字阶定义一级字阶和二级字阶，一级字阶常用于基础组件的设计中，二级字阶用于标题及特殊场景的应用。

第一字阶，每个字号的增长的步数差距为 2px。桌面端中，Body 字号我们设置为 14px，Base 取 12px，桌面端的最小字号是 12px，而 10px 则作为移动端的 Base 字号，将桌面端与移动端字阶统一处理，让两端文字与设计系统更一致，更标准地调控。

第二字阶，为了减少字阶区间里的步数，在这个范围中的文字，多为模块超大标题，展示型文案，以数字数据展示为主。通过 +4，+8，+12，+16 的步数增长规律，满足这个范围的字阶中，文字层级跨度大的展示诉求，也减少没有必要的小步数字号。

Arco design的文字规范里。对字节的定义是。文字的大小，层级，对比度等都是影响视觉可读性和阅读效率的重要因素，为保障文本的易读性，界面文字需满足以下要求：

-最小可识别文字尺寸：12px

-字体层级：区分文本主副层级，字号差距需保持2-4px

-一个产品中不要有过多的字体层级，建议选择在 3-5 种之间，对于需要用户关注的文本信息可通过增加字重的方式突出

考虑arco的通用性和包容性，在字号的选择上，我们将主字号定义为14px，并提供了不同层级的字号以适配不同信息层级的展示需求。

我们在制定自己的字体设计规范的字阶时。套用这些大厂平台的规范然后结合自己系统平太的页面需求，来制定就行。

3、行高

在我的认知里行高还是一个很重要的一部分。为什么要有很高呢。是因为在前端实现界面时如果文字有行高。更利于还原。因为如果没有行高只靠字体去撑起高度。那可能在设计还原上就差点意思。因为字体撑起来的高度可能不是整数。

在ant design、TDesign、arco design这三大中后台设计规范里。对文字行高的第一基本都是一样的。行高是为了让上一行的文字和下一行的文字之间有呼吸的空间，基于呼吸空间一致，让不同字号之间的间距都保持相同，通过逻辑得到这样一个公式：「行高 = 字号 + n 」，8 作为变量正好同时满足与 1.5 倍的「 14px & 16px 」常用字号行高保持一致，总体文字间隙稳定呼吸，行高空间较一致得出计算公式：「line-height = font size+8」

4、字重

在我做过的系统里大概我会用两种字重、常规、粗。同一个字体的不同字重能传达不同的信息权重和情绪。细的字体给人以细腻、轻快的感觉，而粗体则给人着重和严肃的认知。因此适合的场景使用合适的字重非常重要。

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

5、字体颜色

这里我们来看看TDesign的字体颜色内容。TDesign 文字和图标色彩系统采用透明度方向，期望更好的适配亮暗模式。让整个文字和图标色彩都更加具备包容性。

根据字体样式的设计原则，制定了简易好记的透明度数值区间并且将该字色与界面系统的色彩系统结合，文字显示色彩对比满足至少1:4.5( AA级别）。且验证了其中的实用性，共分为亮暗两种模式，4 个色阶。

我在做的时候，我还是很倾向于文字颜色是有色彩倾向呀。这样界面风格更容易出效果。

1、建立体系化的设计思路：在同一个系统的 UI 设计中先建立体系化的设计思路，对主、次、辅助、标题、展示等类别的字体做统一的规划，再落地到具体场景中进行微调。建立体系化的设计思路有助于强化横向字体落地的一致性，提高字体应用的性价比，减少不必要的样式浪费。2、少即是多：在视觉展现上能够用尽量少的样式去实现设计目的。避免毫无意义的使用大量字阶、颜色、字重强调视觉重点或对比关系。3、尝试让字体像音符一样跳跃：在需要拉开差距的时候可以尝试在字阶表中跳跃地选择字体大小，会令字阶之间产生一种微妙的韵律感。