排版（Typography）^[1]是个巨大的领域。即使人们投入毕生精力致力于这种古老的工艺，却总会有些新东西要学。本文中，我将重新审视一些当你为网站选择字体时应考虑的要点。

---

实用排版（Practical Typography）

当你设计某个网站时，你必须接受内容会发生变化的事实。在一个庞大的网站上，花时间对每个标题中的字母间距进行调整简直是不可能的。换言之，你须放弃某些控制。

我今天要关注的是实用排版（practical
typography）。对我而言，这意味着，要接受对于网站的版式你将永远无法拥有全部控制权。选择字体、决定字号，这些是作为设计师的我们拥有发言权的所有事情。实用排版意味着学习如何调整你可以控制的事情，并且更重要的是为什么要调整。

---

易读性（Readability）

你设置版式是要做什么？阅读它！那么，为什么那么多的网站要使得做到这一点如此TMD难？无论是很小的字号、拥挤的行高、或只是平淡无奇的丑陋字体，似乎很多网站都决心不让你享受它们的内容！

通过使得你的版式更易读，你立刻会超越至少半数竞争者，那真幸运，千真万确，因为这并不难！

字体（Typefaces）

当决定在你的网站上使用什么字体时，请千万牢记：别多想。我知道许多设计者讨厌使用Helvetica字体，因为该字体已被极度滥用。我同意这一点，但是这句话漏掉了一个非常重要重要的信息：为什么。人们之所以滥用Helvetica字体，是因为它太TMD好了。它适合几乎所有能想到的设计，在小字号和大字号下同样效果良好。

尽管以这种滥用的字体来设置你的版式可能会违背你的想法，但是如果可行的话，那么就试试看吧。

你的正文无疑是你的设计中需要最易读的一部分，所以一定要确保你选择一种在小字号下效果良好的字体。此话怎讲？如果你将你的正文字号设置为10px，而且你仍能辨认出其中内容，那么这是个好迹象表明你已经选择了一种易读的字体。

以上介绍了正文，而对于标题怎么办？

对于大标题的易读性要比正文更容易解决。如果你能够立刻辨认出它所说的内容，那么它的易读性就足够了。

关于什么良好的字体是指，一旦你做过做够多的项目以后，你将对什么可用和什么不可用拥有一个好主意。从那以后，你将更好地做出有关字体的关键选择。

对于为你的网站选择合适的字体而言没有公式可循。通常，决定某个字体的最好办法是尽可能尝试每种你认为可用的字体，然后进行比较。选择字体真的是靠直觉，但是请千万牢记，在百分之九十的时间里，用户不会考虑所使用的字体，因此如果易读，那么通常就足够了。

字体配对（Pairing）

（以前）很少有只有一种字体适于网站使用的情况。普通网站拥有大量文字。不可能一种字体对所有文字都有效！绝大多数设计完善的网站会使用两种字体：一种用于正文，而另一种用于标题。

当选择一对字体时，要考虑的最重要的事情是它们如何协同工作。“它们足够相似么？”“太相似了么？”“没有足够差异么？”这些都是你应该问自己的问题。我发现选择一对可用字体的最好办法是，只是把许多字体并排放在一起，进而决定最佳搭配。在你尝试所有字体配对以前，你是没有办法知道最佳搭配的。

有时，最佳字体配对是双sans-serif，而有时候，你希望对标题使用sans，而对正文使用serifs。它们是否外观相似并不重要，重要的是它们是否行为相似。这取决于你的设计的其余部分。无论你选择哪种字体都必须强烈传达你的信息，这是否意味着拥有一些对比鲜明的字体，那么就试试看吧。

Simon Collison在他的网站上非常好地使用了字体配对，选择粗体sans-serif用于主标题，普通的Serif用于其他更小的标题、以及正文。这种伙伴关系熟练地显示出网站力图表达的消息，而以每种单独字体的方式是无法表达的。

字号（Size）

作为一般规则，设计师喜欢将正文字号设置为至少12px。然而，大多数人会选择更大的尺寸，如14px，这使得易读性更好。除去开始变得复杂的标题，正文字号真的很容易决定。

标题应该多大？这要视情况而定。根据我的观察以及创建网站的经验，我已经得出结论，标题只应有它必须的那么大。这意味，你应该尝试不同尺寸直到你发现某个字号刚好大到足以引起你需要注意，但又不过大，除非巨大的文本是你所追求的，在这种情况下，尽管去做好了。

层次结构（Hierarchy）

标题的本质是大。它是页面上很重要的条目，那么它自然应该更大，对不？对也不对。对，标题一般大于其他元素；又不对，因为大字号不是引起读者关注它们的唯一方式。字体颜色、字体粗细、以及布局对于为你的页面建立明显的视觉层次结构都是同样重要的。

关于视觉层次结构要记住的重点是，它都是相对而言的。网站上的某些文字只须相对于网站上其他文字脱颖而出就行。以Wilson
Miner的站点为例。他的标题很小是为表明它们是多么的重要，而且字号出奇地接近。然而，他使用颜色区分最重要的标题，并赋予它们更多的含义。

使用版式对于建立视觉层次结构是非常重要的工具，可通过字号、字体颜色、字体粗细、甚至布局来实现。

行距（Leading）

行距或文本行之间的距离，对于清晰、易读的文本而言是一种宝贵的工具。糟糕的行距可以毁掉一篇在其他各方面很出色的文章，而合适的行距能让即便最糟糕的版式也看起来很易读。幸运地是，它实现起来并不复杂。

使用CSS的line-height属性，你能轻松指定正文行距。一般来说，对于大段文本，1.5倍字号是个不错的行距尺寸。较小的文字应具有更紧密的行距，而巨大的文本应具有很大的行距。这并不复杂，真的。

