Oh!Coder

Coding Life

UI设计中的文字元素(四)-字体对比

| Comments

这一次,我们将讲述如何结合使用各种字体。

首先,不应该要求读者去努力寻找页面的内容,如重点、材料的组织、用途、信息流程等等,所有这些应该一眼就能看出来。在保证一目了然的同时,还可以让页面更漂亮!

具体,我们将讨论以下几种字体对比:

  • 大小
  • 粗细
  • 结构
  • 形状
  • 方向
  • 颜色

1、字体大小的对比

字体大小的对比(也就是大字体与小字体的对比)非常明显。不过,为了有效地使用大小对比,绝对不要保守。12点和14点大小的字体无法形成明显地对比,大多数情况下,它们只会产生冲突。同样的,65点与72点的字体也相差无几,不能形成对比。如果想在字体大小方面让两个元素产生对比,就放手去做。要力求明显,不要让人觉得这是一个失误。

字体大小对比并不意味着必须让字体很大,而只是要求应该有对比。例如,如果你看到一张很大一版报纸中只有一行很小地文本,你肯定很想看看这是什么,对不对?之所以能够产生这种吸引力,一个重要原因就是这个大页面与非常小的字体之间产生了明显的对比。这里再三建议不要全部使用大写。有时你可能想使用全大写来让文字更大一些,是吗?但具有讽刺意味的是,文本设置为全大写时,与同样的文字使用小写相比,所占的长度可能是后者的两倍,所以不得不让字体更小一些。反之,如果将文字变成小写,则可以设置为更大的字体(点数)更大,而且这样做还有一个好处,将有更好的可读性。

要以一些有煽动性的非常规方式造成大小对比。许多印刷符号(如数字、&符号或引号)设置很大时会非常漂亮。在标题或引用文字中可以把它们用作装饰元素,或者可以在整个出版物中用作重复元素。

2、字体的粗细

字体的粗细是指笔划的粗细度。大多数字体系列都设计为包括多种不同的粗细:常规(regular)、粗体(bold),可能还有半粗体(semibold)、极粗(extra bold),或者细字体(light)。结合多种不同字体粗细时,要记住这样一个规则:不要太保守。不要把常规粗细与半粗体对比,完全可以找一种更粗的字体与之对比。如果结合两种不同字体系列中的字体,一种字体通常比另一种要粗,所以要特别强调。

个人计算机默认提供了一些字体,但所有这些字体所属的字体系列中都不包括非常粗的粗体。衷心希望你至少引入一种非常粗的黑粗体。在字体表中查查看,找出一种合适的字体。粗细对比是为了页面增加视觉效果最容易而且最有效的方法之一,而且无需重新做任何设计。只是有一点必须明确:除非有一种笔划很粗大的字体,否则得不到这种漂亮的强烈对比。

粗细对比不仅能使页面更引人注目,也是组织信息的最有效的方式之一。实际上,你将新闻简报标题和子标题设置得更粗时已经在做这个工作。基于这种思想,再把它向前推进一步。看看下面的目录,注意由于关键标题或短句设置得非常粗,由此你能立即领会这些信息的层次体系。这种技术对于索引也很有用:能使读者月秒年就看出一个索引项是一级索引还是二级索引,这样就能消除按字母查找时经常出现的混乱。

如果你的页面看上去“灰乎乎的”(有大篇幅的文字),而且没有空间来增加图片,也无法抽出引用文字把它们设置为图片,就可以用非常粗的粗体设置关键短句。这些设置会把读者吸引过来看你的页面。

3、字体的结构

字体的结构是指这种字体是如何建立的。可以想像你要利用库房里的材料建立一个字体。有些字体建立时粗细很单一,笔划里几乎没有能辨别的粗细变化,就好像是用粗细相同的钢管建立的一样(如大多数sans serif字体)。其他字体的建立则非常强调粗/细过渡,就像是有尖桩的栅栏(如modern字体)。还有一些字体则介于二者之间。如果你要结合使用来自两种不同字体系列中的字体,就要使用不同结构的字体系列。

还记得这一部分前面关于不同字体类别的内容吗?不错,这里要用到那些内容。每种类别都有类似的结构。所以,如果从两个或多个类别中选择两个或多个字体,应该是一个不错的字体方案。

你读过The Mac is not a typewriter或The PC is not a typewrite吗?(如果还没有,真应该好好读一读)。在那两本书里,指出不要把两种sans serif字体放在同一个页面上,而且不能把两种serif字体放在同一个页面上,除非你经过一些排版培训。如果说以上就是你的排版培训,某种情况这么做也确实是允许的,即在同一个页面上设置两种sans serif字体或两种serif字体。

不过这样做有一个原则,要求必须选取两个不同字体类别中的字体。也就是说,可以使用两种serif,只要其中一种是oldstyle字体,而另一个是modern或slab serif字体。即使如此,还是必须非常小心,而且要特别强调对比,但不管怎么说这么做确实是可以的。

采用同样的思想,要避免同一个页面上出现两种oldstyle字体,它们存在太多的相似性,不论你怎么做冲突都在所难免。出于同样的原因,应当避免同时设置两种modern或两种slab字体。另外还要避免在同一个页面上使用两种script字体。

不同的字体最初看上去就像动物园里的老虎难以区分。所以,如果你刚刚了解到字体结构存在差别的有关概念(一种字体看上去不同于另一种字体),要想选择有对比的结构,一种容易的方法就是选择一个serif字体和一个sans serif字体。serif字体的结构中通常存在粗/细对比,sans serif字体则往往有一致的粗细。将serif与sans serif结合,这是一种经过了时间检验的组合方法,具体的做法数不胜数。

