青小蛙の博客

中文字体在网页设计中的应用

青小蛙 设计字体

前段时间,在 Evernote 翻到2010年的这篇 Showcase Of Web Design In China: From Imitation To Innovation采访的文章,里面谈到中国网页设计的一些现象,看后很有感慨。这几年随着互联网的快速发展,整体设计和当时相比也有了不少的改观,但问题依然还是存在的。

我非常赞同 Web Design is 95% Typography 中提到的观点,对于好的网页设计作品,即使去掉颜色和图形修饰也亦然不会差。排版无疑是网页设计的基础,而文字又恰恰是排版中的主要元素。

中文网页设计所存在的问题

对于本来很好的英文界面,翻译为中文后就成了二流货色,难道真是“中文”在表现上的天生缺陷?难道我们千百年行成的书法艺术到了数字时代完全行不通了? 在Quora上一个问题曾谈到中英文网站的差异,所总结的观点现在看来还是很有道理的:

  1. 字形过少显得单调乏味;
  2. 留白不够使网页缺乏节奏感;
  3. 信息堆砌过多显得拥挤不堪。

除去设计水平不谈单从字的角度来看,因为中文的特殊性,到了数字化时代适用的字体、字号、字形太少,相互组合搭配的效果较单一,所以很容易造成web页面的层次感不够,表现力欠缺。具体分三块:

字体,能够在浏览器里正常显示的中文字体就那么几个,当定义了系统里没有字体时,浏览器一律按照默认的宋体或黑体显示。此缺点从操作系统根本上被限制,无法与英文文字的效果对比抗衡。

字号,英文大部分字体从8px到22px都有不错的美感。中文为了保证“方正”的造型,通常仅使用双数字号,比 如最常用的12px和14px,因为这两种字号看起来最自然、协调。再往上 16px,18px,20px也还行,但13px,17px类似的单数字号,可以看到效果明显的锯齿和失重感。

字形,英文有斜体和大量多字重的字体,HTML和CSS里都有专用语句进行定义。但是中文从设计之初就没有斜体字,斜体和加粗都是浏览器模拟处理的效果很不理想(字重问题现已有改观)。也许当初某些人定规范的时候,完全没有考虑非罗马文字国家的感受。比如学术论文的参考条目,好像国际规定必须用斜体。

谈了这么多,那么针对网页上的中字体如何做出最优化选择呢?

说到选择,我们都知道网页中的字体是通过CSS规则中 font-family 来定义的,如何让你的字体在任何系统,任何电脑上都看起来一致?原则很简单,尽可能使用所有操作系统都存在的字体。虽然听起来比较简单,但对于中文字体来说现阶段是不可能的,因为各系统(iOS 和 macOS 例外,他们一家的)默认的中文字体没有相同的。

但随着 Windows XP 系统的退役(拍手)带动“微软雅黑”的普及,以及苹果公司针对大中华区推出的“苹方”字体,谷歌联合 Adobe 公司推出的“思源黑体”,使得情况有了一些改观。

首先从字号上讲,浏览器渲染技术的发展,问题已经没有那么严重了,不过为了保险起见中文字体还是建议用双号字。

字形,“微软雅黑”从 6.14 版开始支持三个字重;“苹方”支持六个字重;“思源黑体”支持七个字重。 系统字体示例

CSS3 中为「font-weight」和字体名称中的字重描述(Light, Normal, Medium, Bold, Black 等)给出了一个更明确的对应关系表:http://www.w3.org/TR/css3-fonts/#font-weight-prop 但实际上,我们一般遇到的字体很多时候都是使用一些通用的词描述划分其字重,如下所示。

  • 100 - Thin
  • 200 - Extra Light(Ultra Light)
  • 300 - Light
  • 400 - Regular(Normal、Book、Roman)
  • 500 - Medium
  • 600 - Semi Bold(Demi Bold)
  • 700 - Bold
  • 800 - Extra Bold(Ultra Bold)
  • 900 - Black(Heavy)

其中 normal 等价于400,bold 等价于 700 是固定的不变的,从长远性和各系统的兼容性考虑,我们在CSS中定义字重可以选择 300、400、700 这三个字重。

字体上讲,三款字体都比原来系统字体有了很大的改善,并且都属于 sans-serif 字体,让网页设计在各个平台有了更统一的视觉呈现,所以在不考虑英文的情况下,CSS 规则中字体大可以这样定义。

font-family:-apple-system, BlinkMacSystemFont, “Microsoft YaHei”, sans-serif;

对于 Web Fonts 因为中文字体文件过大,不具实用价值,暂不考虑。

三款系统字体的下载地址:微软雅黑 苹方 思源黑体 密码:pfxk

青小蛙
那一池,氲光拂过的荷叶