设计排版的6个基本步骤

作为一个设计师的最重要技能之一就是你要学习如何去选择排版。这是因为文本是设计师与用户沟通的主要方式之一。排版能成就你的设计,也能毁灭你的设计。

一个美观又复杂的排版。有些人将他们全部的事业奉献在了排版上。值得庆幸的是,他们的工作是有据可查的,所以我们有大量的在线排版资源。

本文的目的是作为一个起点帮助你学习如何为你的设计选择排版。它将激励你探索超乎你所认知的字体间的组合。

确定你的目标

在你做任何事之前,你首先要确定你设计的目标。你想要传达的是什么信息?你的设计媒介是什么?

优秀的设计使其排版与其目的具有一致性。这是因为排版是设计中的情绪,音调和风格的关键。

例如,如果你正在设计一张插图丰富的贺卡,你需要选择适合你插图风格的字体。与你设计的其余部分协调一致。

如果您正在设计一个图像驱动的登录页面,你需要选择不会影响图像的简单字体。使用排版作为强调沟通信息意义的方式。

确定你的受众

明确你的设计目的后,确定你的受众。这一步很重要,因为年龄和兴趣爱好会影响你的字体选项。

阐明你的设计目的后,确定你的受众。这一步骤至关重要,因为有关你的用户信息(如年龄,兴趣和文化成长)可能会影响你对排版做出的决定。

例如,一些字体更适合儿童使用。当阅读时,儿童需要高度清晰并且较大的字体。Sassoon Primary是一个很好的例子。Sassoon小学由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是一个很不错的工具。WhatTheFont是Chrome的一个扩展,可以通过鼠标悬停在网页上来检查网页中的字体。

配对灵感

除了字体外,还要看字体的配对灵感。字体配对与字体本身一样重要。良好的字体配对有助于建立视觉层次结构,提高设计的可读性。

为了灵感,从Typewolf开始。Typewolf的策划来自不同网站的字体配对灵感。除此之外,他们还有字体建议和深入的排版指南。这是排版的宝库。

FontPair还策划字体配对灵感,专门针对Google Fonts。你可以按排版的风格组合排序,如无衬线和衬线,或衬线和衬线。

最后,设计师在线创建了大量的字体配对集合。例Typography: Google Fonts CombinationsTypography:Google Fonts Combinations Volume 2。只需在如BehanceDribbble上搜索“字体配对”。

选择字体

用研究和灵感来支撑。关于选择排版,请牢记以下原则:可读性,易读性和目的性。

选择常规且易于阅读的字体。避免高度修饰的字体,有利于简单实用的字体。另外,需要注意字体的目的。例如,一些字体更适合作为标题而不是正文。

为此,在选择字体之前,需要研究其预期所达到目的。

在字体配对方面,保持简化,最多可以有三种不同的字体。另外,配对字体组织之间相互对比。这样做将有助于引导读者的视线,首先是标题,然后到正文文本。你还可以使用不同的字体大小,颜色和权重创建视觉对比度。

对于网络字体,你可以使用Google Fonts,TypekitFont Squirrel。Google Fonts是免费的,Typekit和Font Squirrel都有免费和付费的字体。

确定字体大小

确定字体组合后的下一步是确定字体的大小。Adobe的排版主管Tim Brown提供了一个很好的工具是Modular Scale。模块化量表是一个系统,以确定历史上令人满意的比例创建尺度,来确定排版的大小。

例如,你可以使用一个基于Golden Ratio的刻度。这将是你的前五个计算字体大小的选项:

Golden Ratio(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

你可能会遇到的一个问题是你的比例太大。看一下基于Golden Ratio的基础上的后期间隔会发生什么。

Golden Ratio(1:1.618)

...

11.089 x 1.618    = 17.942

17.942 x 1.618    = 29.03

29.030 x 1.618    = 46.971

46.971 x 1.618    = 75.999

75.999 x 1.618    = 122.966

正如你所见,数字之间的间隔开始变得很大。对于大多数界面,你需要较小的间隔。值得庆幸的是,Modular Scale具有几何,自然和音乐的各种比例。

Minor Second    15:16

Major Second    8:9

Minor Third     5:6

Major Third     4:5

...

所以不用使用黄金比例,你可以使用像Perfect Fourth那样产生较小间隔的比率。

Perfect Fourth (3:4)

...

9.969  x 1.333     = 13.288

13.288 x 1.333     = 17.713

17.713 x 1.333     = 23.612

23.612 x 1.333     = 31.475

31.475 x 1.333     = 41.956

41.956 x 1.333     = 55.927

一旦你定了一个刻度,你可以从列表中挑选字体大小,并将它们舍入到最接近的十进制。

Font Sizes

Header 1: 55px

Header 2: 42px

Header 3: 31px

Header 4: 24px

Header 5: 14px

Body: 17px

Caption: 14px

Modular Scale方法使用数学精度来生成字体大小。但是,这只是一个引导。使用此方法作为起点,然后利用人眼调整大小。

创建一个排版风格的引导

该过程的最后一步是为你的排版创建一个风格指导,以帮助你的设计排版标准化。

Shared styles in Sketch

在像Sketch这样的程序中,你可以创建共享的文本样式,以便快速插入已经从引导中应用的样式的文本。

在此过程的这一步中,你可以调整完成文本属性,如颜色,比重和大小。

颜色一词:在选择颜色时,请考虑你的调色板。选择与你的调色板协调一致的颜色。

在你的风格指南中,请确保至少包含以下内容:字体定义,字体大小,字体颜色和示例用法。

Google’s Material Design typography guidelines是包含在风格指南的一个很好的例子。其他几个包括排版指南的例子Mailchimp,AppleFocus Labs

排版是实验。它既是科学又是艺术。



原文地址:https://medium.freecodecamp.com/typography-can-make-your-design-or-break-it-7be710aadcfe

原文作者:Jonathan Z. White(Designer & developer)

译者:SKYUI


欢迎关注SKYUI官方微博“SKYUIHOME”

官方微信公众账号“SKYUIUX”​

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

推荐阅读更多精彩内容