第三章 排版：原则、方针和常见错误
Alessandro CattaneoYues PetersJon Tan
排版是设计的灵魂；是视觉识别能力的核心。这章将对网站排版进行探索，并描述组合的方法和技巧，它们将给予文档生命并使文档容易理解。
Robert Bringhurst 说“排版将使内容增色”，他是著名的排版经典之作——《排版基础》（The Elements of TypographicStyle）的作者。网站排版尤其是文字选取、排列和字体设计，丰富了文本的意义，同时提供了一个使文本获得生命的框架。一个好的开端，但是却不是一个无可附加的定义。
排版包含了很多主题和应用，甚至包括现在互联网上的信息数字化。它不仅包含选择最好的字体、提高可读性、定义品牌和企业形象、销售产品、使信息更容易被读者理解。如果排版的一些基本原则应用得不到位，有时足可以导致读者流失。
让我们把目光投向排版刚刚兴起的时候， 古登堡（Gutenberg）在1455 年使用的黑色字体，也许在今天并不合每个人的口味，但是毫无疑问即使按今天的标准，它也堪称做工精美。当为网站进行设计时，我们的线条无法如此精美，我们的连字（ligature） 不能像400 多年前古登堡在纸和羊皮纸上印的那样。
设计产品的方法已经发生了改变，但是并没有完全改变。排字不再是由专业技师完成的手工劳动，更多是根据设计师设定的视觉模型通过命令进行抽象。字体不再是显示在纸上，而是被光栅化成像素显示在电脑屏幕上。这是网站排版不同的地方。不再是挑选印刷的纸张和材质，我们现在要处理的是不同的显示器类型、分辨率、浏览器和操作系统（很多系统有不同的引擎）。网页排版时必须把它们都考虑在内。 广州网站建设,网站建设,广州网页设计,广州网站设计
 |
|
（点击查看大图）古登堡圣经第一卷的第一页，由1455 年左右的 早期字体印制。装饰性的彩色首字母是由抄写员手绘的。 |
现在只要鼠标轻轻点击就可以使用大量的字体。这并不是说它们都适合用在网站上。大部分字体是供印刷使用的，而不是供我们用来浏览网页的分辨率相对较低的屏幕使用的。专门为屏幕设计的字体问世和对跨平台和跨浏览器支持的要求， 把我们放在了一个和昔日设计师和印刷业者相似的位置。 我们仅仅可以使用一小部分字体，我们对它们已经非常熟悉，有时在一些CSS 样式的帮助下，我们会尽可能广泛地使用它们。
网站设计和桌面出版都在进化演变，但道路不同——网站设计还处在萌芽阶段。一些东西已经消失，而一些东西我们已经拥有。我们可以利用现有的工具很好地工作，比如HTML 和CSS（如果非常有必要，JavaScript 和Flash 也可计算在内）。一些排版中的旧规则和指导原则可以应用于网站，但不是所有的都可以。在线交流是一种新的和不同的媒体，通过它，编辑和读者可以交流，这将会影响到排版。
传统排版和网站排版
我们经常认为写作是一件简单的活动。我们经常认为使用正确的语法、决定元素在页面布局中的顺序以及选择视觉效果好的字体就足够了。但是排版的艺术包含很多经常被忽略的因素，对于网站而言更是如此，整个写作和发表过程是沉浸式的，文本的质量经常被忽略。在这一章，我们将会展示很多不同的排版技术、良好的实践和一些经验之谈，同时也包括常见的排版错误。但是首先让我们仔细看一看网站排版的一些基本概念。 广州网站建设,网站建设,广州网页设计,广州网站设计
清晰度受字体设计、屏幕优化和微观版式影响。它与彼此可以相互识别单个字符、字母或字形相关。我们不能改变字体的外形，但是可以选择正确的字体，并且选择相应的板式。当涉及清晰度问题时，许多设计师在一些标准、探索法和排版技巧上达成了共识。比如，大写字母会比小写字母更难以扫读，正体字比斜体字更容易识别。在正文文本和背景间合适的对比会提高清晰度，正如适宜的行宽和行高所产生的效果。与字母的下半部分相，上半部分对于扫读的意义更大，然而升部（ascenders）和降部（descenders）的高度对于字母的识别具有重要作用，这也是很多人认为有衬线（serifs）字体更容易识别的原因。正如你所看到的，当我们谈到清晰度时，很多变量在起作用。
 |
