很多时候，中文的Web设计仍然扮演着追赶者的角色，主流是以英语为代表的西方语言下的设计。语言是文化的重要方面，其差异——尤其是方块文字与西 方字母文字的差异——强烈地影响了Web设计的效果，这其中或又以排版（typography）为甚。我们的Web设计师们醉心于那些优秀的西方设计，惊 喜之余照搬或临摹，用作中文网站的设计，效果却可能差之甚远。一些跨国公司设计自己的中文网站时，几乎是将英文网站的样式表原封不动地套用到中文内容，不 但整体效果失了原味，细节不当之处更不胜枚举。

微软公司的中文主页刚刚做了改版。与英文主页几乎完全一致的样式并没有给用户带来多大好处，反而增加了麻 烦。约为11px大小的英文在Mac OS/Safari、Windows Vista、IE 7以及开启了ClearType的数量不少的Windows XP用户看来无可挑剔，但同样大小的中文显示在屏幕上就不那么完美了。过小的字号让中文用户很难阅读。总不能强求用户每次打开页面都手动增大文字大小吧？ 即便使用鼠标滚轮改变字号大小并不费劲，却并没有太多用户意识到这一点。

屏幕字体显示技术小史

电脑屏幕显示的最小单位是像素，这多少是个限制。让屏幕显示水平线和竖直线都十分清晰，但让它显示斜线则有可能产生“锯齿”。消除“锯齿”的方法是 使用过渡性质的中间颜色（白和黑的过渡色是灰）。英文字母和汉字都少不了斜线和曲线，使用过渡颜色消除“锯齿”的原理可以很大程度上提高清晰度。

1998年12月，微软公司发布ClearType 字体显示技术，宣称使用该项技术，字体的分辨率能比当时的既有水平提高200%。该技术同样用于消除“锯齿”，但并非使用过渡颜色的方法。在液晶显示器 上，应用了ClearType的字体显示效果明显优于简单使用过渡颜色的效果。实际上，这正是一种利用了液晶显示器特性的技术。研究一下微软的技术文档，就不难猜到200%这一数字的由来了。使用ClearType技术确实能够有效提高液晶显示器屏幕文字显示的效果，即便是普通显示器，应用ClearType技术也能起到消除“锯齿”的作用。

不消除“锯齿”。右边为左边文字截图放大至8倍的效果。

使用过渡颜色消除“锯齿”。右边为左边文字截图放大至8倍的效果。

使用ClearType。右边为左边文字截图放大至8倍的效果。

Windows XP/2003系统已经包含了ClearType技术，然而遗憾的是，用户需要手动开启该项功能才能生效，否则，屏幕上默认显示的文字是不消除锯齿的。我 无法考察到底有多少人开启了ClearType，但这对Web设计师来说一定不是好消息，我们不能总是陶醉在自己的世界里吧？看一看你的设计在关闭 ClearType时的效果，或许会带给你一些不一样的启发。

对于中文Web设计者来说，一个更不幸的消息是，在多数情况下，中文并不是ClearType技术的受益者。对于比较小的汉字（包括Web设计中段 落文本用得最多的12px和14px），开启ClearType并不产生任何变化。下文提到“小字号”时，均是指这种大小的字号。

为什么会这样？其实，这样处理不无原因。

在Windows XP/2003以及之前的操作系统中，小字号的中文字体使用了点阵字库而非矢量字库。这些操作系统的默认中文字体是宋体，但其横细竖粗的特点往往并不会表 现出来。在字号较小时，横竖笔画都是1像素宽。也就是说，这些汉字的显示并不是像矢量字体一样根据需要的大小按比例渲染出来的，而是像点阵图一样为每一种 字号下每一个汉字使用特定的表示效果。之所以这样处理，是因为汉字的笔画比较繁杂，而字体较小时可用的像素太少（12px大小的字只有144个像素供汉字 使用）。这种处理方式反而比简单地消除“锯齿”更清晰易读。再仔细看看12px下的“算”字，中间的“目”字被显示为“日”字，这正是针对像素过少采取的 应对策略——在不引起误解的情况下，尽可能多地提高文字点阵显示效果的清晰度。

