B面设计中，字体往往是出现频率最高的“原子”。 由于其渲染方式不同（设计软件渲染和浏览器渲染），并且在Web设计中，会存在两大桌面操作系统（Windows和Mac OS），因此B端设计中的字体往往存在很多“变量”
查看很多设计师的手稿后，你会发现他们经常存在很多页面问题：缺乏层次感、灰页
■ 缺乏层次结构
缺乏视觉层次，这通常是设计师的主观体验
在课堂上，我和大家聊过：作为B端设计师，我们其实更像是布局设计师。因为从移动端到桌面端，交互面积减少的同时，也会带来清晰度信息区的划分和视觉动线的引导
缺乏层次感往往就像我们在寻找出口时，遇到了一个具有欺骗性的“标识引导系统”，它以密密麻麻的布局为你展示所有的信息。所以设计本身其实是一样的
■页面呈灰色
“页面变灰”这个词似乎起源于“艺术专业”。 通常用来评价一件缺乏重色或重色比例较高的艺术品。 你也可以理解，页面上往往找不到焦点。因此，页面变灰往往是由于字体颜色缺失造成的
字体系列
Font Famliy，也称为字体后备。它是浏览器中常见的字体 CSS 属性
其目的是保证字体在不同平台、浏览器上具有良好的适应性和可读性。
现实情况是，作为B端产品的提供商，我们并不知道真实用户的笔记本中安装了什么字体，我们通过字体回退来保证页面显示的最佳效果
字体家族需要在项目开始时就明确，因为字体是B端页面中最基本/最底层的原子，如果随便改变，就会影响整体的设计方案，所以风险较大
例如常见字体Family：
Mac OS下英文使用：San Francisco，中文使用：Ping Fang SC
Windows系统下英文使用：Segoe UI，中文使用：微软雅黑
显然，这个字体并不是一成不变的，你可以根据用户的实际情况进行调整：
■如何确定字体后备？
1、排查、拦截竞品字族代码，通过研究竞品的退货机制，建立基本的产品退货方案。
2、将方案交付后端调试，通过调试结果确定方案（设计软件的渲染方式和后端实现不同，建议在真机上判断）
字体大小和列宽
字体大小和栏宽是一对绑定关系
对于字体大小，浏览器仍然有最小限制。 为了保证用户的阅读，字体最小字号为12px
实际项目中，我们会设置：12px、14px、16px、18px...等高度，而列宽会是字体的1.5-1.6倍，所以我做了一个常用的字体和列宽表
最后说一下B端项目中线高的重要性
这是一个朋友问我的问题。 你能想一下它是黑色还是白色吗？
正确答案是灰色。因为列宽的出现，意味着文字的高度更加统一，而在实际宽度的检测中，必须将列宽算在字体内部的元素之中
词重
字体粗细有 ExtraLight、Light、Normal、Regular、Medium、Bold 和 Heavy，当然它还有一个数字名称：100、200、300、400、500...
我们可以通过字体粗细来更改页面层次结构。 因为字体越粗，意味着阅读视线越专心，整个信息层次就会发生很大的变化。 粗体字一般表示我们的标题，也就是说你的标题概括了下面所有的信息。因此，良好的字重管理可以帮助我们区分信息层次
字体黑色
黑色字体的亮度会直接影响页面是否呈灰色。 我们先来看看灰页的问题
虽然“灰度”是我们设计者的主观体验，但是我们要考虑逻辑，我们可以通过WCAG规范找到更合适的答案
这里我们平铺常见的中性色，我们可以根据HSB颜色值中的色阶绘制折线图，因为字体使用往往是在后三种中锐化的，并且颜色的颜色值相对更陡。
虽然相对陡峭的色阶逻辑是从中性色的使用开始的。浅灰色部分主要是基于“背景分辨率、分割线、输入框遮罩”，通过浅灰色来实现与页面布局的关系
深灰色主要用于“文字、标题、正文的排版”。 需要改变色阶来引导视觉关系，进而打造界面的整体层次感
至于浅灰和深灰，业内经常有一种说法，那就是“可以通过透明度来控制字体的黑色，比如使用#000elementui 字体颜色，然后随意增加或减少透明度”。
当我思考这个问题时，我发现各大系统中似乎都有这样的说法。 这是真的？
通过查看SAP、Lightning、Ant Design、Element、Clarity Design等设计规范，发现这些说法主要来源于国内的Clarity Design和Ant Design。 对规格不清楚的朋友可以参考B端设计指南（youthce.com）
Clarity Design 确实有一段描述了字体透明度的问题
“我们使用透明度来区分字体层次。当字体应用于蓝色背景时，根据#000调整透明度；当应用于红色背景时，根据#FFF调整透明度。”
仔细阅读后你可以明白，它的核心是表达字体的层次关系，让你快速理解层次的概念，而不是陷害你用透明度来使用字体
我们再看看 Ant Design。 如果只看图片的话，似乎表达的意思确实是通过透明度来控制文字颜色和背景颜色的关系，但是看对面的描述文字
“如果文字颜色与背景颜色太接近，就会难以辨认。考虑到无障碍设计的需要，我们参考WCAG标准，保持正文、标题和背景之间的AAA级对比度色彩比7:1以上。”
但如果你仔细看的话elementui 字体颜色，你会发现它只是通过透明度来表达层级关系。我查了网上的阿里云、语雀、Teambition等产品，发现都没有使用透明度
这种透明度真的适用吗？ 使用透明度的字体存在以下三个问题：
1.适应场景的字体不多：
当字体在图片或者有纹理的背景图片上时，透明度为65%的字体显然会出现字体无法控制的问题
2.增加渲染负担：
带透明度的渲染会减轻浏览器的负担，而且作为全局使用的内容，如果不能使用的话尽量不要使用，以免减少不必要的负担
3、维护困难
由于字体颜色采用透明，超出了颜色规范的范围，所以需要单独维护一套字体颜色组件库。
如果你有过原子设计和Design Token的经验，你就会知道颜色和字体本身属于两种不同类型的原子，所以字体颜色通常适用于中性色的颜色值。
关于规格，我还是给朋友讲讲维护。 这是一个关于设计系统缺乏维护的小彩蛋：
其实字体本身是一个很简单的内容，但作为设计规范中的基本“原子”，设计中还是存在很多小问题。 也可以说说B端设计中遇到的“字体相关的坑”
第二期B端设计训练营已经开始早鸟预订了，扫描下面的二维码找我预约吧~
发表评论