一个非创意性质的网页,最重要的内容,就是文字。出现了文字,就会出现文字排版、字体选择、字体颜色大小粗细等细节。而这些细节,往往是网页设计中非常重要的细节。
好的字体排版,可以让人耐心的看完那些文字,然后得到其中的重要信息,还可以影响到浏览者阅读的心情。同时,字体的选择、大小等,还应该配合企业的VI识别系统,还需要配合你作品需要表达的思想感情来确定(例如古典风格,应该选择哥特式字体等)。
字体的分类和格式
衬线和无衬线
衬线算是一种辅助性的小细节,笼统的谈,太过于抽象,我们来看两个例子:
这两个字体,是有衬线字体,大家可以看到在边角的位置,会多出一些修饰。这样的好处就是,可以清晰的分辨出字母和文字,分辨笔划的起始和终止。但是,这种字体如果设置字体大小太小的话、或者距离文字较远,则会受到衬线影响,分辨不清晰。同时,由于中文系统,默认的字体为宋体,见的太多导致审美疲劳,所以衬线字体比较适合打印文字以及正规文档中使用,通常不太适合使用在网页中。
这两个字体,就是无衬线字体,没有边角的修饰,令人看起来很整齐光滑,没有毛刺。比较适合用在网页中,让浏览者获取大量的文字信息而不会疲劳。
字体系列
字体之间最大的差异并不在于有无衬线,而在于字体与字体之间,形体的差异。但是很多字体(特别是英文字体)之间,差异不大,有些新字体甚至是对已有字体进行了细微的改造后产生的。
于是,就把字体分成了几个大的系列,同一个系列中的字体,大体相同,称作通用字体系列。其中包括以下五个系列:
serif:带衬线字体。Times New Roman 是默认的 serif 字体,中文字体的话,是宋体、仿宋之类的字体。
sans serif:无衬线字体。Arial 是默认的 sans-serif 字体,中文字体中,微软雅黑、黑体等都是这类字体。
monospace:等宽字体。这个字体里面的每个字母都有相同的宽度。通常用于显示程序代码等,Courier 是默认的 monospace 字体。而对于中文,每个汉字都是等宽的。
cursive:模仿手写字体。手写体,比较个性,通常用于标题、logo等等。这个字体系列没有默认字体,英文来说,通常用 Comic Sans,中文的话,行书系列、草书系列的字体等,都可以算作手写字体。
fantasy:装饰用字体。多数用于标题,极具个性,字体繁多,艺术字体。无法对其的大小、形状下一个统一的定论,所以没有默认字体,在网页中,也通常很少用到,除非你有特殊的用处创意性的设计。
字体的格式
格式就是指字体表现出来的粗细、宽度和姿态等等特征。看下面的这张图片:
里面的字,是相同大小的,同时排放在一条竖线上。为其应用了四种不同的字体后,体现出来了不同的形态和粗细大小。在中文字体中,不同的字体,在字间距中通常没有很大的变化。而在英文字体中,不同的字体会改变字母的大小,导致整体的尺寸布局不同,进而导致整个排版混乱。
相同的字体大小,在不同的字体下面,显示的效果几乎完全不同。这是英文字体选择中,比较麻烦和头疼的问题。
字体的选择
那么如何在网页设计中选择合适的字体呢?主要有创意性和实用性两个原则。创意性一般体现在为配合网页设计的主题而选择相应的字体,在BANNER设计或者页面局部设计使用特殊字体,制造一种新奇的感觉。
实用性则不需要过多华丽的修饰,重点在于传递信息,舒适为妥。
字体大小选择
说到字体大小的选择,还要考虑网站运行设备以及视距两个因素。
设备就是指显示设备的分辨率及屏幕大小,如果在一块非常大的分辨率非常低的屏幕(像广场电子屏),即使很小的像素,也会展示出很大的字。这也就是为什么早期的 800×600 像素横行的时候,大家都是用12px大小的原因。因为显示的文字已经够大了。
视距就是指浏览者看文字的距离。很明显的道理,眼睛距离屏幕越远,看起来上面的文字就变小了。
所以在选择网页中字体大小的时候,还需要考虑你的用户的实际使用习惯。同一个网页,在笔记本上和在手机上使用的时候,字体大小就不应该相同,因为电脑屏幕大分辨率高,而且视距通常比较近而且固定,手机等屏幕小分辨率较低,视距更近(大家都喜欢躺着或者趴着玩手机啦),所以这些都要考虑,才能得到一个合理的大小。
字体的颜色选择
网页中的文字,通常使用黑色,或者浅灰色,这样更加符合大众的口味。如果不是一些很有创意的设计,请不要随便的使用颜色。另外,颜色要与背景有一定的对比度。低对比度,容易导致字体看不清楚。所以要用高对比度的颜色,例如白底黑字,黑底白字等。
要记住,不同的字体会赋予网站截然不同的感觉,把握好字体的细节就能掌控好网站的感觉。但是网站的最终目的还是传达信息,让人阅读的。所以在调整效果完之后,不妨后退一步仔细审视一下,用户能否读到所有你写上去的文字。