Web 与排版学上的字体问题

关于字体的讨论,其实无论是国外还是国内,都已经有不少,可是我发现绝大部分的内容或者有失偏颇,或者不够全面,下面我试图将自己一段时间内的观点总结一下,以求提出一个比较容易接受的 CSS 字体选择的建议。

## 事关大小

字体的大小总是一个困扰人的问题,用绝对单位还是用相对单位?或者具体来说,用什么单位?ex? em? pt? px? 百分比? 让我们看看 CSS 2.1 Spec 中的说明:

1. 相对大小包括:em, ex, px
2. 绝对大小包括:in, cm, mm, pt, pc
3. em 就是相对 `font-size` 制定的大小而言的,例如 `margin: 1.2em` 就是指设置 1.2 个字符宽度的 margin,当 em 本身用于 `font-size` 时,指的是它所继承元素的相对大小。
4. 百分比也是相对 `font-size` 而言的。

因此我认为,em 和百分比都不适合设置字体的大小,因为相互变动的因素太多了,修改一个地方就有可能影响很多其他的地方。ex 是根据拉丁字母的 x 的高度而言的,这不适合汉字的大小,所以也否决了。px 是根据当前显示设备的解析度而言的,同一个 px 对应不同的设备——比如屏幕或纸张——实际的大小会有一定差异。

所以我认为,如果网页中应该存在作为绝对参照系的长度,那么 pt 和 px 应该是首选,其他的长度根据这个绝对参照系,按照百分比或者 em 来变动。

下面谈谈网页和印刷中大小造成的差异。99% 的网页是用来在屏幕上阅读的,而问题在于,屏幕的解析度要比纸张低得多,所以如果直接把字体按照纸张上印刷的那个大小显示,肯定是看不清的,仅就英文字体而言,许多细微的点划、衬线都没法在那么低的解析度下表现出来,所以我们只能用专门设计给屏幕显示的字体。

这些字体的优劣是很难评述的,有一种看法认为,尽管纸张印刷中都倾向于有衬线 (serif) 的字体比无衬线 (sans-serif) 的要易读,但屏幕上无衬线的字体反而要好一些。所以微软把 Verdana 吹捧为了最适合网页使用的字体。我通常也偏向于使用 Verdana、Arial 多于 Times、Georgia。

对于中文字体的情况有所不同,中文字体在屏幕上的清晰显示依赖的是点阵字体,或者简单的说,就是微软随 Windows 提供的宋体和新宋体 (simsun & nsimsun),这套字体是华康公司 (Dynalab) 设计的,对 9pt 到 12pt 左右的字体都设计了对应的点阵字体。其中使用得最广泛的是 9pt, 10.5pt 和 12pt 的字体:

常用的中文字体

那么比这个大小要大的汉字呢?就要依赖操作系统的字体圆整 (anti-alias,以下简称 aa) 技术了,一般大家认为,Mac OS X 和 Linux 下的 AA 要比 Windows 的 ClearType 好很多。然而不管怎么说,用太大的汉字是比较危险的。

## 事关空间

今天新加一节,本来计划好的,昨天写的时候又忘了。

这里的空间指的是 letter-spacing 和 line-height,也就是字间距和行间距。首先,良好的行间距是排版最重要的地方,你可能不能自由选择字体,字号的选择也受诸多限制,但至少行间距的选择是可以完全由自己控制的。

所谓的 `line-height`,指的是两行字基线 (base-line) 之间的距离,什么是基线?下面图中的红线便是,对于汉字,则应该就是底部的水平线。

base line

在印刷排版中,习惯用 pt 来指定行高,比如所谓采用 12/14pt 排版,就是字号 12pt,行高 14pt;而 Web 中似乎习惯用百分比来设置,这个见仁见智,只要自己看得顺眼就行。但必须注意的是,浏览器默认的行高一定是不够的,尤其对于希望浏览者长时间阅读的内容,行高 – 字号至少要有 2pt 以上。更苛刻的排版学家通常推荐 3pt 以上,但毕竟 Web 上可以随意一点。

但 `letter-spacing` 又是另一回事,我没学过书法,汉字的间距不好多说,但英文字母的间距却不应该随便调整,尤其不宜统一调整。因为实际上,Type1、TrueType、OpenType 这些字体格式中都包含了一个叫做 kerning table 的东西,也就是字母间距的微调。为什么要做这种微调?两个简单的例子是 AV 和 We,如果不做微调,“A”和“V”之间的距离就会过宽,“e”也不会像我们平常书写的那样和“W”契合得那么自然,下图显示了 Adobe Reader 中,使用 Sabon Next 字体时的 kerning 效果:

