设计出漂亮的字体组合效果的十个黄金规则

小编:今天给大家带来一篇关于在设计中对字体的选择以及组合的基本规则,感谢作者@喪心病狂十六夜貓的翻译与分享。文中介绍了不同系列字体如何组合使用,相同系列字体如何表现他们的对比等等多种组合形式。最主要的还是需要多加练习、多多尝试不同的组合,通过不断地努力与错误,最终你会得到属于你的创新能力!

这篇文章是上一篇文章《二十个利用对比设计的方法》中第18条提到的用字体组合来增加对比效果里提到的那篇文章。

设计或者艺术的世界,是没有什么一成不变的法则的。了解了基本的规则之后,我们就可以加入自己的想法,自由的去打破规则。那么,来学习字体组合的一些基本规则吧。一起来看看在设计中已经被证明可以使用的几个规则,然后运用到实践之中吧。

详细从以下开始

01.选择与设计相符的字体

许多字体有着简便,开朗,正式,雅致等不同于其他氛围(英: Mood)或个性(英: personality)。制定设计字体的氛围,就需要优先确认。

例如圆圆滚滚的字体,用在孩子生日宴会的邀请函上就非常合适,而公司的简报上就很不合适。

因为人是有多种多样各不相同的(例如内向(英: Introverted)或者外向(英: Extroverted)等),因此才会有魅力。有着强烈的个性的字体,可以将他与简单的字体相组合以保持平衡。

在下面的这个项目中,有特色的手绘风格字体,与无衬线字体相结合,没有妨碍主字体的同时,下面的小字也保证了其可读性。

当决定两个或以上的字体时,说不定就有一种玩联想游戏(英: Guessing Game)的感觉。大部分情况我们都是靠着自己的直觉来决定的,这其实没关系。

无论是网页,杂志,商店用的海报,还是产品包装,什么样的字体组合好,什么样的不好,我们都是从联想字体开始的。

02.展现视觉的层次感

很久之前发行的报纸或杂志,对展现字体组合的层次感有着非常好的示范作用。标题,副标题,正文,解说辞等要素都是靠着字体的组合,来将视觉划分开的。

字体的尺寸(英: Size)粗细(英; Boldness),文字间距(包含了行距(英: Leading)和字间距(英: Kerning))的调整,如何引导视线,将他们集中在你所希望的特定部分起到决定性作用。

层级(英: Hierarchy),就是在标题正文布局以外,你可以作成各种各样的的类型的设计。在给项目选择字体的时候,不妨想一想,你希望一开始就给用户看到什么地方。

另一点,决定什么样的信息才是重要的。什么是最先跃入眼帘的(公司名字的标题,特别优惠等),然后决定什么内容是不重要的。然后,我们再来决定字体的大小样式和组合。通常,重要的内容都是用大字号,粗体来表示的。

03.仔细想想是不是该用

你需要知道什么样的环境,什么样的用途用什么样的字体,什么样的字体使用了会更加舒适。在实际表示的尺寸上,清晰易读是十分重要的,就算是特别小的文字也有必要保证易读。在下面这个案例中,不论是记载着小文字还是大文字的地方,文字间都留有特定的空间,在强调的同时保证了其易读性。

然后,字体的尺寸会影响阅读。在一开始选择字体的时候,你就需要考虑他的设计性和可读性是否相匹配。(规则1说明,考虑文字的个性。)

文字选择的过程中,标题使用的字体(英: display typefaces),选择有特点的字体还是中规中矩(英: Neutral)的字体,是非常重要的工作。在下面这个杂志的版面设计中,标题使用了两种字体,正文使用了无衬线字体。

字体可以从具有历史性的背景或体裁中选择。你可以简单的研究一下字体的历史背景,以及,这个字体是在什么时候被创造的。或者说,知道了这个字体是在什么时代被利用的,你可以了解他是否与你的设计相匹配。

例如在给描写美国总统亚伯拉罕·林肯(英: Abraham Lincoln)一生事迹的书做封面设计时,我们就可以使用美国南北战争(1861-1865)时使用的Caslon或Clarendon体。

