Web 字体知识指北

来源:设酷网     作者:日期:2020-08-28     浏览:160    评论:0    
  
核心提示:这是我前段时间给组内的设计师做的一次 UI 设计培训,针对的受众是由 UX 设计师转型为体验设计师(UX+UI)的同事。整个培训以帮助同事们快速掌握实际工作中所需的基础字体知识为目的,结合了公司(Shopee)的跨国业务特点进行讲解。现在分享出来(删除了一些 Shopee 内


这是我前段时间给组内的设计师做的一次 UI 设计培训,针对的受众是由 ux 设计师转型为体验设计师(ux+UI)的同事。整个培训以帮助同事们快速掌握实际工作中所需的基础字体知识为目的,结合了公司(Shopee)的跨国业务特点进行讲解。现在分享出来(删除了一些 Shopee 内部的内容),如果其他朋友也能从中有所获益,那就太好了。


前言:界面字体的重要作用

WEB 中的字体大体可以分成两种:美术字体和界面字体。美术字体主要服务于市场营销品牌宣传,界面字体则服务于信息呈现。今天我们主要了解界面字体


界面字体有三大作用:

  1. 信息呈现。将我们希望传达给用户的信息准确快速地呈现给用户,这是界面字体最重要的作用。

  2. 情感传递。不同的字体有着不同的视觉感受,营造出不同的情感体验

  3. 品牌塑造。每个品牌都有自己的气质和个性,字体同样如此,选择与品牌相符的字体作为界面字体,是品牌塑造的重要一环。




目录

接下来有三部分内容,第一部分我们先了解界面字体的基础知识,包括字体与语言、字号与字阶、行高与行间距、字重、字体颜色、字间距、段间距;第二部分归纳了(Shopee)设计师实际工作中会运用到的常用字体规则;第三部讲解一些延展知识作为"饭后甜点"。



0.1 基础知识



整个第一部分主要内容围绕 sketch 的字体设置面板展开,相信大家对它非常熟悉了。

字体与语言


首先我们需要为界面选择一款合适的字体。那么世界上有多少种字体呢?目前无论是中英文都没有一种业界公认的字体分类标准,各个字体公司、字体网站给出了不同的分类标准。最简单一种分类方式是衬线体(Serif Font)和非衬线体 (Sans Serif Font),顾名思义就是根据字体笔画末端有没有明显的装饰性细节(作用不只是装饰)作为划分依据。


实际上这种方式并不能涵盖所有字体类型,比如中文字体可以有宋体、仿宋、魏碑、黑体、楷体、隶书、图案体、书法体、手写体;英文可以有 scrIPt、Slab、Display、Blactletter、Non-Western 等。但是作为产品体验设计师,衬线、无衬线这种分类方式基本上就能满足实际工作需求了。



通常除了部分阅读类应用外,屏幕显示字体使用的是无衬线字体,衬线字体则在运营视觉设计和印刷物料中使用得比较多。这和屏幕显示的两个特点有关。


首先屏幕显示是由屏幕上的二极管发光照射到我们眼睛中,而日常生活中我们是通过物体反射光线来看到物体,相比之下浏览屏幕显示的内容比起看纸质书更容易让眼睛疲劳,所以屏幕显示字体需要通过减少一些细节来减轻用户眼睛的负担。


下面是中英文网页使用黑体、宋体、Sans Serif 和 script 的对比。可以发现无衬线体(黑体、Sans Serif)浏览起来更加轻松、高效。



然后,屏幕是由一个个像素点排列组成的,早期像素点比较大,像素密度底,导致衬线字体的笔画末端很难在屏幕上很好的呈现,并且复杂的笔画变化可能会导致模糊等问题。所以笔画干净利落的黑体(无衬线体)更适合屏幕显示。传统黑体体还保留了碑文、篆刻的喇叭口痕迹,而苹方等现代黑体更加简洁规整,显示效果更好。印刷品可以做到很高的印刷密度,所以可以使用更加优雅、美观的衬线体。


而且由于屏幕上会有很多小字号内容,现代黑体还调大了汉字中宫和字面,使小号字体内容显示更加清晰。对应到英文,就是将 X-geight 提高。


现在随着手机屏幕像素密度越来越高,方正字库等字体设计公司也在开发收紧中宫、缩小字面的黑体,和细节更丰盛的屏显宋体。但 PC 机的显示器并没有这么快升级,所以对于 WEB 设计来说,无衬线字体仍然是最佳选择。


左图来自《方正第二代中文屏显字体:悠黑家族》


中大型公司通常会有自己的品牌字体,所以实际上设计师字体选择上并没有太多自由。对于 Shopee 的设计师来说,用 Roboto 就完事啦。


这是是由 Google界面设计师 Christian Robertson 为android操作系统设计的一个无衬线字体家族,严谨的几何特征凸显现代感,而曲线与弧度又给它增添了人文气息。较大的 X-height 使得小字号的内容也能清晰呈现,算是一款不错的屏显英文字体



如果你们做的产品也有多语言适配的需求,那还需要注意不同语言呈现的效果。 Shopee 面向的主要市场主要有 8 种语言,涵盖了 3 种文字类型:拉丁字母型(英文、印尼文、菲律宾文、马来文、葡萄牙文)、密集型(中文)和高型(泰文和越南文)。相同的字体不同的文字类型,呈现效果可能会有非常大的差异,例如泰文的纵向高度比较大,可能需要更大的行高。




字号与字阶



字号描述的是字体的纵向高度的大小,而字阶是一系列有规律的不同尺寸的字号,用于区分主标题、副标题、正文、说明文字等不同层级的信息。


根据 Ant Design 的研究,基于电脑显示器阅读距离(50 cm)以及最佳阅读角度(0.3),14号字体能保证在多数常用显示器上的用户阅读效率最佳。这也是目前主流的 WEB 主字号。


此外 12、16、18、20、22、26、30 也是常用的字号。Chrome 浏览器不允许使用小于 12 号的字体,以免内容显示不清晰。


在设计字阶时需要注意两点,一是不要使用太多字号,否则将难以管理。二是相邻字阶要有足够的对比度,假如使用“12、13、14、15、16”作为字阶,那选择困难症将会伴随你一生。



利用不同字号使界面信息层级更加清晰。



行高与行间距



Web 中的行高可以理解成一个包裹着字体的无形盒子,通常比字号要大,多行文字行高一般是字号的1.2倍到2倍。行间距则是连续的两行文字之间的距离。现在主流的 Web 设计方式是只用行高,不用行间距,这更利于设计与还原。



行高是 Web 字体属性中最为复杂的一个,经历了三个发展阶段。


在活字印刷时代,工人通过在两行文字之间插入窄金属条来增加空隙,这就是行距。因为窄金属条是由铅(lead)制成的,所以行距就叫做 leading。


此时,整行文字的行高(line height)= 字号(font size)+ 行距(leading)



然后电脑诞生了,早期电脑设计排版软件(InDesign、PS等)继承了活字印刷时代的习惯并进行演变。


继承指的是,此时增加行间距仍是通过在文字下方增加空间来实现。


演变指的是,电脑时代的字体不再具有唯一的物理尺寸,它们的默认行高由设计师自由定义,相同字号的不同字体在视觉上面积可能相差非常大。并且窄金属条(lead)消失了,“行距 leading”逐渐被“行间距 line spacing”代替。


这时,行高等于行间距(line spacing ),英文行高通常指连续的两行文字的基线间的距离,中文行高通常指连续的两行文字的底线间的距离。



到了 Web 时代,行高发生了重大变化。


之前提到,电脑时代字体的默认行高由设计师自由定义,所以同样的字号可能会有不同的行高,所以为了能够加快 Web 渲染速度,Web 开发语言设计者们将字体的默认行高(the 100% line height)定义成与字号(font size)相等。


同时,如果还是只通过在文字下方增加空间来增加行高,会使给文本增加背景或者边框时出现问题。Web 早期开发者的原话是 "But the problem I had with adding leading only below the lines was what hAPPened to a pARagraph when you put a background behind it or a border ARound it.”。


此外,早期 css 不支持垂直居中对齐,这使得“左边 ICON、右边文本”这种现在常见的组合形式很难实现。


基于这三个原因, Web 时代出现了半行距高(Half Leading)这个概念,就是增加行高时将会在文字的上下都增加空间。半行距高 = (行高-字号)/ 2。


此时,行高(Line Height)= 字号(Font Size)+ 半行距高(Half Leading)


目前,sketchFigma 采用的都是这种行高定义。



下图左边是在文本下方增加行高的方式,右边是在文本上下都增加行高的方式。可以通过 Figma 提供的这个网站 https://AResluna.org/line-height-playground/ 更直观的了解其中差异。



了解行高的定义后,我们应该怎么设计字体的行高呢?


常见的一种方式是,行高与字号一一对应,字号越大,行高与字号的比值越接近 1。比如 Ant Design 采用的就是行高(Line Height)= 字号(Font Size)+ 8。20px 行高与 12 字号的比值是1.66,76px 行高与 68 字号的比值是1.11。这种设计方式的考虑是,小字号时需要比例更大的行高保证阅读的流畅性,大字号时减少两行文字之间的空间,避免阅读被中断。


另一种方式是不同字号都采用固定的倍率。比如 Shopee PCMall 和 Enterprise Product 都是使用固定的 1.5 倍,即行高(Line Height)= 字号(Font Size)x 1.5。这样的好处是方便统一和开发还原设计稿


部分设计师还会为单行文本和多行文本设计不同的行高,多行文本为了阅读的流畅性会设计更大的行高,而单行文本可以用较小的行高来节省纵向空间。



过矮或过高的行高都不利于用户浏览。假如是需要多语言适配的多行文本设置 1.3-1.5 倍的行高是相对保险的。


严谨的说,相同字号和行高下,不同语言文字呈现的视觉密度是不一样的,中文这类方块文字会比拉丁字母文字显得更密集。但是在跨语言的网页设计中为了高效开发,一般都是同一行高,而不会区别处理。



对于 Shopee 设计师来说,如果是多行文本,一定要注意高型文字(如泰文或者越南文)的行高不能太小,否者会出现连续的两行文字出现重叠,或者部分文字被截断的情况。建议多行文字行高设置为 1.5 倍 。



还有一点需要注意的是,设计师应该养成使用设计好的行高,而不是默认行高的习惯,并且将行高规则和开发进行同步,保证还原度和还原效率。在标注文字和其他元素的间距时,要从行高而不是文字的边缘像素算起,否则还原时会有误差。



字重



字重描述的是字体的笔画粗细,比较全的字体有 9 种字重,但是涵盖 9 种字重的字体比较少,Helvetica、Roboto 这些使用范围很广的字体都没有那么多字重,大多数字体只有 4-6 种字重。


Web 设计中最常使用 400(RegulAR 通常用于正文、次要文本及辅助文本)、500(Medium 通常用于标题)、700(Bold 通常用于大标题)。


css 没有 Medium 属性,多用 500 或者 600 来实现,具体要看设计师和开发的约定。


在 Web 中,400 和 500 是两个字重节点,下面引用 Tingglelaoo 的说法:


“如果指定的font-weight数值,即所需的字重,能够在字体中找到对应的字重,那么就匹配为该对应的字重。否则,使用下面的规则来查找所需的字重并渲染:

  • 如果所需的字重小于400,则首先降序检查小于所需字重的各个字重,如仍然没有,则升序检查大于所需字重的各字重,直到找到匹配的字重。

  • 如果所需的字重大于500,则首先升序检查大于所需字重的各字重,之后降序检查小于所需字重的各字重,直到找到匹配的字重。

  • 如果所需的字重是400,那么会优先匹配500对应的字重,如仍没有,那么执行第一条所需字重小于400的规则。

  • 如果所需的字重是500,则优先匹配400对应的字重,如仍没有,那么执行第一条所需字重小于400的规则。”


也就是说,400、500 是用户最有可能看到的字重。


总之,尽量使用 400、500、700 这一保险的字重组合。



下图右边用不同的字重将信息层级区分得更清晰。



字体颜色



顾名思义描述的是字体的色值,通常包含:内容文字颜色 + 功能文字颜色。内容文字指的是标题、正文、辅助文字等,而功能文字指的是可点击的文字链、文字按钮Tab 文字。


内容文字颜色有三种常见的定义方式:

  1. 采用中性的黑白灰颜色,大部分产品用这种方式;

  2. 采用品牌色延展出来的饱和度比较低的色彩,比如微众银行,这样可以增强品牌形象的传递;

  3. 采用不同不透明度的#000000,比如 87% 用于标题,54% 用于次级文字等,这样能够使文字和背景色融合更加好。


设计字体颜色有两个需要注意的点,一是内容文字颜色建议使用易于记忆的色值,比如 #333333、#666666、#999999;二是正文颜色与背景要符合 AAA 级对比,即 7:1,可以通过这个网站(https://contrast-ratio.com/)检验 



下图右边通过不同的色彩更好地区分了信息层级



字间距



字间距描述的是字符之间的空隙,它会影响文本行或文本块的密度。虽然 sketch 中字间距调整的是每个字符的间距,但从界面设计的实际场景考虑,中文字间距调整的是字与字的间距,英文应该要调整词与词的间距。


相同字间距数值,不同字体,看起来可能会有很大差异。而我们用户设备上的字体多种多样,所以通常在界面设计中直接使用默认字间距,在营销视觉设计中会调整字间距来打造浏览节奏。


多行文本中字间距一定要小于行间距,否则用户将对阅读方向感到困惑。通常字号越小字间距越大,字号越大字间距越小。



段间距



段间距描述的是连续的两段文本的间距,一般不会在设计规范中定义段间距,而是根据间距规范和实际场景进行判断。


段间距与我们刚刚提到的行间距、字间距的关系是:段间距 > 行间距 > 字间距。



要注意在有标题的场景,文本与标题的间距应当大于段间距



02 常用规则



在第一部分我们讲了很多的字体知识,但是我们实际工作中能用到的非常有限,主要是:

  1. 无衬线字体,品牌字体(对 Shopee 设计师来说就是 Roboto);

  2. 主字号为 14,其他常用字号是 12、16、18、20、22、26、30;

  3. 常用字重是400 (RegulAR)、500(Medium)、700(Bold);

  4. 常用字体色彩是 “#333333、#666666、#999999”+功能文字颜色



这些规则汇集起来就是设计规范里面的字体规范。



图片来自网络


搭建字体组件可以大大提高工作效率,关于具体如何操作我推荐这篇文章《完美」的字体系统搭建与维护指南》https://zhuanlan.zhihu.com/p/33925661






03 延展知识



字族

因为汉字字体有成千上万个字,字体文件比较大,所以 Web 通常都是调用用户设备已有的字体,而不是让用户从网站的服务器下载字体。而用户电脑可能没有我们的品牌字体。


当浏览器没有找到声明的字体时,会使用默认字体,为了让字体显示更接近预期,通常会选择一系列字体作为字族(Font Family),浏览器会按照先后顺序去匹配字体;设计之初最好选择 Web 安全字体作为主字体,关于 Web 安全字体可以通过这个网站了解(https://www.cssfontstack.com/)



数字

因为等宽数字更利于金额等信息的纵向对比,所以等宽数字成为了一种趋势


Helvetica 的数字并非等宽字体,所以同样是 9 位数字,1,111,111.11 看起来比 9,999,999.99 要少一位。而升级后的 Helvetica Neue 的数字则是等宽的,这样数字对比更容易。


Ant Design 单独将数字的字体 font-vARiant-numeric 设置为 TabulAR-nums,使其为等宽字体



多语言适配

除了之前说的不同语言文字的行高问题,多语言适配还有很多需要注意的地方,之前我有在 Shopee SZ 的设计中心做过相关分享,后续有机会我再整理发出来。



中文、英文、数字混排

同等字号下,数字和英文显得比中文小一些,有条件的话应该进行调整。


中文和英文、数字混排时,应该在中文和英文间,中文和数字间加间距。从 iOS 13 开始,iPhone 的输入法会自动加入这个间距。



残酷的现实

由于操作系统或者浏览器的渲染引擎、排版引擎不同,或者同一渲染器的渲染策略不同,同一字体呈现效果可能会有所差异,好在普通用户看不出来。


图片来自《Web 字体应用最佳实践之道(上)》


在撰写这篇分享时,我查看了大量参考资料,列出一些,大家感兴趣的话可以了解一下。


  1. 《Getting to the bottom of line height in Figma

  2. 《一席:朱志伟《字体的力量》》

  3. 《屏幕上的字体 原来是这样设计出来的》

  4. 《方正第二代中文屏显字体:悠黑家族》

  5. 《深入了解font-weight》

  6. 《全网最全-关于ui设计中字体应用的干货》

  7. 《深入理解css中的行高与基线》

  8. 《Web 字体应用最佳实践之道》



本文来源:Web 字体知识指北    http://www.sjschina.com/archives/21298.html
相关评论