![](https://i-blog.csdnimg.cn/blog_migrate/8469244b58b5b22469a57544ab38b082.webp?x-image-process=image/format,png)
Number.55,分享一篇《写给大家看的设计书》读书笔记-字体与人生:
今天接着看《写给大家看的设计书》,看到了字体部分,对于字体的整个发展体系有了一定的了解,收获很大。虽然书中讲的大部分是英文体系的字体知识,但是对于中文体系的字体学习还是有一定的帮助。内容包括:字体关系、字体类别、字体对比。
1 字体关系
协调
what 如果只使用一种字体系列,在样式、大小、字体粗细等方面没有什么变化,就会产生一种协调关系。 |
效果 看上去很安静、非常正式,但是有时也会觉得乏味。 |
冲突
what 如果结合使用了多种字体,它们在样式、大小、字体粗细等方面很类似,就会出现一种冲突。 |
效果 (1)这种相似性会造成困扰,因为我们看到的不完全一样,但也并非完全不同,所以它们是冲突的。 (2)协调是一个稳妥有用的概念,但冲突务必要避免。 |
对比
what 如果结合的多种字体和元素彼此之间截然不同,就会出现一种对比关系。 |
效果 (1) 引入注目的亮丽设计往往包含大量对比,而且这些对比会得到充分强调。 (2) 对比不只是能增加作品的美感,页面上信息的条理性和清晰性与对比密不可分。 (3) 要在设计中增加对比,最有效、最简单而且最让人满意的方法之一就是利用字体。 |
2 字体类别
Oldstyle
What 基于手写字体创建的。 |
外观 (1) 粗/细过渡
(2) 截线:小写字母上的截线是倾斜的
(3) 强调线:如果在曲线笔划的最细部分画一条线,这条线将是对角线,称为强调线(stress) |
效果 Oldstyle字体几乎没有什么显著的特征会影响阅读,它们本身不会分散人的注意力,使得Oldstyle字体成为显示大量文字的最佳选择。 |
Modern
What 历史的演进,字体变得机械,新的字体不再遵循手中所拿笔的笔迹。 |
外观 (1) 截线:Modern字体有截线,不过它们的截线是水平的,而不再倾斜,而且这些截线很细。 (2) 粗/细过渡:Modern字体就像一座钢铁大桥,结构很严格,笔划中有剧烈的粗/细过渡。 (3) 强调线:由于不存在笔的倾斜,所以强调线完全是垂直的。 |
效果 (1) Modern字体看起来往往有一种冷酷、高雅的感觉。 (2) Modern字体外观很醒目,特别是设置得非常大时,有一种让人震撼的感觉。 (3) 由于有剧烈的粗/细过渡,在显示大量正文时,大多数Modern字体都不是很好的选择。 |
Slab serif
what (1) 工业革命,产生一个新的概念——广告。 (2) 开始人们采用Modern字体,但是远处看,看到的都是一条条垂直线,就像一个栅栏。 |
外观 (1) 截线:小写字母上的截线粗,且是水平的 (2) 粗/细过渡:Slab serif的粗/细过渡很小,甚至没有 (3) 强调线:垂直强调线 |
效果 (1) 粗/细对比很小的许多Slab serif字体,可以提供很好的可读性,它们可以很好地用于显示大量文本。 (2) 与Oldstyle相比,总的看来,设置为这种字体的页面更暗,因为它们的笔划比较粗,而且粗细相对单一。 (3) 由于其简洁、直接的外观,Slab serif常在儿童图书中使用。 |
Sans serif
What 指笔划末端没有截线的字体,直到20世纪早期,才取得广泛成功。 |
外观 (1)截线:没有截线。 (2)粗/细过渡:笔划中没有粗细过渡。 (3)强调线:没有强调线,因为根本没有粗/细变化。 |
效果 (1) Sans serif字体的粗细几乎总是单一的,这说明笔划中几乎没有可见的粗/细过渡,字体的粗细都一样。 (2) 大多数Sans serif字体的粗细都是单一的,也有很少的几种字体稍微有一些粗/细过渡。 |
Script
What 看上去利用一个书法笔或书法刷手写的所有字体,都属于Script类字体。 |
效果 (1)Script字体就像奶酪蛋糕,要少用,这样才不会让人觉得恶心。 (2)绝对不能将大段文本设置为这些有趣的字体,而且绝对不能设置为全大写。 (3)Script设置得非常大时,可能会让人印象特别深刻。 |
Decorative
What 如果一本书全部使用一种字体,读这样一本书让你很想把它扔掉,那大致可以认为这种字体属于一种Decorative字体。 |
效果 (1) Decorative字体有趣而且特别,很易于使用,有时更廉价,而且你一时想表达的任何突发奇想都可以使用这种字体。 (2) 正是因为它的特别,所以这种字体的使用要有限制。 |
3 字体对比
大小(size)
What 顾名思义,就是指字体的大小。 |
不要保守 (1)字体大小的对比非常明显。 (2)为了有效使用大小对比,绝对不能保守,要力求明显,不要让人觉得这是一个失误。 (3)字体大小对比并不意味着必须让字体很大,而只是要求应该有对比。 |
再三建议不要全部使用大写 (1)文本设置为全大写时,与同样的文字使用小写相比,所占的长度可能是后者的两倍。 (2)如果将文本变成小写,将有更好的可读性。 |
要以一些有煽动性的非常规方式造成大小对比 (1)许多印刷符号设置得很大时会非常漂亮。 (2)使用一个大小非比寻常的项,看看能不能在别处重复这个概念。 |
粗细(weight)
what (1)字体的粗细是指笔划的粗细度。 (2)粗细对比是为页面增加视觉效果最容易而且最有效的方法之一,而且无需重新做任何设计。 (3)粗细对比不仅能使页面更加引人注目,也是组织信息的最有效的方式之一。 |
大多数字体系列都设计为包括多种不同的粗细 (1)常规regular (2)粗体bold (3)半粗体semibold (4)极粗extra bold (5)细体light |
不要太保守 (1)如果结合两种不同字体系列中的字体,一种字体通常比另一种要粗,所以要特别强调。 (2)要粗细字体对比,而不是中粗字体的对比。 |
衷心希望你至少引入一种非常粗的黑粗体 如果你的页面看上去“灰乎乎”的,而且没有空间来增加图片,也无法抽出引用文字把它们设置为图片,就可以用非常粗的粗体设置关键短句。 |
结构(structure)
what (1)字体结构是指这种字体是如何建立的。 (2)每种字体类别都有类似的结构,每个类别的结构有很大差别。 (3)Robin原则:不要把同一个类别中的两种字体放在同一个页面上。 |
初学者的选择 (1)如果你刚刚了解到字体结构存在差异的有关概念,要想选择有对比的结构,一种容易的方法就是选择一个serif字体和一个sans serif字体。 (2)serif字体的结构中通常存在粗/细对比,sans serif字体则往往有一致的粗细。 (3)将serif与sans serif结合,是一种经过了时间检验的组合方法。 |
形状(form)
what 字母的形状是指它的外形,字符可能有相同的结构,但是“形状”不同,可以简单地把形状对比认为是大写与小写的对比。 |
两种形状对比 (1) 大写/小写
(2) roman字体和italic字体的对比
|
方向(direction)
what (1) 就是文字有一定的倾斜度。 (2) 尽管可以理解为文本有一定倾斜方向,但更多地认为方向对比是指水平文本与瘦高文本列的对比。 |
强调一点:不要设置方向 (1) 只有当你能明确说出原因时,才可以设置有方向的文本,你要能够说明为什么这种字体必须有方向,为什么它能增加美感或促进表达。 (2) 实现字体方向对比时,还可以介入布局中的其他部分,如结合图片或线条来强调方向或形成方向反差。 |
颜色(color)
暖色(红色、橙色) 暖色是前进型的,会引起我们的注意,我们的眼睛很受暖色的吸引,所以只需很少的一点红色就可以产生对比。 |
冷色(蓝色、绿色) 冷色是远离型的,总是在我们的实现中后退,需要更多的冷色,才能产生有效的对比,要有效地与一个冷色进行对比,通常也需要使用更多的冷色。 |
“黑白文字也能产生颜色” (1) “颜色”是由不同的字母粗细、结构、形状、字母内的空间、字母间距、 行间距、字体大小或x-height大小等产生的,即使是同一个字体,也可以创建不同的颜色。 (2) 很细、很薄的字体中,字母间距和行间距较大,会创建一种非常淡的颜色(和材质)。 (3) 紧紧压缩在一起的粗体sans serif则会创建一种深色。 |
结合多种对比
(1) 不要保守:大多数有效的字体布局都会充分利用多种对比。 (2) 要得到更多的例子和想法:可以拿一本好的杂志看看,吸收思想。 (3) 尽量明确地说出你看到了什么:如果可以用语言说清楚这种关系的变化,说明你确实已经掌握。 (4) 指出问题,你就能找出解决方案:试图找出一个更好的解决方案之前,必须发现问题所在,要找出问题,必须努力寻找相似性,而不是差异。 |
感谢阅读!
我是Glen,【公众号JiGlen】,觉得好的话,可以关注一下哦!
0岁的产品人,爱互联网,爱生活,坚持分享产品干货!
大家也可以在PC或MAC上登陆以下网址查看以往文章:
http://chuansongme.com/account/Ji_Glen
![]()