另一个案例,字体的种类,在设计的整体中担任很大的作用。下面这个案例,因为想表现出1950年代的复古感觉,字体采用了那个年代常用的广告或标识常用的字体。

04.衬线体与非衬线体一起使用

如果没有时间了,需要你马上决定两种字体。在那个时候,我们可以选择一部分文字使用衬线体(英: Serif),而另一部分文字我们可以是用非衬线体(英: Sans Serif)。这样的组合大体上往往很不错,尤其是两种字体大小不一样的时候是最适合的。

另外补充重要的一点,现在世界上的排字艺术(英:typography)中,关于衬线体和非衬线体哪一个更容易阅读有着很大的分歧。大量的文字和文章表明,衬线体的字体可以有效的转移视线,提高阅读速度,尤其在印刷品中效果非常明显。【这里的研究文章引用的是这里,懂英语的朋友应该能理解https://www.fonts.com/content/learning/fontology/level-1/type-anatomy/serif-vs-sans-for-text-in-print】

相反的非衬线字体有着简单的风格,在网上或者银幕上表现效果都很好,能让画面感觉变得更清晰。

05.要有对比意识

另一个使用衬线体和非衬线体组合在一起的理由是,具有对比性。这种对比有很多关联性包含在里面,我们需要仔细考虑这之中的字体的层次感,相互之间的互补性等等。

对比,可以通过字体的种类,大小,字体,文字间距,颜色等各种各样的方式来实现。下面这个样本案例,就是利用了粗体字与细体字相互组合而成的。这两种几乎180度大转变的风格,却很好的组合在了一起。

因为每个字体都是不同的(英: Difference),所以各种字体都有着各种各样的意义。另外,大胆的使用了粉红色,让他比标题还要大两倍的字号,也不能错过,他很好的将非常细的字给强调了。

06.避免字体冲突

在组合字体的时候,对比(英: Contrast)是非常重要的,同时也要避免它们相互冲突(英: Conflict)。不同的字体并不意味着他们可以很好匹配组合。一般来说,几个风格相似的字体,相同的比例,小字的高度(通常被称为x-height)非常的统一等都是值得注意的地方。这样就算他们的外观不同,设计从整体来说都是非常统一的。

来看看下面这组字体组合吧。因为是衬线体和非衬线体,所以风格上是非常不同的。上面的字体非常圆润,字间距的设定都留有余地,而下面的字体偏细长,风格更加拥挤,我们可以看到对比非常的大。像头发一样细的衬线体与非常细的非衬线体,在强调他们的对比时应当更加注意。

07.避免使用相似的字体进行组合

这在第五条介绍对比时也提到了,太过相似的字体组合也会成为问题。因为没有太大的区别,所以在制造层次感的时候就成了第一个问题。还有字体与字体之间的差异性,选择它的目的,以及他看起来就像是选错了的。

但是,也没有必要选择完全不一样的字体。比较字体的重量,外形是非常重要的,字体过于相似,特别是使用相同尺寸的时候,会让用户混乱,让整体内容都变得模糊。

选择两种字体并列,然后让我们一点点慢慢的进行分析。如果字体的外观上基本相同,由于选择的字体种类有着非常好的对比,这也是设计的很好的一个预兆。

08.使用同一个系列的字体

使用同一个系列的字体,一直都是一个非常稳妥的办法。我们可以在一个系列中找到各种各样的字体(不同的重量,样式,大小文字等),来充分的表达我们的设计项目。

相同系列的字体进行组合,利用不同的大小,样式,重量(Light、Regular、Bold等),注意表现出他们的对比。

利用欧文斜体字或Extended版本等字体系列,可以给你的设计创造出无限的可能。

如果项目中规定只能使用一种字体,他的优点就是能让设计变得更加有效率。缩短了去寻找能完美组合的字体的时间。

09.限制你所使用的字体数量

一般一个项目所使用的字体数量是两到三个,当然你也不必死守这这句话不放。如果你参加过杂志编辑工作,你也许能从中得到更多的,其实并没有什么【硬性规定】(英: hard-and-fast rule)的。