字距（Tracking）

字距是指文本中字符之间的距离。我承认，当谈及“实用排版”时，这一点是有些灰色地带的，因为在CSS中没有给予我们对于字距的很大控制权。通常，你不必担心小文本，只需关注那些已成为问题的标题。一般来说，在你的CSS中添加letter-spacing:
1px;或letter-spacing: 2px;就能获得足够的字符间距。

另一有益于增加字距的地方是小型大写字母（small-caps）。这里，在字符之间增加额外一个或两个像素被普遍认为是个优良实践，因为它们很容易显得更大。

字体颜色（Color）

尽管没有严格地讲排版，然而颜色对于每个网站的版式而言都是非常重要的部分。我不是在谈论配色方案（color schemes），而是谈论必要的对比度（the contrast）以确保你的站点易读性。白底（或浅底）黑字被普遍认为是最易读的文本颜色。

我并没有说你应该去把所有的内容都设置为白底黑字，只是为了说明当你进行设计时，你应该意识到你的文本对比度。如果你不小心对待的话，它可能会回过头来咬伤你。

栅格（The Grid）

依我看来，对于Web实用排版而言，使用栅格是最重要的思想。你能拥有极好的字体、间距、以及各种颜色，但是如果你没有优秀的布局，那么你不如使用comic sans字体算了。

当你设计版式时使用栅格是为你的设计提供一种清晰平衡的几何图形结构。它不是修复糟糕设计的魔法，但是如果你从一开始就是使用栅格进行设计，那么你可以确保至少你的布局将是坚实的。

那么对于排版而言必须对栅格做些什么？简而言之：一切。栅格体现了排版的所有基本理想。它是几何图形的、一致的、便于使用的，而且最重要的是：漂亮的。

使用栅格设置你的文本是一种建立视觉层次结构的重要途径，而且它对于表明你的文本应该有多大（或多小）是一个很棒的标识。

---

脱颖而出（Standing Out）

如前所述，如果你的排版是易读的，那么你就已经超越了至少半数竞争者，那么对于另一半又该做些什么呢？如果你已做到了这一步的话，那么让我们一起离开清晰、一致的易读性规则，然后进入无与伦比的阴暗神秘世界。

字体（Fonts）

你希望你的网站脱颖而出么？步骤1：使用一些独特的排版。想必你而言这意味着使用一些独特的字体。但是是什么造就了独特的字体？对于我来说，它不是一种不常用的字体，而是一种有信息或感觉表明未被其他网站使用的字体。

选择一种独特字体真的是凭感觉。是否感觉这种字体与众不同？或者它只是外观不同？当为任何项目选择字体时，你应该总是考虑设计感觉。由于这完全是个人的意见，我无法帮你找到一种独特的字体。我所能做的是展示一个独特字体的实例。

The Design Cubicle有一个非常独特的标识和设计。它的浓重而不失优雅，引人注目而不失微妙。当我看到它的设计时，优雅的感觉就从此网站散发出来。它说，“我知道我在做什么。”

离经叛道（Be Unorthodox）

你知道有多少网站的标识与其内容的尺寸一样大？使用一个极细的标题怎么样？不像我最后的观点，离经叛道的人就是看见其他人在做什么，然后反其道而行之。

那些在Savvy Belfast的家伙就很聪明。他们注意到大多数网站局促的样子，并决定用一句话来替换所有无意义的正文。

即使你只是片刻访问他们的网站，你也会不由自主地记住他们的名字。

与你的设计相匹配（Match Your Design）

排版不能自行其是。它是Web设计的一部分，就像任何其他部分一样。版式固然重要，但是你不应该忘记它只是让一个Web设计变得杰出的一部分。你应该用脑海里的其他设计来设计你的版式。

如果你使用一种非常精致的背景纹理，那么为你的标题选用漂亮的serif字体也许不错。

在这里我的观点很简单：不要忘记上下文（context）。设计是一个巨大的领域，而今天我只谈到了其中一部分。对于一个成功的网站设计而言，所有部件必须成功地啮合在一起。我们的目标是：为那些将会访问你网站的人打造用户体验。你不能只处理版式，或者只处理配色，甚至只处理内容！

情感版式（Emotional Type）

很多体验都是由你的感觉定义的：喜、怒、哀、乐等等。人类拥有广泛的情感，而作为设计师，我们的职责就是用我们的设计唤起这些情感。

在我今天讲的所有内容里，这个主题是到目前为止最抽象的，并且解释起来有点儿难。与其努力给你解释，不如让我为你展示。

当第一次访问Solid Giant时，我笑了。当第二次见到它时我又笑了，即便是第二次。立刻，对于该设计我感觉一见如故。那个大大的、毛茸茸的字母“G”太可爱了以至于无法忘却！

坦率地说，我认为真是天才。

情感设计（emotional design）是没办法教的，它是一些须要你亲身感受的东西，然后在你自己的设计中去把玩。

---

实用排版（Practical Typography）

很好，你已达到本文的结尾。我希望，至少你已学到一些东西，但如果一无所获，那也不要紧。如果有人认为在阅读本文以后我想留给你一些思考的话，综上所述：保持易读性（be readable）。其他人将会纷纷效仿。

你认为Web排版中最重要的部分是什么？请在评论中发表你的意见！

译注

[1] 排版（Typography），指以各种字体、大小和样式显示文本。

查看英文原文：Choosing the Right Font: A Practical Guide to Typography on the Web

---

版权信息

《选择合适字体：Web排版实用指南》由高翌翔创作，本作品采用知识共享署名-非商业性使用-相同方式共享 2.5 中国大陆许可协议进行许可。
基于webdesign.tutsplus.com上的作品创作。

iTran乐译

去iTran乐译参加活动，读好文章！