- 原文链接 : 用户界面中的排版
- 译文出自 : 掘金翻译计划
- 译者 : circlelove
- 校对者:ruixi，wild-flame
回想2004年，在我刚入行的时候，sIFR 是最火的东西。它是由Shaun Inman公司开发的，其自定义字体嵌入在一个小小的 flash 动画里，它可以用在一些 JavaScript 和 CSS 中。那时候，它基本上就是Firefox 或 Safari浏览器自定义字体的唯一选择。事实上，随着 iPhone （不支持 Flash ）的发布，该技术对于 Flash 的依赖使它很快就过时了。
编辑代码写我们的界面，文本界面和排版布局是我们主要的要求对象。
2008年，各大浏览器终于开始支持新的 CSS3 @font-face rule。 它早就在1998年的 CSS 规范中出现了，但是后来被单独拉了出来。我记得当我设法说服我们的一位客户使用新的@字体-表情以及依赖progressive enhancement 为已经支持该功能的浏览器提供强化体验时候的兴奋。
从我在这个行业以来，我已经逐渐开始喜欢类型和进入设置它的所有细节。在这篇文章中，我要分享一些我学到的基础知识，并希望帮助您更好地为用户界面设置类型。
第一个 GUI #
尽管排版的历史可以追溯到大概五千多年，我们的图形用户界面只有四十年的发展。一个关键转折点在1973年，当 Xerox 引入了 Alto，它从本质上创建了我们现代图形用户界面的基础。Alto 比其他 GUI 早十年踏入市场，被视为计算机的未来。
80年代早期开发的Alto 进展为 Xerox Star 成为首个带有 GUI 的商业化操作系统。
尽管Alto 和 Star 都没有实现突破，它们对于未来出现的[苹果(www.apple.com/) 和 微软 变革性的鼠标驱动 GUI 影响巨大。几年之后，在1984年，Steve Jobs 带来了第一个 Mac OS.
Macintosh 的发布意味着用户排版对于大众来说有史以来第一次变得触手可及。初代Mac预装了很多 图标字体，在接下来几年里面，许多字体工厂开始设计发行他们的数字版本的流行字体。
更细致地检查早期的图形用户界面，我们意识到它们多数的元素是书面语。这些 GUIs 是彻底的纯文本 ——— 独立词组的罗列集合。
我们也可以对现代的界面进行一个类似的调查。编辑代码写我们的界面，文本界面和排版布局是我们主要的要求对象
文本即界面#[#]
界面的每个字词都十分重要。好的书写造就好的设计。文本是核心的界面，是我们这些设计文案的设计师造就了这种信息。
看看下面的图像案例，想象着在你前面的桌子上分解元素。观察剩下了什么。几个单词，两个图片和几个图表的集合。
我们的工作不是把屏幕上杂乱无章的东西让它们看起来可心，而是从最重要的复制和内容开始，再从中绘制细节。那是我们草图的核心所在。
字形的清晰也十分关键。开始可能感觉它没那么重要，尤其是在我们的大脑只需要稍微楞个神来辨认字形的时候。但是复杂情况下，出现各种字母组合的时候，排版的重要性就体现出来了。
当然，还有更多的界面设计细节需要注意；例如平衡，布局，层次和结构.，但良好的文案和排版
的重要性占95%.
“伟大的设计师知道如何用文本而不是内容工作，他将文本视作用户界面.”
– Oliver Reichenstein
怎样阅读#
如果我们放在屏幕上的文字如此重要，那么我们应该花些时间研究我们如何阅读以及它如何影响我们的设计。
少于20字的单词读起来比小单词组成的长句子更慢
一个重要的发现让我回归的就是阅读Billy Whited’s 文章 为用户界面设置书写, 我们这样阅读是否是最高效的。这意味着单个单词少于20字的单词读起来比小单词组成的长句子更慢
事实上，当我们阅读长句子的时候，眼睛扫过的地方并不是以一种光滑的路线走的。相反，它们会跳跃，这称作
扫视提高我们的阅读能力让我们完全跳过少量意义不大的词语。这是要注意的一个关键因素，因为我们的界面大部分含有独立的词语。本质上讲，我们根本无法依赖扫视。
最后，理解 确定了独立单词在阅读过程中的最重要的地位，我们的字体选择如何重要就显而易见了。
过去，许多人认为我们通过所谓的Bouma shape理解词语意思，或者词语的外形。在 后来 研究 这 被证明是有错误的，可读性和字体的易读性不应该仅仅通过生成好的 Bouma shape 来判定。想法，我们要更多地关注字体形式。
字母的可读性来自什么?#
乍一看似乎这个问题很难或者根本无法回答。因为阅读是一种习惯，读的最多的东西读得好。那我们如何衡量怎样的特征使字母更易读呢？为了开始理解这个，我们首先需要把句子破成词组，词组破成字母，字母破成更小的我们能注意到的细节部分。
2008年， 维多利亚大学 did empirical tests 心理系解释了小写字母和大写拉丁字母是阅读最高效的部分。
该研究解释了不少有意思的东西。首先，它说明了线条端点是确认字母极为重要的部分。
上面的图表示认知字母的时候那些区域关注度最高。这些字体的这些部分应该做的既普通又能强调字母的区分度。
2010年 Sofie Beier 和 Kevin Larson,另一项研究,关注的是字母被误认的变化和频率。
研究发现一些衍生版本比其他的更易读，尽管字体里面带有类似的大小、高度和个性化。结果显示较窄的字母稍宽一些更容易被接受， x -字高 有了 升部 比 降部更容易辨识。
](利用近期项目中我构建的工具我们可以了解到更多关于给定字体易读性的信息。Legibility App 让你可以通过引入各种滤镜模拟不同的 (often harsh) 视图状况–例如 模糊、滤镜、像素画化。这个 app 还处在测试版，今后将用在Chrome](www.google.com/chrome/brow…), Opera 和 Safari上.
在 UI 界面找什么?#
理解了我们的阅读方式和字母易读的特征使我们对于选择合适的 UI 界面有了一个整体的了解。下面是我收集的10点建议。
1. 易读性#
易读性是要考虑的首要因素。字母形式要清晰可辨。可辨的字母形式在用户界面元素中效果更好。[5] 许多无衬线字体 包括 Helvetica, 其大写的I和小写的l无法分辨，使得它们不适合作为用户界面。
。
Source Sans Pro字体 在左，Helvetica 字体在右。Helvetica 字体的前三个字母几乎无法辨认。Source Sans Pro 字体就显得相当不错。有些人认为 Helvetica在任何的 UI 作字体都糟透了，因为它不是为了屏幕而设计的。
Helvetica 糟透了。它不是为了屏幕上的小字设计的. 像 ‘milliliter’就很难辨认.”
– Erik Spiekermann
当苹果 “短促地” 改用 Helvetica 作为他们主要的界面字体的时候，导致了相当的易用和易读性讨论。最后，这也是苹果设计我们熟知的San Francisco字体的原因。
图片来源: Thomas Byttebier
2. 朴素#
理想的 UI 界面并不扎眼，甚至不起眼。当用户完成他们的任务的时候，你选择的字体应该在他们的考虑之外，只让用户关注到文字的内容而无需费力辨认字体。
3. 灵活性#
一个 UI 字体需要有灵活性.我们为媒介设计体验,不可能控制用户的能力、内容、浏览器、屏幕尺寸、链接速度甚至输入法。
我们选择的字体应该适应相当多的语境，在不同尺寸、设备中运行良好，尤其是小屏幕的状态下。无衬线字体的设计就是为了小尺寸解决方案被引用了[5]。
4. 大 x-height#
X-height 意思是小写字母 “x” 的高度。你想看大号字体 x-height 因为读起来比小写的更加舒服。不过别走太远，因为太大的 x-height 下，字母 n and h 就难以区分了
5.宽比例#
比例指的是字符的宽高比。你想要找到较宽比例的字体，因为它的易读性好，适合屏幕上的小字阅读。
图片来源: Adobe Acumin
6.松散字母间距 #
重要原则就是字母的间距要比字体当中字母内间距小一些。
字母的间距是十分重要的空间。字母靠得太近影响阅读。一个好的 UI 字体应该在两个字母当中留下喘息的空间，也是为了创造一个平稳的节奏。
另一方面，如果你留下太多空间，就会破坏单词的完整性。重要原则就是字母的间距要比字体当中字母内间距小一些。
7. 小的笔画对比#
好的 UI 字体笔画对比较小。高对比的字体，在字号较大的时候看起来不错，可是对于屏幕上的小字来说，细笔画就容易消失了。另一方面，我们有Arial 还有Helvetica的字体，相当小的笔画对比让字母辨析变得困难。
一些都是为了寻找二者平衡。想像你在地平线上，你想找些更多的东西。
8. 字体特征#
确认你选定字体支持OpenType 特征 是非常重要的，因为它提供了更多的灵活性。通常包括对不同语言和 特殊字符的支持。
对我而言，最有用的 Opentype 字体特征是tabular figures，它是数字的，带有相同的宽度。或许做计时器的时候你会想要用到它，或者做 IP 显示表盘的时候用用会不错。
图片来源: Fontblog
9. 备用字体#
下面是一种大家都非常熟悉的场景。在实际内容下载显示完全之前，web 字体 阻碍了这个过程。
图片来源: Filament Group
通过在无障碍的方式下载字体，这可以轻松地调节，大幅度消减了内容加载时间。缺点是自定义字体加载的时候，我们需要从 默认系统字体中定义备用字体。
图片来源: Filament Group
10. 字体微调#
字体微调是字体适应屏幕可读的最大化的一个过程。 Hinting
尝试通过提供一系列不同尺寸下的指南使得向量曲线更好地适应像素网格。对于低分辨率屏幕实现清晰易读来说至关重要。
微调最初是苹果公司创造的，但是自从 TrueType font format这种被称作“微调”的淡出，我目前认为你只有在支持IE8 或需要 TTF 或EOT format的更低版本浏览器的时候会用到。
图片来源: Typotheque
前景#
对我们来说这是一个相对较短的旅程，我期待看到 web 字体的行为、typographic tools 成熟化、以及 font formats 个性和我们对于字体的使用方面有更多的进展，
归根结底，好的字体能给每个人带来生产力，它甚至可以 拯救你.
我想象这我们可以看到更多的革新 体验，文字本身的意义比我们所建议的字体设置更为重要[6]。它本质上是事物如何在 web 上运行，但我们才刚刚开始认真对待这个事情。
理想的排版，我们同样需要尽可能多地了解用户的阅读界面。这似乎是理所当然的，但并非如此[7] 。今后的字体对于周边的了解会使它开始对其他因素做出响应，例如 视窗、分辨率、类渲染引擎 used、 背景光线、屏幕亮度 甚至是 视物距离。
我还预测到字体的易读性调整会最终和系统辅助功能选项想联系，字体就可以自动适应不同用户的需要。
总之，我预见 UI 排版的未来就是一切传感器和字体格式可以对已知数据进行相应，最终是有情境认知、对我们的工作流集成了更多的智能算法的新的排版工具 。
所有的一切就是我们可以配合字体对处理的上下文进行更好的响应。
图片来源: Luke Wroblewski
为了减少工作……
图片来源: Samsung GearVR
…让我们的界面更快捷…
图片来源: MozVR
…更方便…
图片来源: Callan & Co
…最终更易读、高效…
图片来源: Microsoft Hololens
…因为本质上讲，好的排版是为了方便人们的，他甚至可以 拯救你的人生. ❦