例如,参考风格华丽的维多利亚风格,像这样参考具有特色的设计风格时,你就更需要仔细推敲字体组合了。利用大量的字体,与设计相调和,得到的结果是平衡还是混乱,这是你需要注意的事项。

但是什么样的设计要素,选择什么样的字体才是合适的,需要大量的设计项目来进行练习。选择什么样的字体,因为每个设计项目的不同,便会有不同的见解。如果你使用了大量的字体,而当别人一定要追根究底问你为什么使用这么多时,你完全可以不回答他。

10.勤加练习

最后,我想这是一个好心的建议而不是规则。用你所知道的字体组合不断的联系吧。通过不断地努力与错误,最终你会得到属于你的创新能力。可能有完美的字体组合,但并没有完美做出他们的公式。

无惧风险,相信自己,迎接更多的挑战。或者你有与规则不同的见解,但自己的字体组合感觉又不是很好,想想究竟是哪里错了,从失败中获得是非常有必要的。这次介绍的只是一些排版的基础,也希望你们能有更好的作品设计出来。一起来感受设计的乐趣吧~

photoshopvip

译文地址:微博

译文作者:喪心病狂十六夜貓

(0)

相关推荐

  • 怎么用PPT设计出漂亮的九宫格图片

    对图片进行合理的处理就可以让其大放异彩,一张漂亮的图片可以让你的PPT更加高端.大气.上档次,可以让你的设计在众多的作品中脱颖而出.下面小编就来介绍一种非常实用的图片处理方法. 操作方法 01 插入图 ...

  • 优秀字体组合的秘密

    每当我和别人问起他们觉得字体排印中最难的是什么的时候,一个经常听到的回答就是字体的搭配. 我们总是想要使用多种字体来让我们的设计更加生动有趣,但我们中的大多数人其实并不清楚该选择哪些字体来搭配.不同字 ...

  • 【字言字语】设计中常见的字体设计与效果制作步骤

    小编:今天给大家带来的是@Martin_K的[字言字语]系列的第五篇-设计中常用的字体效果与制作步骤.一款好的字体设计不仅能增加视觉效果让作品锦上添花还能传播出作者想要表达的情绪.本次作者为大家准备了 ...

  • 如何利用PS工具设计出绳子缠绕的效果?

    今天小编和大家一起分享一下如何利用PS工具设计出绳子缠绕的效果,大家一起来学习一下吧! 操作方法 01 选择[文件]→[新建]命令,设置"宽度"和"高度"均为& ...

  • 怎样设计网页中的字体效果最好

    字体是网站最基本也是最重要的一个元素,选择一个大众化的字体,符合视觉美观的大小,设置恰到好处的颜色其实是一个不能忽视的网站优化要点,以下简单介绍一下怎样设计网页中的字体效果最好,主要从4个要点来说:样 ...

  • 美图秀秀设计精美漂亮的封面

    相信大家对美图秀秀 都不陌生吧,很多爱美的女孩子都会用到它,但实际上,它还有其它很多用途。比如设计精美封面 ,使用简单的操作就能绘制出漂亮的封面,而且速度超快哦。下面小编就为大家介绍美图秀秀设计精美漂 ...

  • 利用PS Photoshop软件怎么设计出线条感的图形

        PS软件是很多小伙伴都会用到的一款图片处理软件,而且软件中的滤镜功能非常强大,今天就跟大家介绍一下利用PS Photoshop软件怎么设计出线条感的图形的具体操作步骤.1. 首先打开电脑上的P ...

  • 如何用PS软件设计出优秀的banner图

    近年来,各大权威知名网站的风格发生本质的变化:包括网站的框架.轮播图.布局等等都采用平面式的视觉元素:它们主要以色彩统一.布局清晰.视觉明朗等特点成为目前主流网站的大众化风格:下面本编人员就banne ...

  • 在ppt中快速绘制出漂亮的放射型背景效果

    如何在ppt中快速绘制出放射型背景效果呢?下面小编就为大家详细介绍一下,来看看吧! 步骤 1.先设置下背景颜色,这里背景RGB设置为“39,46,56”,呈现灰黑色,看起来会比较沉稳大气有格调. 2. ...