浅谈网站字体的选择与优化

如同“想要抓住男人的心,首先要抓住男人的胃”一般,想要留住浏览者,首先站长本身就要注重网站页面的布局和其他细节优化。近期Packy也是在折腾自己的主题,看了一些前端设计的资料。今天,拿《Responsive Typography: The Basics》一文的翻译和个人的见解来与大家分享一下:选择怎样的字体适合您的网站!

响应式布局

首先,我们要知道什么是响应式布局,因为原文标题就是“响应式字体排印”嘛~百度百科告诉我们,响应式布局就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。也就是现在屏幕越来越大,移动设备越来越多,你需要选择一个好的字体和样式,来兼容这些所有的设备。

响应式布局最典型的2种就是

  1. 自适应布局:分步地调整布局以适应有限种(屏幕)大小。
  2. 流体布局:持续不断地调整布局以适应各种可能的宽度。

其中的第二种是目前比较火热的布局,因此 WordPress 上出现了很多瀑布流的主题。

到底是用以往的布局方式好还是响应式布局好呢,这个要根据每个网站的内容来决定啦。如果一个纯文字的网站用瀑布流来显示文章,浏览者永无止尽的看到一堆一堆的文字,必然会感到枯燥。

选择字体

制作一款主题或建设一个网站的时候,你终究要决定用什么字体来确立网站的基调。由于每种字体都有它自己的品质要求(或限制)特定的处理方法,字体的选择会带来诸多视觉和技术上的结果。现在字体成千上万,你有很多的字体可以选择,于是找到一种合适的字体又变成一项挑战。

对于中文的网站来说,似乎没必要纠结字体,因为真正能用的字体也就那么几个…但是,同样的,不同的网站需要的字体还是不同的,这就要引入下一个话题来了解了。

衬线还是无衬线?

好了,我们这里又要解释下神马是衬线和无衬线了。

西方国家字母体系分为两类:serif 以及 sans serif。

serif 是有衬线字体,意思是在字的笔画开始、结束的地方有额外的装饰,而且笔画的粗细会有所不同。相反的,sans serif 就没有这些额外的装饰,而且笔画的粗细差不多。

serif 字体容易识别,它强调了每个字母笔画的开始和结束,因此易读性比较高,sans serif 则比较醒目。在走文阅读的情况下,适合适用 serif 字体进行排版,易于换行阅读的识别性,避免发生行间的阅读错误。

sans serif 强调每一个字母,serif 更强调于一个单词。

中文字体中的宋体就是一种最标准的 serif 字体,衬线的特征非常明显。字形结构也和手写的楷书一致。因此宋体一直被做为最适合的正文字体之一。不过由于强调横竖笔画的对比,在远处观看的时候横线就被弱化,导致识别性的下降

以上的解释依旧来自百度百科。为了让大家更加直观的了解,我制了张小图,方便大家对比:

serif 以及 sans serif 字体

许多人还是认为,就屏幕上的字体排印,“衬线还是无衬线”这个问题本身就能回答。实际上没那么简单。与普遍观念相反,如果你设置的正文字体大于12像素,衬线和无衬线的表现就会一样好。低于12像素,衬线字体渲染的不够锐利,但反正(这把我们带到第二点)在现代的显示器上12像素实在太小。

所以你需要按照网站的字体大小需求来决定用衬线还是无衬线,因此对于字体大小我们又值得讨论下了…

大小

你的正文字体的大小并非由你的个人喜好决定。它取决于阅读距离。考虑到通常电脑要比书本远,桌面字体的尺寸需要比印刷品上使用的字体更大。

下边的插图说明,正文文本离你越远,它就应该更大。两个黑色的A和两个红色的A的尺寸相同。但由于右边放的较远,看上去更小。右图中的红色A看上去和左图中的黑色A一样大:

文字大小比较

你把文本放得越远,它看起来就越小。文本放的越远,你需要把它设的更大来弥补一个更大的阅读距离。到底要多大,这里边也有学问。如果你没有经验,一个好用的办法是,手举一本印刷良好的书,把它放到一个能够让你舒服地阅读的距离,同时朝你的网站看来比较。

没有 Web 设计经验的平面设计师会对 Web 上良好的正文字体与印刷品相比需要达到的大小感到吃惊。注意,只有当你把它边靠边比较时它才算大,在一定距离看则不会。

文字大小和电脑屏幕对比

如果在增大正文字体大小来匹配后,新的文字大小一开始吓到你,别担心,这是正常的。不过,一旦你习惯了它,你就不会再去用“标准”的字体大小了。

2006年开始推这些 “perspectively proportional (远视比例)”字体大小。当一开始宣扬用16像素 Georgia 做正文字体的基准引来不少愤怒的眼光和嘲笑,但现在它或多或少已经是一项共同标准。随着分辨率的不断提高,那项标准正慢慢过时。

行高和对比度

虽然正文文字大小可以通过距离观察的方法来估算,行高则需要一些调整。考虑到更大的阅读距离和(我们所说的)像素点问题,最好给屏幕文本比印刷文本更多一点的行高。140%是一个不错的基准,但当然,这取决于你所用的字体。

行高

今天你要确保对比度不是太低(如,灰色文字在浅灰色背景上)或太花哨(如,粉红色在黄色上)。由于屏幕字体排印是设计为白底黑字,用较暗的背景会遇到点困难,但如果做的正确的话,也可以。现代高对比度屏幕让深灰色文字或浅灰色背景的使用也成为可能,取代深黑色字体加白色背景。但这也并非最重要的问题。

部分内容来自:http://informationarchitects.net/blog/responsive-typography-the-basics/

原文还有更多的讨论,关于移动设备的,如果你有兴趣可以去探索探索。

热门文章