十三步搞定网页排版

网页排版并没有你想象的那么复杂，简单几步就可以让你得心应手。

广告

越来越多的浏览器开始支持网络字体（Web Fonts），在最新的 HTML 和 CSS 的排版特性中，越来越多的人开始使用网络字体。一个崭新的网络字体时代已经开启。这就意味着，网页设计师需要（重新）熟悉传统的排版规则。

印刷排版是静态的，而网页排版则是流动的，可塑造的。除了学习如何塑造外形，现在的网页设计师已经能够预测不同的浏览器的输出结果，不仅仅需要知道结果，网页设计师还需要了解产生这样结果的原因。以下是一些关于排版的做与不做，特别是针对网页。

字体的作用

你必须做的第一件事请就是检查你所使用的字体功能。所有的字体都是平等的，但是有一些字体会更平等。Unicode 编码的字体可以容纳成千上万的字形，OpenType 格式则支持更多的功能，比如小型大写字母，老式数字，自由连字和上下文替代字（Contextual Alternates）。

对于字体的创造者，他所创造的字体自然是非常好的。但是对于用户来说，总是可以发现一些设计者遗漏的一些细节。设计一款字体需要花费大量的时间和精力，所以一些设计师并不打算一直做这一行。

这就是为什么设计网页之前对于字体和字符集的检查是非常必要的。一个字体就好像是一个工具箱。有时候这个工具箱几乎是空的，比如说一些只有大小写，数字和一些基本的标点符号的字体。有时候有些部件是非常重要的，比如说工具箱里有了螺丝刀，锯子和钳子，但是没有了锤子，很多事情就没法做了。

巧妙的分组

Typeface: FF Sero by Jörg Hemker

一些特殊情况下经常会用到备用字体。如果当前字体中缺少需要的特殊字符，那么在显示这个特殊字符的时候系统会调用备用字体中相应的字符，之后再切换回原来的字体。（*通常备用字体包含尽可能多的 Unicode字符 via. WikiPedia）采取这种非常规的方式可以产生不错的结果。如果当前字体没有不齐线数字（oldstyle figures），那么系统会自动向下调用含有不齐线数字的字体，之后再次调用主字体来显示之后的内容。通过这种方法可以改变文本中的所有数字样式为不齐线数字，而保留其他文本为常规样式。同时也可以简化 HTML代码。

搞清楚数字

对于数字，一些高品质的专业字体中通常会包含多组数字，每一组都有其特定的用途。表格数字中，每个数字所占的空间是相同的，而宽度比例数字是按照数字本身的形状来按比例排列，所以占有的空间是不同的。比如数字 4 所占的宽度就会比 1 大。一方面，不齐线数字在设计上是参照小写字母的 X字高，升部以及降部的。另一方面，齐线数字的部分或者全部字符则是参照大写字母。

关于数字的样式，更多详情请阅读： Figuring Out Numerals 以及它的 续集

真正的样式

Typeface: FF Ernestine by Nina Stoessinger

使用 CSS 可以做出很多假样式，如果你所使用的字体没有粗体，使用 可以人为的加粗字体，常规字体会向两侧变粗。如果字体中没有斜体字，使用 会让字体倾斜，但是效果总是差强人意。

因此要慎重的使用 和 ，转而使用 和 ，对于前者来说仅仅是强制性的“加粗”或者“倾斜”，而非寻找粗体和斜体，但有时候你只需要改变字体的颜色和大小而已。这就值得定义你所期望的目标——是为了强调还是仅仅呈现样式。使用后者可以随时随地的仅通过 CSS 文件就改变字体外观。通常情况下，为了避免重复和过多的对局部内容进行定义，使用 CSS 文件可以定义全部的文本格式，

做假要做好

当字符集中没有小型大写字母时，使用假的小型大写字母时，对比周围的其他字母，他们看起来会很瘦。如果恰好这个字符集中有 semi-bold，或者介于常规和粗体之间的样式，则可以用来加粗小型大写字母，当然别忘了给他们留下足够多的间距。

谨慎的粘贴

有时候你可能会在网页中发现一些奇怪的字符串，那里本应该是重音符或者其他特殊字符。这是因为在复制粘贴的时候，不小心复制了 UTF-8 以外的字符编码。字符编码系统用于各种不同的字体，以促进信息传输和储存。

由于 HTML 使用的时 UTF-8 字符集，因此如果复制了其他非 UTF-8字符集的文字时，HTML 会随机从 UTF-8 的字符集中找一些字符来替代，因此会显得杂乱无章。而且多数情况下，再复制的同时不仅仅复制了内容，连同文字样式也会被复制进来，这样一来就会产生严重的后果。为了避免这样的情况，通常情况将复制的内容转变为纯文本进行粘贴。

HTML 字符实体

Typeface: FF Spinoza by Max Phillips

看看你的键盘，你可能并不知道他们有多么丰富。通常在网页排版中，一些键盘上没有的字符都是通过 HTML 实体来定义的。你不能使用小写字母“x”来作为乘法符号，商标标志也不仅仅只是简单的“TM”，音调标识也不能用作一个单引号。

