用普世适用的字体,抓住所有用户

如何使用字体,才能不因此造成用户流失?

web typography - operation, design - 用普世适用的字体,抓住所有用户

响应式设计和无障碍网页设计已经存在一段时间了,更多新的浏览模式被推向客户端。在这种情况下,正确的字体选择尤为重要。

无障碍字体的选择和使用和代码的优化等,在网络上有大量方法可供选择,但他们都指向明确的核心:提升内容的可读性。

网站Fontsmith和Mencap共同合作,设计并测试各类字体的可读效果,甚至邀请残疾人士帮助测试。这里是他们的一些成果。

 

01.字体字形

可辨认性和可读性

可辨认性指的是:你可以看出这是一个字母还是一个单词吗?你可以理解和解释某个单词吗?而可读性指的是:阅读的体验如何,顺畅吗?无障碍的字体选择,要求在可辨认性和可读性上都有良好的表现。

衬线字体和非衬线字体

我们和Mencap的研究表明,非衬线字体在阅读时是最友好的。使用衬线字体的信件等大量文字,会因为字体复杂的细节而变得难以阅读。

非衬线字体的结构更简单,和标准的手写字体更详尽。而等线字体则更清晰,在低分辨率和低品质图像上可识别性更强。

69689932 - operation, design - 用普世适用的字体,抓住所有用户

Fontsmith的FS Unititled字体明确区分了字母I和数字1

字母形状

使用字母具有明显特征的字体可以有助于阅读。具有视觉障碍的人会认为有些字体让人困惑,所以最重要的是选择特征鲜明的字体。常见的视觉障碍难以区分的例子有:答谢字母I、小写字母i和数字1,字母C和字母O。

界限明确的字母形状有利于阅读。比如字母r和n的组合,可能在某些字体中像是字母m。笔划的起伏也非常重要,他们可以帮助眼睛快速扫描、定位和解读。

字母比例

较大的x-height和宽度适中的比例对可读性是最友好的。较大大x-height可以在字母内创造更多空白,使得字母更清晰明确。在响应式设计中,压缩内容和改变宽度是一种流畅的处理方式,但需要注意的是压缩字体间距等方式也会降低可读性。

(译者注:x-height是英文字体专有概念,即小写字母x的高度,即分割小写字母上下两部分的基准线高度。如字母h,右侧的拱形高度和字母x的高度一般,大部分字体都会遵循这个设计原则。)

微调(Hinting)

微调信息描述了字母在放缩时,应该启用或关闭哪些像素,是一种优化方式。尽管屏幕分辨率越来越高,微调仍旧是需要和注意的部分。大多数系统内置了微调系统,效果往往很好,但类似12像素的字体大小,即使没有微调系统也能表现地很优秀。

 

02.字体使用

字重

通过分配字体的角色来建立文章的层次,有层次的内容可以让读者更好地吸收信息。一般在副标题和正文中使用中等字重的字体,而标题使用较重的字体。你需要在多个浏览器上进行测试,不同浏览环节会对字重产生很大影响。如果需要,可以使用插件进行混合渲染。

尺寸

尺寸是很重要的,要注意到每个字体在相同的字号上大小是不同的,实际尺寸可能有很明显的差异。一个字体的14px,可能相当于另一个字体的18px。正文中一般使用的字号在14px到16px之间。通常来说,16号以上的字体在阅读上更加友好。字体大小可以被渲染质量影响,您可以在作品主要的呈现平台上测试,以选择出最佳的字号。

行高字距和行宽

给文字呼吸的空间,只有在文字有足够的间隙时,你的眼睛才能将它们按字母或行区别开来。网站内容可用性指南(WCAG)建议使用1.5倍行距,你可以视需要增加或减少它。较长的一行文字对眼睛阅读能力提出了较高的要求。研究表明,网络的平均段长约为70-80个字符(半角字符),大约是16个英文单词。

颜色

和其他视觉元素一样,字体需要有足够的对比度。白色背景上,灰度不足或字重过轻的灰色字体将很难阅读。Fontsmith的FS Untitled字体有很多级别的字重,可以帮助用户调整出最佳的外观。额在较暗的背景下使用白色字体时,会让字体看起来更亮并锐度更高,一些字体可能会因此需要调整字距。

 

03.字体技术

30003551 - operation, design - 用普世适用的字体,抓住所有用户

Fontsmith的FS Untitled字体有多种字重

字体加载策略

在低网速下,较大的字体文件会拖延加载速度。常见的完整WOFF英文字体文件,一般在36-50KB之间。你需要考虑使用FOUT或FOIT方式。FOIT更美观,是浏览器的默认策略。而FOUT性能更高。

(译者注:FOUT指的是网页字体在可以切换到原有字体前,使用默认字体或备用字体临时替代;FOIT指的是在网页加载完字体前,使用这种字体的文字均不显示。)

备用字体

在手机等终端中,可选字体是优先的。Moore的移动端备选字体列表就说明了这个问题。当你选择备选字体时,尽量选择字重和比例与原来相近的字体,这样就可以通过调整备选字体来匹配你的当前字体。你可以通过将原有字体和备用字体重叠,来观察备用字体的效果。

文本渲染

通过对optimiseLegibility进行调整,可以优化字距并提升渲染质量。你还可以通过下面的代码启用连字设置:

.classname { font-feature-settings: "liga" 0; } 

保护字体

开发高质量字体的成本高昂,你应该保护在网络项目中使用的字体文件。你可以使用CORS来部署字体文件,确保只有白名单的用户可以访问它们。

 

我们的目标是让字体有尽可能高的可读性。我们与标志设计和环保团队合作,创建了21世纪的尝试性字体FS Millbank,旨在引领混乱的字体环境。而FS Untitled是我们为了创建更易读的网页开发的,它帮助我们确保对所有访客来说,字体和排版都是友好的。

 

来自Creativebloq电子杂志第286期,作者Phil Garnham。

翻译:卡米雷特

微信打赏支付宝打赏

感谢您的支持!

文章来源:卡米雷特的小站www.kamilet.cn)转载请注明出处。

卡米雷特

视觉控&技术控,不断学习中!

您可能还喜欢...

发表评论

电子邮件地址不会被公开。 必填项已用*标注