发现好字体


作为设计师,学会选择排版类型是一项重要的技能,文字是你与用户沟通的主要方法之一,而排版可以决定你设计的成败。

排版优美而又复杂,有些设计师热衷于版式的设计,这几乎贯穿了他们整个设计生涯。他们同时也提供给我们很多可供选择的在线资源。

本文旨在在设计的起点上帮助你了解如何选择版式类型,你将摆脱常规字体的束缚去探索更多字体以及字体之间的搭配。


确定你的设计目标

确定目标是你做任何设计的前提,你想传达怎样的信息?什么样的设计媒介?

好的设计可以将排版与设计目标紧密相连。因为排版是传达情感、基调、与风格的关键。

举个栗子,如果你要设计一款插画风格的贺卡,那就选择一款能够融入插画的字体,并且将整个版式与设计协调一致。


如果你要设计一款图形驱动的登陆页,那就选择一款不会影响观看体验的简单字体。


确定你的目标用户

这一步至关重要,因为用户年龄和兴趣会影响字体以及版式选择.

举个栗子,一些字体更适合孩子,当学习阅读时,孩子们需要高度清晰的字体,所以字体要很大。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 CombinationsTypography: Google Fonts Combinations Volume 2,只需在BehanceDribbble等网站上搜索“font pairing” 即可。


选择属于你的字体

经过一番研究与灵感获取之后想必你已经有了十足的把握,关于字体选择,请牢记以下原则:可读性,易读性和目标。

预期设计将要达到的效果

选择常规且易于阅读的字体。避免装饰过度的字体,倾向与一些简单实用的字体。还有要考虑字体的应用场景,例如,一些字体更适合作为标题而不是正文。

为此,在选择字体之前,要预期设计将要达到的效果。

配对字体相互对照

在字体搭配方面,保持简单,最多选择三种不同的字体。此外,有对比性的字体可以搭配使用,这有助于引导读者的视线,先是标题然后是文本,还可以通过不同的字体大小,颜色和重量來创造视觉对比。

网站字体,可以使用Google FontsTypekitFont 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排版指南就是个很好的例子,还有一些像MailchimpAppleFocus Labs都有很棒的排版指南。


可以说排版是一项实验,他是科学与艺术的融合

我强烈建议你去打破所谓的“舒适区”在设计中探索新的风格。

你最喜欢的字体是什么?可以留言给作者@Jonathan Z. White

或者给码字的人@jeremy和他的朋友们

感谢观看!

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

推荐阅读更多精彩内容