这一缺陷也对中文Web设计带来了一定程度的负面影响。一个典型的例子便是导航栏的设计。一些产品负责人要求网页导航栏上的中文使用图像替换，以达 到清晰无“锯齿”的效果。因为导航栏太重要了，而且设计师们对导航栏的视觉设计也会花足了功夫，如果配上“锯齿感”强烈的文字，不无痛惜。相形之下，英文 网站的设计师们就不必为此多虑了。

从去年开始，一种称为“微软雅黑”的字体随着Windows Vista的推出而大为众人追捧。这款字体取代宋体成为Windows新版操作系统的默认中文字体。在Vista下使用这款字体，任意大小的汉字可以像英 文一样清晰显示。Mac OS使用了类似的黑体作为系统默认字体，通常称为“苹果丽黑”。Windows XP下的Safari也会尝试将网页里的中文以黑体显示出来，但效果不佳。在Linux下使用开源的文泉驿正黑，也可以看到相同的清晰效果。

如果绝大多数用户都开始使用这些新的系统及字体，我们或许可以思考一种新的Web排版设计格局。但就像Web设计师们至今也无法摆脱IE 6一样，主流中文字体显示技术依然没有改变。

选择字体

Web设计中，为了突出显示标题文字，可以使用与正文不同的字号和颜色，甚至，呃，不同的字体？对英文来说，确实如此。Web上通常直接可用的英文字体虽然有限，但毕竟有选择的余地。中文字体该如何选择呢？宋体和黑体都可用吗？问题并不简单。

通常情况下，中文字体和英文字体的重要区别，在于英文字体不包含对中文字体的定义，而中文字体却往往包含了对英文字体的定义（仅需要为英文大小写字 母、数字及常用符号进行设计）。也就是说，对一段包含中文的文字应用英文字体，中文会表现为默认中文字体（如Windows XP等系统下为宋体），而对英文应用中文字体，这些英文的字体将由中文字体决定。下表列出了最为常见的中英文字体。

名称	样例	说明
Times New Roman		Times系列字体的代表，也是衬线（serif）字体的代表，广泛用于印刷，但通常被认为在显示Web小字体文本时相对无衬线字体来说较不利用阅读。与中文混排效果较好。
Georgia		衬线更为突出，数字的处理尤为特别，高低错落，显得典雅而不失正式。多适用于英文标题，正文亦可使用，但与汉字排在一起则效果不佳，故中文排版中应慎用。
Arial		无衬线（sans serif）字体的代表，为使用最广的Web字体，大型实用网站（如Google）均选用Arial作为文本字体。与中文混排效果好。
Verdana		又一款广泛使用的无衬线字体，与Arial相比字符更宽一些。Verdana的一大优势是即便很小的字号（如9px或10px大小的文字使用 Verdana依然清晰，每个字母间都保持1像素的间隔，但同样大小的Arial文字可读性就差了许多，部分字母挤在一起）。与中文混排时，由于宽度比例 的关系，Verdana的效果较Arial稍差。
宋体		最常使用的中文衬线字体，Windows XP中文版的默认字体。小字号中文显示效果较好（以点阵方式显示），但其加粗显示效果多为人所诟病。对英文字符采用等宽处理（宽度等于半个汉字的宽度）， 为大量中文网站（如新浪网）使用，虽然中英文混排显得极为整齐，实则磨灭了英文字体应有宽度不同的特点，故不可取。
黑体		常用的中文无衬线字体，与宋体相比更为厚重，用于标题可起强调作用。由于汉字笔画多的缘故，小字号中文显示不如点阵宋体清晰。对英文字符亦采用等宽处理，同样不足取。

注：上表中的宋体和黑体均指Windows XP等平台下的相应字体，不代表微软雅黑等字体。截图亦来自Windows XP平台（已开启ClearType）。此外，Mac OS中的默认字体Helvetica没有列出，它与Arial接近，CSS中常与Arial一起声明。

表中解释了这些中文字体对英文字符的处理方式。实际上，除了Windows XP等系统自带的宋体、黑体、楷体等字体以外，其它很多中文字体都对英文字符采取了符合英文习惯的处理方式，这其中也包括微软雅黑。使用这样的中文字体， 英文字符表现出与中文一致的风格，如微软雅黑的英文也是无衬线的。然而，由于无法保证多数电脑安装了这类字体，它们也不应选为网页字体。

