实例教学!10个帮你运用好字体组合的设计原则 - 优设网 - UISDC

实例教学!10个帮你运用好字体组合的设计原则

2016/08/21 14365评论区

font-combination-design-principles-1

编者按:选择与设计相符的字体、展现视觉的层次感、衬线体与非衬线体一起使用、避免字体冲突、避免使用相似的字体进行组合、限制你所使用的字体数量… 今天@喪心病狂十六夜貓 这篇译文总结了运用好字体的设计原则,都是基础但不可忽视的,适合新手学习或重温。

实例教学系列:

  1. 《实例教学!12种透明背景的万能设计方法》
  2. 《实例教学!设计网页时选择配色的八个要点》
  3. 《实例教学!10个用好模糊效果的超实用设计技巧》
  4. 《实例教学!利用「对比原则」做出抢眼设计的20个方法》

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

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

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

16-201608216

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

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

16-201608217

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

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

16-2016082115

02. 展现视觉的层次感

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

字体的尺寸(英: Size)粗细(英; Boldness),文字间距(包含了行距(英: Leading)和字间距(英: Kerning))的调整,都可以引导视线,将它们集中在你所希望的特定部分。

16-2016082116

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

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

重要的内容都是用大字号,粗体来表示的。

16-201608218

03.仔细想想是不是该用

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

16-201608219

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

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

16-2016082117

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

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

16-2016082110

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

16-2016082111

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

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

16-201608212

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

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

16-2016082112

05. 要有对比意识

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

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

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

16-2016082113

06. 避免字体冲突

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

life20160821

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

16-201608213

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

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

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

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

16-201608214

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

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

16-2016082114

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

16-201608215

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

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

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

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

16-2016082118

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

16-2016082119

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

10. 勤加练习

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

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

欢迎关注我的微博:@喪心病狂十六夜貓

微信公众号:

16ym20160821

【技多不压身的设计师才有高薪资!】

  1. 平面设计:《超赞!设计师完全自学指南》
  2. 交互设计:《交互设计师修炼指南!教你从零开始成为优秀交互设计师》
  3. UI设计:《超实用新手指南!零基础如何自学UI设计?》
  4. 前端开发:《天猫高手来教你!零基础如何系统地学习前端开发?》
  5. 抠图技巧:《从菜鸟到高手!PHOTOSHOP抠图全方位攻略》
  6. 配色方案:《色彩搭配速成!3个实用方法帮你全面搞定配色》
  7. DPI指南:《基础知识学起来!为设计师量身打造的DPI指南》
  8. 交互设计自学路径图:《零基础入门!给非科班生的自学路径图之交互设计篇》

原文地址:photoshopvip

yestone-uisdc-2

【优设网 原创文章 投稿邮箱:yuan@uisdc.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量150万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/font-combination-design-principles

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

版式设计 交互设计师 界面设计 排版布局 职场 设计师干货 优设专访 优设大课堂 设计达人 配色 视觉设计 web前端开发 素材下载 AI教程 设计流程 设计理论 神器下载 字体下载 设计师专访 psd下载 设计规范 用户体验设计 海报设计 设计趋势 平面设计 动效设计 logo设计 图标设计 ICON 产品设计 神器推荐 App设计 字体设计 职场规划 酷站推荐 交互设计 ui设计 优秀网页设计 设计师职场 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里