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

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

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

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

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

01.字体字形

可辨认性和可读性

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

衬线字体和非衬线字体

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

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

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.字体技术

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。

翻译：卡米雷特