一、前言
Oliver Reichenstein曾于2006年说过一句名言：“网站设计的95%是排版。”他指出了网络上大部分信息是文字形式的事实，所以，作为网页设计师的我们需要掌握如何可视化控制版式的技能。本课程将帮你实现这一点。同过9篇文章的课程，我们将详解适用于网页的文字排版。
每一个可想到的排版功能都能通过它的名字引用。无论你在探讨字体本身，还是一个布局内对文字的排列，都有一个可帮你正确描述事物的大术语词汇表。让我们看一看对于作为设计师的你而言一些很重要的排版要素。
与网页设计师直接相关的排版分为以下两个方面：
- 你选择的字体对样式的影响
- 那些你可以操控的样式（通常通过CSS）
因此，你能否清晰地（对客户或团队成员）阐明你的设计观点和决定是相当重要的。本文中我们不讨论球状末端注1和标题，与此相反的是，我们将剖析一下与网站设计师切身相关的页面排版。
二、你可以掌控一切（样式）
某些基础的排版属性可以用CSS操控。例如，也许是最重要的属性——font-family。
你将经常听到相对于字体样式的字体定义，所以了解二者间的区别是非常重要的。字体就是一个打包好的字符集合；通常是印刷时候使用的铅字，现如今同样有了电子版的文件形式。下面是它的一种分发途径。
你用鼠标点图片了吧，嘿嘿。
字体样式是设计师创建的东西，属于设计。我总是喜欢拿音乐来做对比：你买了一张CD（好吧，我们回溯一两年前的情景）作为听歌的途径。你不是在听CD，而是在听歌。这与选择使用字体文件来展现字体样式的方法极其相似。
我们可以通过CSS来定义理想的字体族（font families），常常是从前往后定义的一组字体的形式。我们常常将这样的定义叫做字体栈（font stack）。
与堆栈定义所不同的是，堆栈是后进先出。而字体栈更类似队列，先进先出。也就是从前向后依次查找，直到找到用户电脑上有的字体为止，没有的时候调用游览器默认字体。
字体栈 - Font Stack
我们还可以用样式表来控制字体粗细（font-weight），粗细是我们文字笔画的相对厚度的描述。
许多字体在设计的时候就包含了不同的粗细，而对于字体的粗细，通常可以简单地描述成：light regular book extra-bold等。更确切地说，我们通过使用TrueType的scale属性来确定字样的粗细。scale取值范围一般为100～900，其值为400时就是我们常说的regular一般粗细。
为了能在CSS中以{font-weight: 300;}或者{font-weight: bold;}的形式定义字体粗细，理想情况下，字体应该包含以数值或者名称形式定义的粗细变量。但是理想是完美的，现实是残酷的，当一个字体的粗细无法确定的时候，浏览器就会尝试自行渲染字体粗细样式，但是渲染的结果往往并不是那么完美。
uppercase和lowercase分别代表大小写字母，对case的称呼起源于凸版印刷中的使用的抽屉。（高的抽屉里面放的是大写字母，低的抽屉里面放...这样你就得到了印刷好的图样。）
我们可以在CSS里面修改单词的大小写，例如，使用{text-transform: uppercase;}。
继续字母大小写这个话题往下聊，当使用大写字母的时候（尤其是采用小尺寸字体时），为了增加内容的可读性，可以试着增加字符间距。在CSS定义中，我们使用letter-spacing来进行定义。它的值可正可负，通常用百分比的em衡量大小。
在传统形式上，我们将letter-spacing字符间距称作追踪（tracking），追踪影响着指定一行或者一段话的整体文字密度。此单词（以及许多排版相关的单词）起源于旧时期的排版印刷中，尤其是在照相排版中，字符是用镜头投影到胶片上来实现排版的。因而每个字符间的空隙通过移动轨道上的棱镜来实现调整，也就是追踪。
CSS属性word-spacing单词间距同样能帮上你不少忙。可以预料的是，修改word-spacing的值会增减单词间的空隙，同样在可读性上将会有显著的影响。
下面是一个关于字符间距和单词间距的演示，试着拖动滑块进行调整，自己体会字符间距和单词间距对可读性的影响。
我们常常将追踪（tracking）和字距调整（kerning）两者弄混。字距调整常常指的是单独地调整每对字母间的空隙（而不是将全部的单词视为一个整体进行调整）注2，同样，这样做的目的是为了提升阅读性。
对于比例字体（proportional font）注3而言，它需要针对每一对字母间的间距进行微调，以保证一个字母看上去正好紧挨着另一个。
比例字体（非等宽）
与之相对的就是等宽字体（monospaced font），它的每个字母间的间距都是一致的，常常不需要调整。
等宽字体
例如：对于大写字母V和A而言，当它们放在一起时，通常需要减少它们的间距来使得它们从视觉上看起来没有相隔那么远。
再者，正是因为有了字距调整，我们才有了古老的排版概念。让时光倒流重回到那个铅字还是金属块的年代，所谓的字距就是在铅字上面制造的槽口，通过槽口可以使得铅字能嵌套进对应的模具。这些“公/母槽口”的定位将阻止字母被一个接一个地放错位置。
换种说法，所谓的字距调整，无非就是一步与排版打印有关的流程，而且在网页排版中并不容易实现。目前只有对应的JavaScript工具——例如：kerning.js——来帮助设计师以单个字符的方式一个接一个地处理字体，但是CSS目前还没有对应功能的实现。
就CSS而言，有一个还处于计划阶段的针对字距调整的属性建议，虽然这个属性只限于字体排版设计。
使用此（非标准化）属性text-rendering: optimizeLegibility;将在某些现代浏览器里通过识别调整字符间的间距来提升显示效果，至于此字距调整属性，并不能提供丰富的控制选项。使用此属性将触发字体中的连写（ligatures），这使我对此十分期待。
连写将字距调整升华到一个新的高度，它提供了针对具体字符对的字形的替换。在某些情况下，文字不能非常漂亮地配对，于是无论它们是如何微妙地排列，连写可以被设计于任何情况下。一个经典的例子就是小写字母f和i。
下面这个例子你也许很熟悉，看出来了么？
&符号（ampersand）其实原来是字母Et的连写，但是我们已经习惯使用&取代Et。（此字符在拉丁语和法语中表示“和”的意思）
In other cases, ligatures can be necessary for certain linguistic rarities (the German ß being possibly the most familiar of these) and sometimes also purely for decoration. The latter we refer to as Discretionary ligatures, such as where a c and a t join together. 在别的情况下，
注释
-
注1：球状末端：球状末端是一种字体或象形文字的设计特点，在笔画的结束处使用接近圆形的形状，与serif（衬线）或者是方形端点相对。点此查看图例
-
注2：这么说可能有点拗口，其实简单来说，追踪（tracking）就是不区别对待，每个单词都一样，设定多少间距，大家间就是多少间距。这在中文字符上可能不明显，但是对于英文而言，字体分为等宽和不等宽的。所以，这样子调整后并不是最美观的状态。因而就有了字距调整（kerning），针对每一个单词详细修改，力求最美观的效果。
这么说，可能你还是不那么理解，那么玩玩这个在线的字距调整游戏来体会一下吧。 -
注3：比例字体（Proportional Font）是指字符宽度不尽相同的电脑字体。与此相对，字符宽度相同的电脑字体称为等宽字体。在传统西文活字印刷中使用的铅字，如小写字母的
i, j和w, m的字符宽度是不一样的，但是这样做可以提高单词的可读性，这在铅字制作设计上称为比例字体。东亚语言的电脑字体中，由于同时涵盖西文的半角文字字符，因此通常是比例字体和等宽字体两种类型混杂的局面。
扩展阅读
原文：The Anatomy of Web Typography
译者：雨帆，转载时请保留译文链接和原文链接。
浙公网安备 33010602011771号