正确的引用

来说说撇号，正确的用法是一个右单引号。多数业余设计师的死角在于“直引号”，也被称之为“笨引号”（*即从打字机继承而来的不区分开闭的引号），然而仅仅使用卷单双引号是不够的，不同的语言所使用的引号也是不同的，例如法国使用的引号向外延伸，指向一个三角标志，而德国则向外指向一个点。

了解破折号

通常会为保持单词的完整性，在换行的时候通常会用到连字符。然而还有两种其他用途的线，短破折号（en dash）的长度是长破折号（em dash）的一半。短破折号通常与来表示前后者的统一性，或者用来对比两者，再或者表示后者是对前者的补充说明。长破折号通常和字体等宽，通常在句子中起到转折的作用，但是具体的用法常常会有争论。有些人会使用短破折号来代替长破折号，虽然两者在只使用的时候都不需要添加多余的空格以保持与前后字符的距离，但是很多排版设计师还是喜欢在使用的时候加入窄空格（thin space）或细空格（hair space）来保持距离。

更多关于有标点符号的内容，请参阅：The Sweet Sound of Punctuation.

相对的关系

网页文本的一个优点是，用户可以自行调节字体大小。如果说文本的字体是以像素定义的，那么在调整网页的时候，字体会变得不对称，文本字体有可能会比标题还大。关键是要调整 ems 与标准字体大小之间的关系，这就保证了在调整网页的时候所有的字体都会相应的调整，以保持字体之间的大小关系。

控制换行符

Typeface: FF Spinoza by Max Phillips

调整浏览器窗口的大小可以改变文本框的宽度，用户可以自定义调整网页字体的大小，这可能让你感觉似乎我们无法控制换行。其实你可以看的更远，如果你对结果有着绝对的要求，那么还是有办法去控制文本的换行的。

在 P 和 DIV 标签中，换行符通常出现在段末，而多数情况下换行不是希望换到下一个段落，而仅仅是希望接下来的内容可以另起一行，而不是一个段落。这时候需要使用 br 标记，使得接下来的内容不脱离此段落而另起一行。不间断空格（non-breaking space）只会停留在同一行，而不间断连字符还不能使用 HTML实体 来进行表示。自动连字符（soft hyphen）和选择连字符（discretionary hyphen）只会在必要的时候出现（*自动连字符是在行末自动出现）。当你需要输入一个长单词，但是文本行又不够的时候，可以使用连字符，表示下一行开始的字母属于上一段最后的那个单词。

空间与维护

不间断空格并不是 HTML 中唯一一个可以使用的特殊空格，正方空格（em space）是一个和字体等宽的正方形空格，半方空格（en space）的宽度是正方空格的一半。而在表格中，最有用的是数字空格（figure space），使用与字体中数字相同的空间，宽度和逗号或者句号相同。窄空格（thin space）可以用正在“点”和下一个字母所以之间，细空格（hair space）则用于破折号与字符之间。此外还有 1/3空格，1/4空格和 1/6空格。

阅读间距更多的是关于字母之间的间距，正确的顺序应该是：字母间距小于单词间距小于行间距。一定要注意字母间距，过大会降低可阅读性。只有在文本非常小的时候可以适当的增加字母间距，相反的，字体的显示大小是得益于字母间距的，因此间距不应当过分夸张。

所有的因素都会对文本的外观产生影响，适当得对齐文本以适应文本行的长度，不同的字间距会使得文本外观显得不协调，从而影响阅读质量。合理的选择左/右对齐非常有利于提高阅读质量。

除了字符间距和字间距，行间距同样也影响着阅读质量。太窄的行间距会使得文本显得过于拥挤，会降低文本的识别度，而太宽的行间距又显得太多松散，读者会经常在换行的时候出错，以至于无法快速的找到下一行。

再更进一步

以上这些建议已经可以使你做出更漂亮的排版，但仍有很多东西需要去摸索。当你了解到更好的排版规则，你就有信心将他们应用在网页排版中，你应当不断地实践，来把自己推向更高的层次。

这是由 Cyrus Highsmith 编写的一本很不错的入门级的书籍： Inside Paragraphs: Typographic Fundamentals（段落内幕：版式基础）
对于 Robert Bringhurst 来说，这本书就像是一颗不可或缺的宝石：The Elements of Typographic Style（版式风格元素）
或者 Erik Spiekermann 和 E.M. Ginger 的：Stop Stealing Sheep & Find Out How Type Works（别再偷羊）

最后，要特别感谢 Alexandre Plennevaux 也就是 Pixeline 给我的指点和方向： Unicode Beginners Introduction for Dummies Made Simple. 平面设计师 Yves Peters 写了很多关于样式和设计的东西，多数内容都在 The FontFeed 和 Unzipped，他的才华是识别那些在日常生活中完全无用的字体。

**翻译：**Max Cheung
原文链接：Better web typography in 13 simple steps