因此，一般情况下，最好使用常用的英文字体去定义网页中的普遍文本，而让操作系统和浏览器去决定中文字体的选用。这样做会让用户对网页的阅读产生最高的效率，制作功能性较强的网站尤其应该注意这一点。

选择字号

字号的选择似乎并不简单——排版中对字号的讨论远多于对字体的讨论。

英文字体通常可以很小或很大，而中文则没有这个便利。正如文章开头所演示的，小于12px的中文在屏幕上很难阅读，任何一种系统面对笔画繁多的汉字 和有限的表现空间都捉襟见肘。正因为英文对字号的适应范围大，英文Web设计常使用相对字体大小，把一定的选择权交给用户。而中文设计则限制较多，字号太 小则笔画太过拥挤（这种情况下，矢量字体的表现比点阵字体稍好）。

大多数情况下，中文字体使用固定大小，如12px、14px、16px。按照W3C的规范，px 与em同属相对单位（relative unit），em（以及%）相对于其它字号，px则相对于显示设备对像素的显示情况。如果屏幕分辨率变高而屏幕实际大小不变的话，1像素的实际显示大小就 会变小，使用px定义字号的文字的实际显示大小也会变小。如今，屏幕分辨率越来越高，导致屏幕文字越来越小这一现象已相当突出，不少设计师已采取行动以适 应这一趋势。由于1024×768的分辨率使用人数仍然最多，网页宽度多控制在1000以内，相应地，普通文字使用12px和14px是最合适的大小。为 了方便阅读，新华网、中国雅虎等网站将新闻内容文字的字体设成了16px，虽在小分辨率屏幕上略显肿大，却也为多数人所接受。

值得注意的是，Windows XP等系统下的宋体（大多数网页的中文默认显示字体）的合适大小是12px以上。在显示一些相对不重要的信息或是用户界面中使用较少的文字时，为了与普通 文字显出区别，也为了多点变化，英文往往把字号设得很小。但同样的情况下，把中文设到12px以下则会严重损坏可读性。这时，在中文Web设计中，要弱化 一段文字，如果字号降低至12px效果仍不足够，则可以考虑将颜色变浅（准确地说，是变得更接近背景颜色）或是选择网页配色中的次要颜色（并非用得最少的 颜色）。

差异无处不在

从一开始，本文就没有停止过对中英文排版思路与方法的比较。优秀的英文Web设计远远多于中文设计，对Web设计的研究与讨论主要集中在英语世界， 连CSS属性也是以英文等字母语言为设计对象的，这些都是实情。差异无处不在，除了字体和字号，中文Web排版还包括很多不容忽视的原则与技巧。下面试举 几例：

• 对正文中的汉字，不要使用斜体。一方面，Windows XP等平台下，斜体小字号汉字极难认清（而且也太斜了）；另一方面，斜体文本的最后一个字会与紧接着它的下一个字挤在一起（英文排版中，单词之间都有空 格，故不存在这一问题）。不过，在非正式情况下，对大字号的标题使用斜体也并非不可。
• 依照中文的习惯，文章的标题应当居中，每段开头应当空两格。不过，在Web世界里，这些仅仅起到参考的作用，而非必须。如今，中文用户似乎也很习惯标题居左，段间留距。况且，这种情况下用户的阅读速度可能更高。
• 与英文相比，中文段落需要的行距（对应CSS中的line-height属性）更大。这样处理的一个简单原因是，相同字号的汉字比英文字母、数字和符号的高度更高，每行之间的距离相对就小了。

诸如此类的问题还有很多，但我不愿也不能列举所有。撰写本文的目的是引起大家对面向中文Web的排版设计的关注，要求仅仅是把其中的基本问题阐释清 楚，并将读者的视线带往更广的空间。本文对读者的一个重要期待是有更多的人研究——哪怕只是零散地思考——这个问题。或许，重要的不是世界的改变本身，而 是存在改变世界的人。

From: http://weakow.com/articles/chinese-typography-in-web-design/