度量对比度

在版式设计中，对比度是一个灵活且强大的武器。它的存在和影响常常会被读者忽视，但是它的缺失，却可以毁掉一个网站。来自 Standardistas 的 Christopher Murphy 在研究了大量的技术之后写了一系列的文章，希望可以帮你设计出非常和谐的对比度。

排版规模。©vanseodesign.com

通过对比度可以让文章的层次更分明，突出重点内容，显示内容的关联性和重要性，帮助读者更直观的控制阅读速度。

你可以通过这步来创建对比度：

• 层级
• 粗细
• 权重
• 装箱
• 颜色

单独使用其中的一个都足以让对比明显，但是组合好的的话效果会更加明显。你可以把每一个都当做是酒吧里的美酒，在一些富有经验的调酒师的调剂下，适当的运用，可以调出令人陶醉的鸡尾酒。但是过分的使用则会产生相反的效果，就像酒吧最美的时刻实在夜幕降临时。总之一句话：适可而止。

首先我会把重点放在规模上，并列举出一些在大小控制上非常出色的网站。

什么是规模（Scale）？

这里的规模是指字体取值大小的区间；更多是指不同层级的取值间隔，通过一定的范围来控制对比，以此来达到和谐的状态。

通过对规模的设置，你可以：

• 控制读者阅读的速度
• 引导读者正确的浏览页面
• 更加明确的层次有助于读者理解内容与内容之间的联系

下图就是传说中的报纸大师。我们在平时上班的路上捡了这份报纸，呈现在我们眼前的是互相联系在一起的复杂内容，我们能够正确的识别报纸的内容很大程度上取决于内容的规模分布。对于大小相近，位置相近的内容，我们可以很快明白其中的联系。之所以我们会首先被报纸顶部的每日头条（Day’s Top Stories）所吸引，是因为这些内容都是经过精心排布的。

*
小心谨慎的使用排版规模，控制读者的阅读速度，通过建立一些指引来让读者可以清晰文章的主次结构。*

这是一个来自《卫报》的例子。我们的眼球首先被听不的大标题所吸引（School’s out…），然后我们会看到一些故事的要点（Student protests…、Isolated breakouts…）。首先是不同的文本大小，从大（标题）到中（的项目符号吸引了读者的眼球），再到小（文章本身）——我们可以看到他们是如何使用不同的规模来控制读者眼睛的注意力的。

如果我们从宏观上来看这篇文章，我们可以对页面的结构会更加清晰。最上层的（School’s out…）和下面层次较低的结构（Could Belgium be next?…），通过规模的控制来暗示出了这两者之间的一些联系。

从文本的大小开始

文本大小之所以如此重要有两个原因。首先你的网站中的

元素会比其他任何元素都多，所以你必须谨慎的对待文本。此外，最好是其他所有元素的文本大小都基于

元素。而对于

元素大小的设计，有很多的影响因素，这里有几点是需要注意的：

用户需求

在你确定基本的大小的时候，你需要考虑到你的目标用户，你确保你的设计是合理的。他们可能会喜欢什么？他们可能会需要什么？

*
针对年轻人的设计中，字体可以较小并且可以忽略一些可读性的准则。比如在*Moshi Monsters中，虽然使用小型的大写字母降低了文本的可读性，但是却恰恰体现出了其中的“设计感”。

比如说，在针对老年人和儿童的设计中，前者可能需要更大的字体，而后者则可以更加细小一点。

阅读距离 & 文本长度

可能在一个 27 英寸的显示器上阅读，你会距离两英尺远，但并不意味着所有人都距离这么远。所以应该兼顾各种情况，用户在使用过程中对于文本的大小也是比较敏感的。在 Craig Mod 的一篇名为《更简洁的页面》的文章中，他探讨了关于阅读距离的问题，并涉及到平板电脑以及电子阅读器。是一篇令人深思的还是文章。

同样，你还要考虑文本的长度，你的设计对象是一个很多内容（书籍或者杂志）还是只是一些简短的内容。对于前者，你应该确保

元素的文本尺寸必须保证用户不会过早的疲劳而放弃阅读。Marth Rotter 今年早些时候在她的 Smashing Magazine 上详细的讲解了关于长文本的设计问题。她提醒说，测试最重要的是有效性和适宜性：

想要知道怎样会更好，你需要做一些测试。对于用户，可以使用 A/B 测试，或者在你的团队中进行测试。给出一段较长的文本来让你的队友进行阅读，如果他们无法阅读完成，那么尝试使用不同的字间距和字号。

排版规模必须要经得起考验

在 16 世纪，版式设计师就创造出了一种标题和正文之间的平衡。而在建立一种以

元素为基准的规模中，你需要做一些数学运算。标题，小标题，正文以及引用，不同的元素之间存在着一定的关系。如果你厌倦了无休止的计算，你可以使用一些现成的参考。

比如说，在 16 世纪（今天已然被广泛使用）的排版规模通常被当前的技术所限制（每个字母按照不同的尺寸和字重被印在单独的金属模块上），所以排版规模一般是这样的：6、7、8、9、10、11、12、14、16、18、21、24、26、48、60、72。我们可以以此为参考来建立一套正文和标题之间的规模关系：

body {font-size: 100%}
h1 { font-size: 2.25em; /* 16 x 2.25 = 36 / }
h2 { font-size: 1.5em; / 16 x 1.5 = 24 / }
h3 { font-size: 1.125em; / 16 x 1.125 = 18 / }
h4 { font-size: 0.875em; / 16 x 0.875 = 14 / }
p { font-size: 0.75em; / 16 x 0.75 = 12 */ }

