在B面设计中，字体往往是出现频率最高的“原子”。由于其不同的渲染方式（设计软件渲染和浏览器渲染），在网页设计中，会出现两大桌面操作系统（Windows和MacOS），这就导致字体在B端设计中，往往存在着很多“变数””。查看很多设计师的手稿，你会发现他们经常出现很多页面问题：缺乏层次感，灰页。缺乏层次感缺乏视觉层次感通常是设计师的主观感受。在课堂上，我跟大家聊过：作为B端设计师，我们其实更像是版面设计师。因为从移动端到桌面端，交互区域增加的同时，也会带来信息区域的划分和视觉动线的引导。而缺乏层次感，往往就像我们在寻找出口的时候，遇到一个让人摸不着头脑的“标识引导系统”，它把所有的信息都显示在一个布局上。所以设计本身其实是相通的。“灰页”一词其实来源于“美术专业”。通常用来评价一件艺术品缺少重彩或重彩所占比例过低。你也可以理解为页面中往往找不到焦点。因此，页面变灰往往是由于缺少重字体颜色造成的。字体家族FontFamliy，也称为字体后备。是浏览器通用的字体CSS属性。其目的是保证字体在不同平台和浏览器上具有良好的适应性和可读性。实际情况是，作为B端产品的提供者，我们并不知道真正的用户在自己的电脑上安装了哪些字体，我们使用fontfallback来保证最好的页面展示效果。字体族需要在项目之初就明确，因为字体是B端页面中最基本/最底层的原子。如果随意改动，会影响整体的设计方案，所以风险比较大。比如常用字体Family：MacOS下英文用法：SanFrancisco，中文用法：PingFangSCWindows英文用法：SegoeUI，中文用法：MicrosoftYaHei显然这些字体不是一成不变的，可以根据实际调整用户情况调整：如何确定字体回退？检查拦截竞品字体家族代码，通过研究竞品退货机制，建立基本的产品退货方案。将方案交付前端调试，通过调试结果确定方案（设计软件和前端实现的渲染方式不同，建议在实机上判断）字体大小和行高字体大小和行高是一对绑定关系对于字体大小，浏览器一直有一个最小限制。为了保证用户阅读，字体最小字号为12px。在实际项目中，我们会设置：12px、14px、16px、18px...等高度，而行高会是字体的1.5-1.6倍，所以我做了一个常用字体和行高的表格。最后说说B端项目中行高的重要性。这是一个同学问的问题。你可以想想它是蓝色的还是黄色的？正确答案是黄色。因为行高的出现，意味着文字具有更统一的高度，而在实际间距的测量中，行高必须算作字体内部元素的字重。字体粗细为ExtraLight、Light、Normal、Regular。,Medium,BoldandHeavy，当然它还有一个数字名称：100,200,300,400,500...我们可以通过粗细来改变页面层级。因为字体越粗，意味着阅读视线越专心，整个信息层次会发生很大的变化。粗体通常表示我们的标题，这意味着您的标题概括了下面的所有信息。因此，通过良好的词重管理，可以帮助我们区分信息层次。字体的灰色会直接影响页面是否为灰色。我们来看看灰页的问题。虽然“灰色”是我们设计者的主观感受，但如果我们想更深入地挖掘逻辑，我们可以通过WCAG规范找到更合适的答案。这里我们将常见的中性色进行平铺，根据HSB色值的明度得到折线图，因为字体经常用在后三个色阶，颜色的色值趋势相对比较陡峭。颜色层次相对陡峭的逻辑其实是源于中性色的使用。浅灰色部分主要用于“背景区分、分割线、输入框描边”，浅灰色用于实现与页面布局的关系。深灰色主要用于“正文、标题、文字排版”，需要打通。对于浅灰和深灰，业内常有一种说法，“可以通过透明度来控制字体灰度，比如使用#000，然后改变透明度，随意降低和增加”，当我深入研究这个问题时，我发现各大系统好像都有这样的说法。这是真的？通过查看SAP、Lightning、AntDesign、Element、ClarityDesign等设计规范，我们发现这种说法主要来自国内的ClarityDesign和AntDesign。不清楚规格的朋友可以参考B端设计指南（youthce.com）。ClarityDesign确实有一段描述字体透明度的问题《我们用透明度来区分字体级别。当字体应用于浅色背景时，根据#000调整透明度；当应用于深色背景时，使用#FFF为基础。”仔细阅读后可以明白，核心是表达字体层次关系，让大家快速理解层次的概念，而不是教唆大家用透明来使用字体。我们再来看AntDesign。如果只看图片，好像表达的意思确实是通过透明度来控制文字颜色和背景颜色的关系，但是看旁边的描述“如果文字颜色和背景颜色太接近了”，阅读起来会很吃力。考虑到无障碍设计的需要，我们参考了WCAG标准，将文字、标题和背景颜色保持在7:1AAA级对比度以上。”但是如果你仔细阅读它，你会发现它只是通过透明度来表达层次关系。查了阿里云、语雀、Teambition等线上产品，发现都没有用到透明。透明度是否适用？使用透明度的字体存在以下三个问题：1.字体不适用于很多场景：当字体在图片或有纹理的背景图片上时，65%透明度的字体显然会出现无法控制字体的问题.2.增加渲染负担：带透明的渲染会增加浏览器的负担，作为一个全局使用的内容，不能用的尽量不要用，以免增加不必要的负担。3、维护困难由于字体颜色采用透明，本身就脱离了颜色规范的范围，所以需要单独维护一套字体颜色组件库。如果之前有过原子设计和DesignToken的经验，就会知道颜色和字体本身属于两种不同类型的原子，所以字体颜色一般适用于中性色的颜色值。关于规格，一直在跟同学讲保养。这里有一个关于设计系统缺乏维护的小彩蛋：什么是信息密度？前面提到了字号和行高的概念，但是在它的背后，有着非常复杂的设计逻辑，通过字号和行高，我们可以清楚的了解到不同信息之间的密度关系；通过信息密度可以判断信息的易读性。今天抛砖引玉，简单说一下页面信息密度背后的逻辑。信息密度可以理解为你在页面上展示的信息量有多少？它通常给人一种直观的感觉，即视觉阅读更舒适或更紧凑。比如我们绘制一个信息量固定的表格，我们可以通过字号、行高、行间距来控制显示的信息量，进而产生三种视觉上完全不同的信息显示维度：宽敞、舒适、和紧凑。宽敞：以字体大小为14px，行高为20px为例。spacious的定义是一个文字上下的整体高度，即20px*3=60px。Comfort：舒适度的定义是文字整体高度的上下各一半，即20px*2=40px。Compact：Compact相对信息密度是最高的，高度基本是行高的0.6倍左右，20*1.6=32px。当然密度的定义并没有统一的标准，可以根据自身的产品特性进行调整。但请记住三个维度，这将在文本的后半部分使用。在实际工作中，我们会强调屏幕效果的概念。这种屏风效果类似于餐饮行业的平面效果，目的是作为衡量单位面积属性的具体指标。并且我们可以用它来衡量宽敞度、舒适度、紧凑度的整体具体指标，以及桌外其他因素的干扰。整个表单的“屏幕效果”可以通过信息区域/表单区域*100%得到。“屏幕效果”的概念可以用在许多其他组件中以寻找模式。以后再说吧。什么是易读性？通俗的说就是在这个页面上是否能一眼看清文字，方便用户快速找到。它与我们上面提到的信息密度成反比，即信息密度越高，易读性越低。但在我们的工作中，在满足客户需求时，客户往往更关心信息密度而不是易读性。例如：“你能再加一点吗？”“你能更仔细地展示一下吗？”“感觉这里可以补充更多的信息。”面对这样的问题，相信你总会问自己，需求是否合理？避开现场谈需求，就是耍流氓。关于申诉的问题，我们可以这样想场景：如果你现在是字节跳动公司的“张老板”，作为老板，每天最重要的工作就是查看公司的整体情况。然后打开管理后台点击数据板，发现数据板都是非常大的卡片，但是对于你来说，你不需要那么大的字体，因为这个内容只为你而存在，所以你建议请设计师做相应的调整。如果小张是一名基层销售人员，他每天的工作就是打开软件操作客户数据。随着业务越来越熟练，小张希望能够在一个页面上展示更多的信息，进行数据操作。因此，我希望设计师修改信息密度，他们的诉求似乎有其原因。针对这些情况，我建议大家可以采用不同的展示方式。我们现在正在处理小张的需求。产品涉及大量用户。针对基层员工的工作需求，考虑将特殊偏好抽象成通用逻辑，应用到系统中。例如，在桌子底部设置不同高度的桌子：“宽敞、舒适、紧凑”等维度更笼统地满足了用户的需求，而不是单独针对这个用户进行调整。针对老板的特定需求，或许整个功能/产品都是为他设计的，所以我们可以根据他的具体使用习惯来调整这样的“老板需求”，所以设计师应该从特定人群的实际环境出发。.当然，如果boss之外的其他角色也需要使用这个功能，我们也可以根据“查看、分类、过滤”等功能定义不同类型的角色。而我们应该如何平衡页面信息的舒适度和密度呢？我真的不能给你一个通用的公式。对自己有帮助的只能从有真实需求的场景/行业出发，综合考虑整个影响范围。.最后，关于行高，会出现很多奇怪的问题。比如在微软雅黑字体中，由于自带基线，微软雅黑字体本身显示在底部。而当我们将图标和文字混合在一起时，就会出现混乱。一起在评论区讨论吧。你如何处理这种情况？