| 18 世纪著名英国字体设计师William Caslon 设计的罗马字体的一个样本。 |
 |
|
对于一些设计者而言，网站设计完全就是排版。在Dustin Curtis 的网站上， 版式非常醒目，它决定了设计，并被微妙的视觉线索所支持。 |
行宽（measure 或line length）就是每行文本的长度。最佳的长度取决于上下文，但是对于左对齐的文本块，45 到75个字符（包括标点符号和空白）之间的长度值得推荐。66 个字符被认为是最佳的长度：这个长度阅读起来最舒服，使眼睛不必在本行结束和下一行开始之时移动太远的距离。不要让行宽太短，因为频繁地在行与行之间移动，同样会使眼球疲劳。
令人惊讶的是，我们最近关于版式设计的研究发现，包含大量文本和排版相关的网站（ 新闻、杂志和排版相关的博客等）有更长的行宽， 通常在70 到100 个字符之间（ 每行最多的字符数）。总体上，每行的字符在75 到85 个之间。不幸的是， 目前还没有研究指明这样的行宽是否会带来更好或更坏的可读性。
另外， 很多网站有很多栏目。行宽在多栏的布局中可能会短一些。根据习惯，对齐的文本通常在区域的下半部分； 但是不需要精确控制单词间的空白和连字符，较长的行在浏览中的显示效果会更好一些。
虽然得到正确的行宽很重要，但是可读性可以通过正确的行高（leading 或line height）显著提高。行高就是一行文本的垂直高度。它是两个连续文本之间的距离，或者说是两行文字基线之间的距离。为了防止一行的降部覆盖下一行的升部，必须保证足够高的行高。在默认情况下，浏览器会把行高设定为1em，或者字体大小的1 倍，这个高度通常会显得太小以至于不好辨析字体。一个被广泛接受的经验是，把段落的行高设定为字体大小的1.5倍。实际上，根据我们对平均行高的研究发现，这个约定俗成的行高仍然在被广泛使用（平均行高是字体大小的1.48 倍）。作为一个简单的指导，行宽越大，行高也应越大。
注意到我们在CSS 中可以通过无确定单位整数来定义行高值。这个数字作为度量因素和字体大小相关，并确保在文字大小改变后，行高也发生相应的变化。总体来说，无衬线（sansserif）字体比衬线（serif）字体需要更大的行高，页眉比正文需要更少的行宽。同样，较粗字体比较细的字体需要更大的行高。
字母间距（tracking 或letter spaceing）是字母之间的间距，也是文本块之的密度，它可以根据行宽进行调整。在分辨率较低的情况下，根据像素值调整字符间距可能有困难，因为它产生了不连续的效果。 正因为这样，字符间距经常用来突出副标题。然而，作为一个简单的指导，如果行宽越长，你就越需要调整单词间距，字母间距也通常需要增加。要小心操作。一些衬线字体的字符有时可能会重叠。它们应该被当做连字处理。 广州网站建设,网站建设,广州网页设计,广州网站设计
当我们对字母间距进行实验时，要确保“AV”、“ft”、“co”清晰可读，并检查是否能区分出“vv”和“w”：即使是最小程度的不精确，也可能会使文字完全不可读。
 |
|
对于一些设计者而言，网站设计完全就是排版。在Dustin Curtis 的网站上，版式非常醒目，它决定了设计，并被微妙的视觉线索所支持。 |
成对字符间的字母负间距也被称为kerning，它对于调整“ff”、“fl”、“ffl”这类字符组很有必要，它们实际上应该被当做连字。在很多情况下，负字符间距对于提高字体的外观很有用。比如，把“T”和“e”靠得更紧凑些。
单词间距（Word Space）可以根据行宽和行高进行调整。行越短单词间距越小。较长的行通常会通过更多的单词间距受益，尤其是它们有相当可观的行高时。
排版色彩不是染色或上色，更多是页面图形符的连贯。如果你在屏幕上证实或眯眼看一块文本区域时，它应该有一个统一的色调。任何事情都不应该令人眼花缭乱。如果这件事发生，阅读时文本将会被打断。只有在需要故意引起注意的情况下才会这样做。颜色也会受负字母间距影响。不幸的是，现在因为浏览器无法正常支持它，还无法对此进行调节。