当然，我们未必一点要按照 16 世纪的比例来做，毕竟和金属的打印机比起来，屏幕的限制是很小的，因此我们可以来探索其他的尺寸。

Jon Tan 在一篇名为《网络字体——80% 的科学和 20% 的艺术》的文章中，构建了一种以斐波那契数列组成的规模关系，后一个值得大小为前两个的和，比如：16、24、40、64 这样。

body { font-size: 100%; }
h1 { font-size: 4em; /* 16 x 4 = 64 / }
h2 { font-size: 2.5em; / 16 x 2.5 = 40 / }
h3 { font-size: 1.5em; / 16 x 1.5 = 24 / }
p { font-size: 1em; / 16 x 1 = 16 */ }

结果是令人兴奋的，正如 Tan 所说，这样结果来自于科学和艺术的结合。Alex Charchar 对于排版规模也有很多个人的研究，我推荐你有空去思考一下他的看法。

关注比例

感谢计算机，现在我们可以设置任意字号，以便定制我们独特的尺寸。我没有必要说一定要按照先辈们留下来的规范，也不一定要去追随潮流。这种自由就像是吃自助餐一样，不需要约束。《版式设计元素（ The Elements of Typographic Style）》 （每个伟大版式设计师都应该去看）中，Bringhurst 指出：

在十六世纪，版式设计师通常会开发一系列的字体尺寸，400 年间，最终留存下来的都是一些变化很小的版本…… 使用旧式的版式规模或者自己设计的，但是都要又所节制，一开始，尽量对于间隔的调整需要谨慎执行。

限制你的排版规模可以大大改善版式的效果。相较于比较随意的排版规模，比例的存在会让间隔显得一直，在排版规模上看起来更加和谐。这就是数学的魅力。

有些比例天生就讨人喜欢。你应该知道黄金比例（也就是黄金分割），从一些古建筑和自然界不难发现这种 1.618 的比例。

正如 Tim Brown 在他的《更有意义的排版（More Meaningful Typography）》中所说的：

黄金分割和其他有意义的比例根植于几何形状，音乐，自然界以及历史中，他们可以作为模式化的排版规模应用在网页设计中。

用黄金比例作为排版的基础，你可以生成一个模式化的规模，然后通过乘/除以 1.618 来确定上/下一级的尺寸。这样便会得到一套和谐的排版规模。

我们以此来作为一个基础，首先我们设置 body 的字号为 16，然后向上或者向下通过 1.618 的倍数来递增或递减：

h1 – 41.886784 x 1.618 = 67.773
h2 – 25.888 x 1.618 = 41.887
h3 – 16 x 1.618 = 25.888
p – 16 x 1 = 16

这看起来有点复杂，不过不用担心，Brown 已经帮我们创建了一个很有帮助的计算器。在 CSS 中，排版规模如下所示：

body { font-size: 62.5%; } /* Sets our base type size to 10px, easing the maths. /
h1 { font-size: 6.7773em; / 10 x 6.7773em = 67.773 / }
h2 { font-size: 4.1887em; / 10 x 4.1887em = 41.887 / }
h3 { font-size: 2.5888em; / 10 x 2.5888em = 25.888 / }
p { font-size: 1.6em; / 10 x 1.6 = 16 */ }

黄金比例并不是唯一一个可以帮助我们建立排版规模的比例。我们可以创造我们自己的比例，有时候我们甚之可以从音乐中找到灵感。Owen Gregory 的《构成新规则：音乐、和谐和比例（Composing the New Canon: Music, Harmony, Proportion ）》广泛探讨了使用音阶作为排版规模的支柱，他如此解释：

音乐有时候会在无意识的情况下触动我们的内心。音乐就像是某种魔法，将我们从烦恼和言语中释放出来…，音乐和视觉设计有一些显而易见的相似处，两者都可以向观众传达出某种情绪，勾起人们内心的情感。即使通过仔细的研究，我们也无法解释音乐的神秘魅力。

好在 Gregory 也解释了如何将音阶的规律应用到网络上。以 Mark Boulton 的设计观点为基础，Gregory 解释了如何在脱离内容来设计排版系统，一个内在融洽并且富有逻辑的系统。他的文章很值得一读。

本质？不管你是借来了一些既定的规模，还是通过比例来创建了自己的规模，一旦你开始了，就要坚持下去，这才是真正的融洽之美。

展示和说明

下面的几个网站是我认为使用排版规模用的非常不错的：

Jeffrey Zeldman’s Web Design Manifesto, 2012
再重新设计他的个人网站之后，Zeldman 说：“非常感谢你的截图，我已经经意识到我的网站字体比较大了。不过我就是这样设计的。”Zeldman 在设计中把排版放在了首位，就像是 Instapaper 和 Readability 那样，将可读性放在了首位。

Joshua Platt’s Index
仅仅在排版规模中使用一些简单的色调和人性化的字体设计，Platt 就展示了高超的排版能力，细心的控制着每一个规模的节奏和拍子。

Diehl Group Architects
在网站首页的大图上，Diehl Group 的建筑师们玩弄着超大对比的标题和文字。

Form and Future
尽管在他们的文字系统里有许多元素（图中可以看到 7 个），但是 Form and Future 通过优雅的运用排版规模，成功的吸引读者看完整个网页。

作者：Christopher Murphy
翻译：Max Cheung
原文链接：Contrast Through Scale