《写给大家看的设计书》字体篇

字体动态关系:协调、冲突或是对立(对比)的关系。协调关系:如果只使用一个字体系列,在样式、大小、字体粗细等方面没有什么变化就会产生一种协调关系。保持页面的协调性很容易,而且看上去这种安排很安静,非常正式,有时也可以认为相当乏味。冲突关系:如果结合使用了多种字体,它们在样式、大小、字体粗细等方面很类似(但并不相同),就会出现一种冲突的关系。这种相似性会造成困扰,因为我们所看到的不完全一样(协调),也并非完全不同(对立或对比),所以它们是冲突的。对比关系:如果结合的多种字体和元素彼此之间截然不同,就会出现一种对比关系。引人注目的亮丽设计往往包含大量对比,而且这些对比会得到充分强调。要在设计中增加对比,最有效、最简单而且最让人满意的方法之一就是利用字体。

如果很难发现结合多种字体时出了什么问题,不要只关注字体之间有什么不同,而要重点查看它们有什么相似之处,正是由于这种相似性才导致了问题出现。注意每一类字体存在哪些相似性使它们可以划归为同一个字体类别,在有意识的对比字体之前,需要先了解这几组字体设计之间的相似性,因为正是这种相似性才导致了字体组合使用时的冲突。

一、字体类别:1、Oldstyle:此类别中的字体时基于手写体创建的,oldstyle字体都有截线,而且小写字母的截线总有一个角度(笔的角度)。oldstyle字体中的所有曲线笔划都有一种从粗到细的变化,这称为“粗/细过渡”。笔划中的这种对比较缓和,这说明它只是从比较细变化(过渡)为稍微粗一点。如果在曲线笔划的最细部分画一条线,这条线将是对角线,这条线称为强调线--oldstyle字体有一条对角强调线。由于这种字体的“不可见性”(看不出存在差异),使得oldstyle字体成为显示大量文字的最佳选择。该类字体几乎没有什么显著的特征会影响阅读,它们本身不会分散人的注意力,如果你希望人们具体去读某些文字,可以选择设置为oldstyle字体。

2、Modern:Modern字体有截线,不过它们的截线是水平的,而不再倾斜,而且这些截线很细。这种字体就像一座钢铁大桥,结构很严格,笔划中有剧烈的粗/细过渡(或对比)。由于不存在笔的倾斜,所以强调完全是垂直的,这种字体看起来往往有一种冷酷、高雅的感觉。Modern字体外观很醒目,特别是设置的非常大时有一种让人很震撼的感觉。由于有剧烈的粗细过渡,在显示大量正文时,大多数Modern字体都不是很好的选择。细线几乎完全消失,而粗线太过突出,在页面上这种效果称为“炫目”。

3、Slab serif(粗衬线体):这种字体的粗细过渡很小甚至没有。这一类字体有时称Clarendon,因为该字体(如下图)是这种类型的典型代表。也称为Egyitian字体,因为是在古埃及文明期间盛行起来的字体。粗细对比很小的许多Slab serif字体(如Clarendon或New Century Schoolbook)可以提供很好的可读性,这说明它们可以很好的用于显示大量文本。不过相比于Oldstyle来说设置为这种字体的页面更暗,因为它们的笔划比较粗,而且粗细相对单一。由于简陋、直接的外观,Slab serif常在儿童图书中使用。

4、Sans serif(无衬线体):指的是笔划末端没有截线的字体。这种字体的粗细几乎总是单一的,这说明笔划中几乎没有可见的粗细过渡,字体的粗细都一样。如果你的字体库中的sans serif字体只有Helvetica和Avant Garde,要想更好的设计页面,最好的做法就是引入包括一个很粗很黑字体的Sans serif字体系列。引入这样一个字体系列后,将大大提升页面的效果,看到由此产生的亮丽页面定会让你惊讶不已。                      大多数Sans serif字体的粗细都是单一的,不过,也有很少的几种字体稍微有一些粗细过渡。如Optima字体有一条强调线,这种字体在页面上很难与其他字体结合,他们与serif字体在粗细笔划方面存在相似性,另外由于没有截线这一点又与Sans serif字体相似,所以要使用这种字体必须很小心。

5、Script(手写体):看上去利用一个书法笔或书法刷(或有时用钢笔或专业笔)手写的所有字体都属于Script类字体。这一类字体还可以很容易的划分为连笔手写体、不连笔手写体、手工书写的手写体、模仿传统书法风格的手写体等。Script字体要少用,这样才不会让人觉得恶心,当然,绝对不能将大段文本设置为这些有趣的字体,而且绝对不能设置为全大写。不过Script设置的非常大时可能会让人印象深刻。

6、Decorative(装饰字体)这种字体很容易看出来,它本身很不错,它们不仅有趣而且特别,很易于使用,有时更廉价,而且你一时想表达的任何突发奇想都可以使用这种字体。正是由于它们如此特别,所以这种字体的使用要有限制。Decorative字体可以传达鲜明的情绪,取决于在什么场合使用这些字体,或者可以让它们传达与你第一印象完全不同的内涵。


二、字体对比(对比字体的各种方法):如何在页面上应用字体对比原则,字体对比不仅是为了美观,还可以加强意思的表达。不应该要求读者去努力寻找页面的内容,而应该让用户一眼就能看出来,在保证一目了然的同时还可以让页面更漂亮。