Kerning Effect

大部分的 User Agent,当然也包括你的浏览器,都会根据字体的 kerning table 自动做这个微调工作,但倘若你使用 CSS 来修改 letter-spacing,这个工作就白费工夫了。所以我才建议不要随便调整 letter-spacing。比如 WordPress 原来的 Classic Theme (Dave Shea 设计,Matt 修改),就犯了这个毛病。

## 事关风格

谈到英文字体,可以扯出许多掌故,不过这里且说说 Web 开发有关的。

关于 Times New Roman,首先,与大家一般保留的印象不同,Times 不应该是一个适合长时间阅读的字体,尤其不适合书籍的阅读,因为众所周知的,Times 一开始是给报纸设计的一种字体,而为了适应报纸这种在劣质纸张的快速印刷的环境,字体的衬线不得不夸张一些,否则细节很容易被油墨破坏,所以把 Times 用在书籍上其实是一种很不负责任的方式。

比这个更不负责任的是用 Times New Roman,Times New Roman 其实是一种压缩 (Condensed) 了的 Times,比原来的 Times 更细长,更不易读了。下面的一个比较应该比较容易分辨出优劣来:

Times 与 Times New Roman 的比较

是不是没有好的字体呢?不是,Sabon、Minion、Jansen-Text, Adobe Caslon, Adobe Garamond 等等都是非常适合阅读的字体,只不过这些字体都是商业的,也就是说,不是可以免费得到的。Microsoft 提供的字体中也有质量比较好的,比如 Hermann Zapf 亲自监制的 Palatino Linotype。事实上,Adobe 选择的 35 种标准的 PostScript 字体 (Times Roman, Helvetica, Courier, Palatino 等等) 中,Zapf 设计的 Palatino 就是使用最广泛的,也最容易阅读的字体。这些字体由 URW 免费提供了,是质量很好的字体,可惜的是并非应用得特别广泛 (不过大部分的 Linux Distribution 中都包括 urw-fonts 这个 package,大部分的 TeX distribution 也都包括 urw 这个 package)。

说到 Palatino, 我们也可以看看 Web 上 Palatino 和 Palatino Linotype 的区别:

Palatino 的比较

相信可以看出,高质量的 Type1 字体,本身就带有字体圆整效果,这是比 Truetype 优越的地方。

## 我的建议

我的建议是什么呢?恐怕还是老生常谈:

1. 用 pt 作为绝对参照系。
2. 中文字体尽量使用 9pt, 10.5 和 12pt 中的一种。
3. 一定要仔细调整行高,避免调整字母间距。
3. 选择字体的时候,先考虑 Type1,再考虑 Truetype,最后考虑都没有的情况,比如我想用 Palatino, 那么应该:`font-family: Palatino, “Palatino Linotype”, serif;`。

Author: Jiang Jiang

A software engineer from China, working on some OS for a fruit company. Interested in typography and science fiction.

