浅析网站的文字设计

 网页文字是一个网页最直接反应网页内容的工具。在一个简单的网页设计中,文本文字设计无疑占据了一个很重要的位置。当下的问题是,文本文字究竟应该怎样编排才可以最好地反应网页内容,进而吸引用户,最终提高网站的点击率。

对于很多的网站来说,字在整个网站的内容中占了80%以上甚至更多,或者换个角度上说,网站可以没有颜色,没有图片,但唯独不能没有文字。

一个产品团队,有一个角色叫做Content Design,ucdchina有过一期话题叫做 注意界面上的文字 ,非常精彩,我在写本文之前,再次通读一遍,一方面是学习,另一方面,是避免写重复的内容。如果你按照里面的观点对照你的网站,相信一定会有所帮助的。

那期话题只有 潇潇重点说的是文字的视觉方面 ,那篇文章非常精彩,也是该期话题的“浏览冠军”,本文是延续性的一些想法。

先看看网站以外的中文字体设计,英文的正文字体有很多可以选择,但中文的正文字,总的来说就两种:宋体和黑体。在传统的版式设计中,设计师们都喜欢做英文的排版,为什么?从视觉上来看,英文的组合很容易形成线和面的关系,而且字母有节奏感,比如aby这三个字母放一起有高矮区别。中文字相对来说,单调、孤立、不流畅。

回到网站中文字的设计,设计师基本上不用考虑在字体上做选择,只有宋体。前文说:单个字成点,一行字成线,一段字成面。这是版式设计最基本的原理,我们需要做的就是强化这样的感觉。

下面是具体设计方面的点:

1. 字体的单位用em而不用px,尽管12px和0.8em大小差不多。

updete:感谢网友 Dreamcolor 推荐文章 95%的中国网站需要重写CSS ,该文很详细的解释了px和em的差别和原理。这点写之前是我想当然了,没有深入理解em单位。只看到很多用em的视觉效果不好看,现在明白了,是因为没有把em单位和px对上号。结论是应该用em而不是px,但需要把em的值设置好。

2. 在css文件body中的font-family里面保证”宋体”前面有Arial或者verdana,个人推荐这么写:font-family:Helvetica,Georgia,Arial,sans-serif,宋体。这样能保证你界面中的字母、数字、符号看上去美观一些,更重要的是更加易读。

3. 子条 说:12号宋体时,我们一般使用18-20像素的行距。14号宋体通常使用22-24像素的行距。

很赞同,这个行距大小随着单行字数的多少而上下浮动。我认为12px字如果单行字数少的话,17也是可以接受的。

4. 正文一行字数最好不超过50,首页的标题文字以8-20字为佳。

5. 12和14px字相对来说最精致,13px在需要的时候可以做正文字,word里面默认的字的大小相当于网页的13px字。

6. 对于一段文字,尤其是正文部分,保证左右至少有15px的留白,便于用户换行时不受到干扰。

7. 文字和背景对比要足够明显,保证最弱文字的可读性。

PS1:给 Denis 的 可爱的女儿晨晨设计的wordpress主题 今天出炉了,细节方面还需要再调。那丫头着实地可爱!

PS2:有一些朋友给我来邮件让我给贵站提建议,我在写完这系列视觉设计的文章之后,统一给予回复。我觉得可以从文章观点中,是否能得到一些帮助呢?尤其是可以看看ucdchina的话题。

不管信息复杂与否,文字都在其中扮演着一个再重要不过的角色。因此,勿容置疑,文本文字的设计以及排版将直接影响一个网页的成功与否。在网页设计中,只有将文字设计做好了,才能算最好地完成了这次网页设计。