1.size(大小):如果想在字体大小方面让两个元素产生对比,这种对比就必须足够大,要力求明显。确定希望哪个元素作为中心点,利用对比来突出强调。字体大小对比并不意味着必须让字体很大,而只是要求应该有对比(如你看到一张很大一版报纸中只有一行很小的文本,你肯定很想看看这是什么,对不对?之所以能够产生这种吸引力一个重要原因就是这个大页面与非常小的字体之间产生了明显的对比。)不要全部使用大写,文本设置为全大写时,与同样的文字使用小写相比,所占的长度可能是后者的两倍,所以不得不让字体更小一些,反之,如果将文本变成小写,则可以设置为更大的字体,且具有更有的可读性。要以一些有煽动性的非常规方式造成大小对比,许多印刷符号(如数字、&符号或引号)设置的很大时会非常漂亮,在标题或引用文字中可以把它们用作装饰元素,或者可以在整个出版物中用作重复元素。如果大小对比非同一般,这本身就能成为一种图形元素。

2、weight(粗细):字体的粗细是指笔划的粗细度。大多数字体系列都设计为包括多种不同的粗细:常规、粗体,可能还有半粗体、极粗,或细字体。结合多种不同字体粗细时,记住不能太保守。粗细对比是为页面增加视觉效果最容易而且最有效的办法之一,而且无需重新做任何设计。有一点必须明确:除非有一种笔划很粗大的字体,否则得不到这种漂亮的强烈对比。如果一个页面完全是灰乎乎的,偶然路过的读者可能不愿意继续看下去,但是利用粗细字体的对比,读者可能会很快扫描要点,而且深入阅读其中信息的可能性更大。(但也有可能有些杂志特意将黑白页面的外观设计的很单一正式,是为了给读者一种更严谨的印象,所以要根据场合做合适的设计。)

3.structure(结构):字体的结构是指这种字体是如何建立的。结构是指一种字体如何构建,每个类别的结构都有很大差别。不要把同一个类别中的两种字体放在同一个页面上。不要把两种sans serif字体放在同一个页面上,而且不能把两种serif字体放在同一个页面上。如果非要这样做,要求必须选取两个不同字体类别中的字体,即可以使用两种serif,只要其中一种是oldstyle字体,而另一个时modern或slab serif字体,而且要特别强调对比。刚刚开始了解到字体结构存在差异的有关概念时,要想选择有对比的结构,一种容易的方法就是选择一个serif字体和一个sans serif字体。serif字体的结构中通常存在粗细对比,sans serif字体则往往有一致的粗细对比,不过仅仅靠结构的对比还不够,还需要与其他对比相结合,如同时利用大小或粗细对比来强调差异。在一个页面上同时设置两种sans serif字体往往很困难,因为它们只有一种结构即粗细一致。不要试图结合两种sans serif字体,而应当使用一个sans serif系列中的不同成员采用其他方式建立对比。

4、form(形状):字母的形状是指它的外形,字符可能有相同的结构,但是“形状”不同。(如大写字母“G”和同一个系列中的小写字母“g”结构相同,但是它们的具体形状彼此完全不同。)可以简单的把形状对比认为是大写与小写的对比。如果一个词采用全大写,整个词的形状也与小写词不同,正是由于这个原因使得全大写很难读。我们认一个词不仅是从它的各个字母来认,还很根据其形状来辨认,即整个词的形状。所有设置为全大写字母的词都有类似的形状(即都是矩形),为此我们不得不逐字母的认单词。尽管全大写会降低可读性和可识别性,但是如果你很肯定全大写对设计外观带来的好处更有意义,那么完全可以继续使用全大写。另一种明显的形状对比是roman字体与italic字体的对比(一开始相同的字体,一倾斜形状就有所改变)。roman表示所有字体中从上到下竖直的字体,这不同于italic或script字体(这些字体是倾斜而且或漂浮的)。可以将一个词或短句设置为italic字体,以一种柔和的方式进行强调。由于所有script和italic字体都有一种倾斜或漂浮的形状,所以不要结合使用两种不同的italic字体或两种不同的script字体,也不要结合使用一个italic和一个script,这样只会带来冲突。

5、direction(方向):字体“方向”的意思很直观,就是文字有一定倾斜度。不要设置方向,只有当你能明确的说出原因时才可以设置有方向的文本,你要能够说明为什么这种字体必须有方向,为什么它能增加美感或促进表达。千万不要在角落里放有角度的字体。向右向上倾斜的字体产生一种前进的力量,向下倾斜的字体会产生一种反向的力量,有时可以充分利用方向所蕴含的含义。如果布局中可能存在方向的对比,那就充分进行强调,如在水平方向使用一种扩展字体,而在垂直方向使用一种高字体,可以通过增加额外的行间距强调垂直方向,如果合适还可以设置比原计划更窄的列突出垂直方向。实现字体方向对比时还可以介入布局中的其他部分,如结合图片或线条来强调方向或形成方向反差。

6、color(颜色):暖色(红色、橙色)是前进型的,会引起我们的注意,我们的眼睛很受暖色的吸引,所以只需很少的一点红色就可以产生对比。冷色(蓝色、绿色)则是远离型的,总是在我们的视觉中后退,即使更大的区域内都是冷色你也未必能注意到,实际上需要更多的冷色才能产生有效的对比。“颜色”是由不同的字母粗细、结构、形状、字母内的空间、字母间的间距、行间距、字体大小或x-height大小等产生的。即使是同一个字体,也可创建不同的颜色。很细、很薄的字体中字母间间距和行间距较大,这会创建一种非常淡的颜色(和材质)。紧紧压缩在一起的粗体sans serif则会创建一种深色(有不同的材质)。对于没有图片但包含大量文本的页面来说,这是一种非常有用的对比。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,511评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,495评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,595评论 0 225
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,558评论 0 190
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,715评论 3 270
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,672评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,112评论 2 291
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,837评论 0 181
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,417评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,928评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,316评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,773评论 2 234
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,253评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,827评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,440评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,523评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,583评论 2 249

推荐阅读更多精彩内容