Typography通常被翻译或者引用为字体,不过从最近几年的web 2.0的发展概念来看,typography被赋予了一种新的 更宽泛的概念 。
Typography被赋予了许多新的含义。它不仅仅是选择什么样的字体(font),也不仅仅是设计字体的样式(typeface),还包括了根据文字信息的逻辑结构进行文字布局的设计等所有文字表达方面的设计。因此,我建议的Typography的对应中文是 文字界面 。
我国网页设计的败笔之一就是文字界面。我不知道为什么许多网站都喜欢把自己的脸整成 这样。并且给这个脸起了个可笑的名字:“ 门户 ”。本来这是一个很不错的比喻,可是许多此类网站都采用了同样的设计和界面,毫无新意,甚至有些泛滥了。所以一提到“门户”这个词,使我联想到的便是乏味,毫无生气,过度的信息量和蹩脚的信息架构。
所以我想我非常有必要讲讲 中文Typography 的设计(从 CSS 的角度)。希望我们能够少一些这样的网站。多一些那样的网站。
文字布局
水平间距(CSS属性letter-spacing) 。该属性一般在英文中是比较忌讳的,因为英文单词由字母组成,而letter-spacing会改变字母的间距而非单词的间距,因此会造成割裂单词的负面效果。而中文是由汉字组成,letter-spacing应用于中文时,水平间距作用在汉字之间,产生的割裂影响并不大,因此可以经常用于标题或固定的说明性语句,但建议不要用于文章内容。
垂直间距(CSS属性line-height) 。 垂直间距的设置 是文字布局的关键,也是最复杂的地方,我们有时甚至需要做一些 计算 。国外的设计师们显然已经认识到了这一点,但在我国,许多网站的中文内容还混作一团。一般来说,中文字体比英文字母复杂很多,为了加强阅读的舒适感,line-height应当设置的较英文更大一些,我觉得200%是个很不错的值。
对齐方式(CSS属性text-align) 。最常用的是左对齐,其次有右对齐、居中和两端对齐。一般来说英文的字长变化比较大,因此会在段落的右侧产生锯齿边,看起来比较粗糙。但是中文是方块字,右侧的锯齿边情况并不显著,因此几乎不需要使用text-align的justify这一值。
字体样式
字体(CSS属性font-family) 。这一直都是中文Web设计比较头疼的东西。由于汉字结构笔画比较复杂,造成网络上小字体的阅读比较困难,一般不应当小于12px。但更糟糕的是,创造中文字体要比英文字体复杂的多,英文等采用字母体系的语言的字体创造主要功夫用于字母设计,而中文字体则要设计大量汉字,复杂程度的对比,看看中文和英文的字体文件的大小就知道了。
目前,中文网站多采用宋体,表现力还不错。但在显示标题字体放大后,宋体的锯齿边比较厉害,继续放大到25px或以上时,锯齿边消除的较好一些。解决锯齿边问题的方法一般有两种:
- 对于非动态内容,采用 Image Replacement技术 。
- 对于动态内容,那么可以采用 sIFR 。不过中文的sIFR加载较慢,会有短暂的标题消失时间
(本网站即是示例)。
中文不存在大小写,有简繁体。但我还没有尝试过简繁字体混合使用的效果。
加粗(CSS属性font-weight)与倾斜(CSS属性font-style) 。一般情况下,中文加粗在12px以上的字体中表现力很不错,因此可以经常用来突出重点词语。而倾斜会使中文字体比较难读,特别是对于12px以下的字体,因此我们需要经常避免倾斜中文字体。最后要注意。 千万不要 在小字体上同时使用加粗和倾斜的!
颜色(CSS属性color)与尺寸(CSS属性font-size) 。我不对如何 搭配色彩 作解释。但是这里有几条原则:
- 不要在文字上使用超过3种主要颜色。
- 文字色彩对比应当有低有高,形成纵向深度感。
在字体尺寸上,我们都厌倦了“门户”的单一尺寸,应该大胆展示中文字体优美平衡的结构和丰富多变的笔画,把他们从牢笼里 解放 出来吧!
标点符号
首先标点符号是从 国外引入 的,中国古代并没有标点符号!但是我仍然建议所有设计师阅读一下 我国的标准 。
总的来说,中文字体是方块字,在文字布局上比较漂亮整齐,比英文略占优势。在字体样式上,中文虽然有简繁体,但不通用,与英文相比缺乏大小写,倾斜等效果,而且Web字体支持不够,开发较难,选择余地小,字体本身的锯齿边较严重,造成诸多方面比英文劣势。我国的Web设计和开发人员只有知己 知彼 ,扬长避短,才能创造出中文独有的web 2.0文字界面。
类别标签 : chinese, interface, typography, web2.0