42 thoughts on “Web 与排版学上的字体问题”

  1. 太专业了,以前从来没注意过这些细节~

    不过,以前的习惯,却和你的结论1,2不谋而合

  2. 感觉得 12、14、16px 要比 9、10.5、12pt 写起来要方便些(不用带小数点)……

    我最常用英文字体是 Tahoma 和 Verdana,不知道 Tahoma 在 win 以外的系统里都是否自带

  3. 1.文章写得很好,结论和大家目前公认的差不多.
    2.其实12pt的(新)宋体也不怎么
    3.20pt以上的宋体才真正美观(9pt,10.5pt除外)
    4.Windows XP的AA对特定字体的特定大小有似乎能达到特别优化.比如”楷体_gb2312″的14pt.
    5.机器上的Palatino似乎不是TureType,而是OpenType,2者有什么显著的区别吗?
    6.(新)宋体应该是TrueType字体吧,不是点阵字体,只是其内置了9pt,10.5pt等大小的字形,所以无需靠缩放来达到,因此比较美观.(如有错误还请指正)
    7.请教有没有对同一网页的中文,英文分别指定字体的呢?
    从理论上讲font-family: Verdana, “楷体_gb2312”, “宋体”, serif;可以达到英文Verdana,中文楷体的效果,但是事实上是不行的(至少Windows上不行).
    因为系统会自动将Verdana应用于所有字体,遇到中文时会自动使用系统映射的默认中文字体替换(通常是宋体).
    所以有没有其它的办法呢?

  4. pt的跨平台性不好,7pt的英文在win中效果好,但在mac中就无法阅读。

    最通用的还是px。

  5. 这倒奇怪了,pt 应该无论在哪里都定位为 1/72 inch 的,这是绝对单位,不应该更改的。

    另外 Mac OS X 里对字体有点过分修饰,比如应该用宋体的地方用黑体,使用的 sans-serif 太粗… 其实是不大好的。

    7pt 确实太小了啊,我觉得 8pt 以上的英文比较合适。

  6. 1. 使用“标准”方法进行 AA 的效果确实如星风雪所说,其实我先前测试的都是以“清晰”方法进行 AA 的效果。“清晰”也就是 ClearType 技术,个人认为字号较小时的效果比较好。“标准”是传统的技术,尤其对于中文,必须在比较大的字体下才能有效。ClearType 只能在 LCD 下起作用…

    2. 所谓 OpenType,其实只是字体的一个包装,其本身字体格式其实有两种,一种是 Apple 开发的 TrueType,另一种是 Adobe 开发的 Type 1,随 Windows 提供的那些 OpenType,其实根本就是 TrueType。更详细的解释请看:http://www.font.to/downloads/TT_PS_OT.pdf

    3. 一般大家在 Linux 下对 XFT 的配置仅仅是,对某个大小的宋体“关闭 anti-alias”,至于“关闭 aa”是怎么过渡到“选择点阵字体”的,涉及字体选择的细节,这个我不了解,但可以肯定的是,9pt-12pt 的宋体肯定不是矢量字体缩放出来的 (但这不代表你不能用矢量字体来缩放,你一样可以找个 20pt 的宋体,把它缩到 9pt,只不过我们通常不是采用这个方式而已)。事实上,PDF 里面的宋体,一般也就是 10-12pt 左右,就是直接使用矢量字体的,因为那是给打印准备的。

    4. 这个我测试了一下,GB2312 下,IE 不支持,Firefox 可以。UTF-8 下,IE 也支持了。

  7. Tahoma 的问题倒不必担心,至少 Linux 下一般都是有的,现在国内所谓的“汉化美化”,其实大家一般都推荐把所有菜单里的汉字改用 simsun,英文改用 Tahoma…

  8. pt并不能做到真正的“绝对”,所以我现在做法还是使用px,再为打印机专门准备一个使用pt的CSS。

  9. 我也比较认同px的写法,因为没有小数点,兼容性更好.
    另外,jjgod您说转换成UTF-8之后可以,不知您指的是英文中文字体混合设置吗?
    但是经过我的测试,无论IE,Opera都不行的,因为在被渲染为楷体之前已经被系统拦截并用宋体显示了.如果方便的话把您的代码贴出来看看可以吗?

  10. 确实比较偏向于用px,虽说1pt的设定是1/72inch但是在不同显示器和系统是有区别的。
    使用px可以强迫用户看到的字号大小和设计时是一样的。pt的话,还是会随着使用者调整屏幕的字型而变化。

  11. jjgod,
    Mac里面没有简体宋体字,它默认的sans-serif简体中文字体是华文黑体,所以不能称之为过分修饰。

  12. 我认为,用户熟悉调整浏览器字体大小的话,在未来最佳选择确实是em,这样我们不必定一个基准,让用户自己选择,他/她觉得多大爽他/她就调多大,我们设计这不用为他们的条件(近视,色弱等)操心,只需保证各种比例(如标题与段落之间)一致即可。

    我觉得现在Firefox做得不错,一般我们把基准定义在12px的最低阅读许可范围,用户觉得小的话,CTRL + +就OK了。我认为这比Opera的缩放整个页面的效果好。

  13. 仁者见仁智者见智吧,在AA的情况下,黑体字效果并不差,不过是用户习不习惯的问题而已吧。

    看一张别人用mac帮我截的图:http://flickr.com/photo_zoom.gne?id=24046111&size=o

    我看太多数mac用户可能反而会不习惯宋体呢,呵呵。

    由此我的一个想法是:我们在网页设计的时候,除非CSS2中下载字体的功能可以实现,否则我们不要指定字体名称了,就定sans-serif,serif,monospace就得了,让系统来选择它默认的字体。

  14. 我是反对这个主意的,我的看法是,Web 设计者自己应该对自己设计的页面的效果有个预先的估计,以期在绝大多数情况下用户看到的不太离谱。

    因为对于有能力的用户来说,如果它对页面的字体不满意,完全可以自己去修改,比如说它可以用 User Customed Stylesheet,可以用 greasemonkey 等等方法,反正页面下载下来了,怎么浏览完全是在他的控制下的。

    但对绝大多数用户来说,一方面不一定会修改,另一方面也懒得去改,我认为 Web Designer 应该对这些用户能看到的效果负责,尽量保证在不同平台上看到的效果是一样的,明确地指定大小和 font-family 就是为了这个目的而做的,而且这么做并没有什么坏处,比如说如果我指定了 Verdana, sans-serif,如果用户有 Verdana,那很好,如果没有也没关系,自然会用默认的 sans-serif 替代。

    关键的问题其实是,不同的字体对于页面的风格影响实在太大,随意更换太草率了一些。

  15. 我也认为不指定字体是很不负责任的做法.
    设计的目的是让别人欣赏自己的想法和意念,
    如果不对字体加以控制那恐怕是绝对无法反映这个意图的.
    当然现在的xml/rss之类中的大可以不指定字体,
    因为本来就为了结构与表现分离.
    另外其实个人认为楷体是才是汉字的正宗,可惜抗锯齿效果实在太差,
    而且windows里边居然只是一个gb2312的超小集.可叹啊.

  16. 用绝对单位还是相对单位?我倒不认为这是大问题,两者的区别在哪里呢?能否实现不同分辨率及不同系统中大小相同吗?使用根据屏幕大小及分辨率来进行合适调整的字号大小不是更匹配吗?
    还有一个更重要的问题,ayhaadam和NEO都指出用EM更合适,这样的话用户可以自行改变文字大小以方便阅读。在美观性和实用性进行比较,我认为实用性更重要。
    另一个关键问题在于,对于中文网页而言,设计者可以选择的范围实在很小,只有宋体,楷体,黑体,仿宋可以选择。但是考虑到锯齿问题,正文唯一可以选择的似乎只有12px和14PX以上的宋体。其他字体要用于正文的话,最少也要达到18PX(而且用户必须开启圆整屏幕字体边角)才能够清晰阅读,这显然太大了。以上是针对占多数用户的IE。
    能不能写一篇关于中文网页排版的文章呢?

  17. 若希望用户也能调整大小就使用em,Web4C现在就在用em;
    若不希望用户调整大小,还是推荐使用px,简单(没有em嵌套的麻烦)、方便(不必像pt一样使用小数点),更何况即使用户知道使用字体大小的调整功能,也没有几个人用的,就是用的话,通常也是从不正常大小调整为“中等”这个默认值。

  18. CLearType不好?不见得啊,多书情况下ClearType优于AA,尤其是小字体的情况下。

  19. 中文字体在怎么样也没有日文的好,大家可以看看日文的网站,他们的字体在中国可以说成是黑体,而且还特别用心做了宽度只有1px(使得显示时看上去特别漂亮),大小从7.5px 到16px的点阵字。

  20. 9pt, 10.5 和 12pt 的汉字之所以显示效果很好,是因为在truetype中嵌入了相应的优化过的点阵字体,这种技术好像是叫做hint。

    有些繁体或者日文汉字是可以在8pt等极小尺寸下优秀显示的,也是因为嵌入了特别优化过的点阵字体。

    楼上说的宽度只有1px的汉字,怎么可能阿,到底是哪一个日文网站能做到这种地步?

    对英文来说,在屏幕上衬线字体的显示确实不如无衬线字体。不过,汉字呢?似乎是完全相反的情况。

    文章很有参考意义,我转载了。

  21. 点阵替换应该不算做 hint,但有部分汉字字体确实是有 hint 的,比如方正的一些。

    用 GDI+ 的字符串绘制 API 时,也能够选择用不用 hint 信息来帮助绘制,有 hint 可以使渲染得更好,速度也更快。

  22. 我在mac上设计好的页面,在PC上显示感觉完全两样,原因是中文字体的原故。这个是否是无法在PC上解决的?

  23. Joe: Well… 问题是你不能强迫用户用相同的字体,本身 Mac 下和 Win 下常用的字体系列就是不同的,双方的用户都已经习惯了,所以设计的时候只好把这个因素考虑在内。

    据我所见,绝大多数设计良好的站点在这两个系统下的效果都是可以接受的,不管设计者本人用什么系统。

Leave a Reply

Your email address will not be published. Required fields are marked *