Web设计的中文排版
Honestly, if there was one subject I wish I could master, it would be typography.
很多时候，中文的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的排版设计的关注，要求仅仅是把其中的基本问题阐释清楚，并将读者的视线带往更广的空间。本文对读者的一个重要期待是有更多的人研究——哪怕只是零散地思考——这个问题。或许，重要的不是世界的改变本身，而是存在改变世界的人。
18 Comments
Other Links to this Post
-
Web设计的中文排版 | 负罪者 — January 11, 2009 @ 10:12 am
RSS feed for comments on this post. TrackBack URI
By RichardF, January 9, 2009 @ 10:36 am
问题是设计上的，但感觉根源是底层没有对中文显示太好的支持，或者随着硬件技术发展情况会有点改善，但估计要等到比较彻底的解决，还是需要从生成算法上有大变革
By weakow, January 9, 2009 @ 10:40 am
Reply to RichardF: 是的，问题很复杂，但也在好转
By songtao, January 9, 2009 @ 6:20 pm
想不到我也会来看看吧？看了你的logo设计，很不错！太佩服你了。
再问你个小小的问题：我在做一些文件时，有时候需要用Photoshop做一些文本处理，文字删格后就变成图片格式了，这样打印出来文字的清晰程度比Word文档的差多了。如果我一定要用Photoshop处理一些文本，但又想得到和Word文档相同的清晰度，有可能吗？
By songtao, January 9, 2009 @ 6:44 pm
PS:哈哈，想不到ww也看Happy Tree Friends这种邪恶的东西。我看同学看了一次，就再也不想看了，因为这让人觉得日常生活中处处都有致命可能的小动作，一不留神就挂了，太邪恶了！
By weakow, January 9, 2009 @ 7:49 pm
Reply to songtao: 恩，真没想到你会来看啊，呵呵~~又夸我~
如果你不进行栅格处理，应该就是清晰的。但是一个更好的选择是提高dpi（Dots per inch，代表每英寸有多少个点），dpi在创建画布的时候就可以选。如果你的图像达到500dpi，那么一般是很清晰的。这方面我的经验倒不多，你有机会可以检验一下 :-)
By weakow, January 9, 2009 @ 7:50 pm
Reply to songtao: Happy Tree Friends嘛，前段时间看得好多，呵呵，我完全免疫~
By HeaTeR, January 10, 2009 @ 1:49 pm
wangwang 我来拜一个。文章很好很赞。
不过指出一下：
Mac 下的默认无衬线中文字体，在简体中文下使用的是“华文细黑”STXihei，在加粗的时候使用的是“华文黑体”STHeiti这两种字体。Mac 下的浏览器一般不支持使用“伪粗体”来对文字进行加粗处理，而是采用单独的变体字体来达到这个效果；在繁体中文下使用的是“儷黑 Pro” LiHeiPro。不过繁体中文下用的粗体是什么就不太了解了。
Mac 下的默认衬线中文字体，在简体中文下使用的是“华文宋体”STSong。不支持加粗（！！！）。繁体中文下应该是“儷宋 Pro” LiSongPro。
优秀的排版还应该注意段落间距、行距、中英文间距等细微的问题。中文网页排版是门目前涉足比较少的学问，望 wangwang 多加研究和努力，多总结一些经验出来。
By weakow, January 10, 2009 @ 3:32 pm
Reply to HeaTeR: 多谢指导啊。我对Mac环境确实太不熟悉了~~有机会要好好研究研究
发现heater还挺注重中英文之间加一个空格的呢 :-)
By mocha, January 10, 2009 @ 10:18 pm
很细腻～～系统地上了一课～
这才留印，惭愧呢！
By weakow, January 10, 2009 @ 10:21 pm
Reply to mocha: 呵呵，细腻吧~
By HeaTeR, January 10, 2009 @ 10:55 pm
我觉得中英文之间的间距不应该用添加空格来完成，不符合习惯。有没有办法可以在中英文中通过 CSS 等方式自动添加间距？这样可以很大的提高中英文混排的可读性。
我分段总要另起一行，这个也是因为编辑器本身对段落间距支持的不好。如果，输入的就和发表后看到的是一样，就会更好了。
By weakow, January 10, 2009 @ 11:24 pm
Reply to HeaTeR: 的确如此，中英文之间的一点距离属于一种样式，就应该由CSS来完成。但现在CSS还不支持这一点。如果借助JS，恐怕会很麻烦。
也许不应该手动加空格。万一未来有一天可以用样式来控制了呢~~
其实用空行来分段是非所见即所得编辑器给用户提供的一种简易分段方法啊~~ :-) 要想输入的和发表后看到的是一样的，不就是所见即所得编辑器么，可是用在这里又太厚重了 :)
By HeaTeR, January 11, 2009 @ 12:06 am
Reply to weakow: 我这里主要的异议在于，现在文本输入框中间的行高/字体大小/宽度，和发表出来的不一样，这个不应当，对用户来说会是很不方便的。我居然发现我在 Windows 下的 ffx 中看到的输入框大小等和 Mac 下的 Safari 不一样。。。
其实，可以在提交到数据库的时候，添加一个过滤层，用类似给代码加高亮的方式。可以一个工具函数判断中文和英文的区隔，然后将英文部分都用给分隔开，再使用样式表进行定义，可能可以解决这个问题。
不是太喜欢js这么用着。现在看 CSS selector 确实无法独立做到这点。或者，可以用 lang 属性来表示语言，然后再行判断？
细究下去会觉得很有意思。。。
By weakow, January 11, 2009 @ 12:15 am
Reply to HeaTeR: 不错，确实有这个问题~~想要把体验搞好，是要下很大功夫的~
我不知道有什么工具可以很方便地区别中英文并清楚地找到它们之间切换的地方~ 难题哦
By Yuancheng, January 12, 2009 @ 1:44 pm
宋体中的英文实在是难看
By voidman, January 22, 2009 @ 8:35 am
什么时候浏览器支持可以针对不同的字体设置不同的最小大小就好了
By fans, May 12, 2010 @ 10:21 pm
现在才知道这个秘密