作为设计师,学会选择排版类型是一项重要的技能,文字是你与用户沟通的主要方法之一,而排版可以决定你设计的成败。
排版优美而又复杂,有些设计师热衷于版式的设计,这几乎贯穿了他们整个设计生涯。他们同时也提供给我们很多可供选择的在线资源。
本文旨在在设计的起点上帮助你了解如何选择版式类型,你将摆脱常规字体的束缚去探索更多字体以及字体之间的搭配。
确定你的设计目标
确定目标是你做任何设计的前提,你想传达怎样的信息?什么样的设计媒介?
好的设计可以将排版与设计目标紧密相连。因为排版是传达情感、基调、与风格的关键。
举个栗子,如果你要设计一款插画风格的贺卡,那就选择一款能够融入插画的字体,并且将整个版式与设计协调一致。
如果你要设计一款图形驱动的登陆页,那就选择一款不会影响观看体验的简单字体。
确定你的目标用户
这一步至关重要,因为用户年龄和兴趣会影响字体以及版式选择.
举个栗子,一些字体更适合孩子,当学习阅读时,孩子们需要高度清晰的字体,所以字体要很大。Sassoon Primary就是个很好的例子,Sassoon Primary由Rosemary Sassoon开发,并基于她对,更适合孩子阅读的字母的一项研究而创立。
有些字体更适合老年人,这种“老年字体”大小适度、对比度较高、拒绝衬线和一些装饰性的点缀。
选择版式时多考虑你的用户和他们的需求,说白了就是站在用户的角度考虑问题。
寻找灵感
观察其他设计师的工作流程,试着去体会他们对于版式选择所做的决定。
字体灵感
对于寻找字体灵感来说,CreativeBloq 的 The 100 Best Free Fonts可以提供很棒的资源,在文章中,CreativeBloq解释了每种字体选择背后的一些心思。
Awwwards的100 Greatest Free Fonts Collection for 2015也是个不错的网站。
Invision还编制了一个 giant repo of typography resources,你一定会在那找到很多灵感!
Typ.io.可以让你从实际网站中找到字体灵感,此外,该网站还提供了每个灵感样本底部的CSS字体定义。
除了访问专业的字体灵感网站外,你还可以查看你喜欢的网站所用的字体,它就是WhatTheFont;google上的扩展插件,它可以通过将鼠标悬停的方式查看字体。
字体组合灵感
不仅是字体,更要关注字体之间的组合,同字体本身一样重要,合适的字体组合有助于建立视觉层级,并提高设计的可读性。
Typewolf.的字体组合灵感来自各种不同的网站,除此之外,他们也提供字体推荐和一些资深的排版指南,这可是版式爱好者的福利哦!
FontPair上也提供一些字体组合上的灵感,并专门针对Google字体。可以按类型风格组合排序,如无衬线和衬线,或衬线和衬线。
最后要讲的是,有多名设计师所创建的在线字体搭配收集方案,如Typography: Google Fonts Combinations和 Typography: Google Fonts Combinations Volume 2,只需在Behance和Dribbble等网站上搜索“font pairing” 即可。
选择属于你的字体
经过一番研究与灵感获取之后想必你已经有了十足的把握,关于字体选择,请牢记以下原则:可读性,易读性和目标。
选择常规且易于阅读的字体。避免装饰过度的字体,倾向与一些简单实用的字体。还有要考虑字体的应用场景,例如,一些字体更适合作为标题而不是正文。
为此,在选择字体之前,要预期设计将要达到的效果。
在字体搭配方面,保持简单,最多选择三种不同的字体。此外,有对比性的字体可以搭配使用,这有助于引导读者的视线,先是标题然后是文本,还可以通过不同的字体大小,颜色和重量來创造视觉对比。
网站字体,可以使用Google Fonts,Typekit和Font Squirrel,Google Fonts是免费的,Typekit和Font Squirrel都有免费和付费的字体。
确定字体大小
下面就是确定字体大小了,Adobe公司的Tim Brown创建了Modular Scale,这是创建模块化比例的主要工具。通过历史上那些熟知的比例來创建字体尺寸。
例如:你可以以黄金比例为依据來创建字体组合的比例,下面是经计算后的前五个选项。
黄金比例(1:1.618)
1.000 x 1.618 = 1.618
1.618 x 1.618 = 2.618
2.618 x 1.618 = 4.236
4.236 x 1.618 = 6.854
6.854 x 1.618 = 11.089
当然,你可能会觉得比例有些大,继续看看黄金比例后期的尺寸变化。
黄金比率(1:1.618)
...
11.089×1.618 = 17.942
17.942×1.618 = 29.03
29.030×1.618 = 46.971
46.971×1.618 = 75.999
75.999×1.618 = 122.966
没错,数字之间的间隔开始变得更大。对于大多数界面来说,可能不太实用。不过还好,Modular Scale有基于几何、大自然和音乐的各种比例。
小二度15点16
主要二8:9
次要三5:6
大三4:5
...
除了黄金比例,你还可以使用例如“完美四号”这样的间隔。
完美四(3:4)
...
9.969×1.333 = 13.288
13.288×1.333 =
17.713
17.713×1.333 = 23.612
23.612×1.333 = 31.475
31.475×1.333 = 41.956 41.956×1.333 = 55.927
一旦选定了一组尺寸,你就可以从列表中挑选字体大小,并将他们四舍五入到最近的整数。
字体大小
标题1:55px
标题2:42px
标题3:31px
标题4:24px
标题5:14px
身体:17px
图片说明:14px
Modular Scale的方法是使用一些数学公式来生成字体大小,然而这只是一个指导,使用此方法作为起点,最终的决定权还是要交给你的眼睛。
创建一个排版风格的指南
这是整个过程的最后一步,以此來标准化你的设计。
像Sketch这样的程序中,你可以创建共享的文本样式,以便快速插入已经从准则中应用的文本样式。
在此过程中,你可以调整并确定文本属性,如颜色、重量和大小。
选择颜色时,要充分考虑调色板。版式中的颜色要与色板一致。
你的风格指南中要确定包含:字体定义,字体大小,字体颜色和示例用法。
Google的MaterialDesign排版指南就是个很好的例子,还有一些像Mailchimp,Apple和Focus Labs都有很棒的排版指南。
可以说排版是一项实验,他是科学与艺术的融合
我强烈建议你去打破所谓的“舒适区”在设计中探索新的风格。
你最喜欢的字体是什么?可以留言给作者@Jonathan Z. White
或者给码字的人@jeremy和他的朋友们
感谢观看!