在一个页面上同时设置两种sans serif字体往往很困难,因为它们只有一种结构,即粗细一致。如果你特别聪明,也许能做到同时设置两种sans serif字体(有很少的几种sans serif字体笔划中存在粗/细过渡,如果你用到这其中的某种字体,确实能达到目的),不过,并不建议做这种尝试。不要试图结合两种sans serif字体,而应当使用一个sans serif系列中的不同成员采用其他方式建立对比。sans serif字体系列通常提供了完备的字体集,从很细的字体,到非常粗的字体都一应俱全,而且通常还包括压缩或扩展字体。

4、字体的形状

字母的形状是指它的外形。字符可能有相同的结构,但是“形状”不同。例如,大写字母“G”与同一个系列中的小写字母“g”结构相同。不过,它们的具体形状彼此完全不同。可以简单地把形状对比认为是大写与小写的对比。

各个大写字母的形状不同于相应的小写字母,除此之外,如果一个词采用全大写,整个词的形状也与小写词不同。正是由于这个原因,使得全大写很难读。我们认一个词不仅是从它的各个字母来认,还会根据其形状来辨认,即整个词的形状。所有设置为全大写字母的词都有类似的形状(即都是矩形)。

我一直在反复强调不要使用全大写,你可能耳朵都听出老茧了。我并不是说永远都不要使用全大写。显然,全大写并不是完全不能读。只是要当心,完全使用大写会降低可识别性和可读性。有时你可能会有异议,认为从你的作品设计“外观”来看,使用全大写很合适,没错!不过,你也必须承认,单词读起来不太容易。尽管全大写会降低可读性,但是如果你很肯定全大写对设计外观带来的好处更有意义,相比之下利大于弊,那么完全可以继续使用全大写。

另一种明显的形状对比是roman字体与italic字体的对比。roman表示所有字体中从上到下竖直的字体,这不同于italic或script字体(这些字体是倾斜而且/或者漂浮的)。可以将一个词或短句设置为italic字体,以一种柔和的方式进行强调,这是你很熟悉的一个概念,可能经常在使用。

由于所有script和italic字体都有一种倾斜和/或漂浮的形状,要记住重要的一点,不要结合使用两种不同的italic字体或者两种不同的script字体,也不要结合使用一个italic和一个script。这样做只会带来冲突--它们存在太多的相似性。幸好,找到一种好的字体来连接script或italic并不困难。

5、字体的方向

字体“方向”的意思很直观,就是文字有一定倾斜度。显而易见,对此我只想指出一点:不要设置方向。不错,有时你可能想这么做,但是只有当你能明确地说出原因时才可以设置有方向地文本,你要能够说明为什么这种字体必须有方向,为什么它能增加美感或促进表达。例如,可能你会说:“这个赛艇通知确实应当向右倾斜一个角度,因为这个角度可以使页面产生一种向前地动力。”或者说:“重复这个有角度的字体,可以产生一种断秦地效果”,这能突出我们播出的巴托克作品的气势。“另外,请千万不要在角落里放有角度的字体。

不过,对于“方向”还有另一种解释。尽管页面上文本元素很普遍,但每个文本元素都有一个方向。一行文本表现为水平方向。瘦高的一列文字表现为垂直方向。文字这些复杂的方向变化可以形成有趣的对比。例如,一个粗体标题在水平方向覆盖双页,而正文分别放在一系列瘦高的列中,这会产生一种有趣的方向对比。

实现字体方向对比时还可以介入布局中的其他部分,如结合图片或线条来强调方向或形成方向反差。除此之外,还要注意,材质是由不同字体的结构、行间距、字母间距、粗细度、大小和形状共同创造的。如果字母都鼓起,可以用手指触摸,每种字体的对比还会带来一种材质的对比,你可以从视觉上“感受”到这种材质。这是字体的一个很微妙但很重要的部分。应用其他对比时会自动出现不同的材质,不过有意识地注意材质及其效果很有好处。

6、字体的颜色

类似于方向,颜色的意思也显而易见。关于如何使用颜色,我只想声明一点,要记住暖色(红色、橙色)是前进型的,会引起我们的注意。我们的眼睛很受暖色的吸引,所以只需很少的一点红色就可以产生对比。另一方面,冷色(蓝色、绿色)则是远离型的,总是在我们的视线中后退。即使更大的区域内都是冷色你也未必能注意到;实际上,需要更多的冷色才能产生有效的对比。

不过,排版人员通常称页面上的黑白文字有颜色。“多姿多彩”的颜色很容易产生对比;而对于黑白文本,要看出并利用它的颜色对比,则需要更敏锐的眼睛。

“颜色”是由不同的字母粗细、结构、形状、字母内的空间、字母间间距、行间距、字体大小或x-height大小等产生的。即使是同一个字体,也可以创建不同的颜色。

很细、很薄的字体中字母间间距和行间距较大,这会创建一种非常淡的颜色(和材质)。紧紧压缩在一起的粗体sans serif则会创建一种深色(有不同的材质)。对于没有图片但包含大量文本的页面来说,这是一种非常有用的对比。如果一个页面中只有文本,看上去一片灰色,会显得很乏味,让人不想去读。

如果对标题和子标题使用一种更粗的字体来增加一些“颜色”,或者将一个引用文字、段落或小故事设置为显然不同的另一种“颜色”,读者将更有可能在这一页上停下来,真正阅读它的内容。这正是我们的目的,不是吗?

除了让页面更吸引人,颜色的改变还有助于组织信息。大多数编排精良的好书都会利用大块文本显示丰富的字体,使你能在页面上感受到颜色和材质。字体开发商提供的书会展示字体样本,一个非常棒的字体样本将通过文本块显示每一种字体进行颜色比较,你也可以在计算机上自己做这种比较。

好啦,上面对六个方面做了简要的介绍,关键还得实战啊!加油!

Comments