设想排版的6个根基步调

两个小胖猪遗

来历：知乎




By @jonathanzwhite

作为一个设想师的最重要技术之一就是你要进修若何去挑选排版。这是由于文本是设想师与用户相同的首要方式之一。排版能成就你的设想，也能扑灭你的设想。

一个美妙又复杂的排版。有些人将他们全数的奇迹奉献在了排版上。值得光荣的是，他们的工作是有据可查的，所以我们有大量的在线排版资本。

本文的目标是作为一个起点帮助你进修如作甚你的设想挑选排版。它将激励你摸索超乎你所认知的字体间的组合。
肯定你的方针

在你做任何事之前，你首先要肯定你设想的方针。你想要转达的是什么信息？你的设想前言是什么？
优异的设想使其排版与其目标具有分歧性。这是由于排版是设想中的情感，音和谐气概的关键。
例如，假如你正在设想一张插图丰富的贺卡，你需要挑选合适你插图气概的字体。与你设想的其他部分调和分歧。


Choose a font that suits the style of your illustration

假如您正在设想一个图像驱动的登录页面，你需要挑选不会影响图像的简单字体。利用排版作为夸大相同讯息意义的方式。



If images are the focus of your design, choose simple fonts so that the images stand out
肯定你的受众

明白你的设想目标后，肯定你的受众。这一步很重要，由于年龄和爱好爱好会影响你的字体选项。
说明你的设想目标后，肯定你的受众。这一步调相当重要，由于有关你的用户信息（如年龄，爱好和文化成长）能够会影响你对排版做出的决议。
例如，一些字体更合适儿童利用。当阅读时，儿童需要高度清楚而且较大的字体。Sassoon Primary是一个很好的例子。Sassoon小学由Rosemary Sassoon开辟，按照她的研讨成果，发现了孩子们很轻易阅读哪些字母。


Sassoon Primary was developed 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 curates font inspiration from around the web
从网站的现实灵感来看，检察 Typ.io.该网站策划的字体灵感来自于收集。此外，它在每个灵感样本的底部都供给了CSS的字体界说。
检察公用字体灵感网站，拜候你最喜好的网站，并检察他们利用的是什么字体。WhatTheFont是一个很不错的工具。WhatTheFont是Chrome的一个扩大，可以经过鼠标悬停在网页上来检查网页中的字体。
配对灵感
除了字体外，还要看字体的配对灵感。字体配对与字体自己一样重要。杰出的字体配对有助于建立视觉条理结构，进步设想的可读性。


Font pairing is just as important as the fonts themselves
为了灵感，从 Typewolf起头。Typewolf的策划来自分歧网站的字体配对灵感。除此之外，他们还有字体倡议和深入的排版指南。这是排版的宝库。
FontPair还策划字体配对灵感，专门针对 Google Fonts。你可以按排版的气概组合排序，如无衬线和衬线，或衬线和衬线。



最初，设想师在线建立了大量的字体配对调集。例Typography: Google Fonts Combinations和Typography:Google Fonts Combinations Volume 2。只需在如Behance和Dribbble上搜索“字体配对”。
挑选字体

用研讨和灵感来支持。关于挑选排版，请服膺以下原则：可读性，易读性和目标性。


Before choosing a font, research into its intended purpose
挑选常规且易于阅读的字体。避免高度修饰的字体，有益于简单适用的字体。别的，需要留意字体的目标。例如，一些字体更合适作为题目而不是正文。
为此，在挑选字体之前，需要研讨其预期所到达目标。


Pair fonts that contrast one another
在字体配对方面，连结简化，最多可以有三种分歧的字体。别的，配对字体构造之间相互对照。这样做将有助于指导读者的视野，首先是题目，然后到正文文本。你还可以利用分歧的字体巨细，色彩和权重建立视觉对照度。
对于收集字体，你可以利用 Google Fonts, Typekit和Font Squirrel。Google Fonts是免费的，Typekit和Font Squirrel都有免费和付费的字体。
肯定字体巨细

肯定字体组合后的下一步是肯定字体的巨细。 Adobe的排版主管Tim Brown供给了一个很好的工具是 Modular Scale。模块化量表是一个系统，以肯定历史上使人满足的比例建立标准，来肯定排版的巨细。


Modular Scale is a system for identifying historically pleasing ratios to create scales to determine type sizes
例如，你可以利用一个基于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这样的法式中，你可以建立同享的文本款式，以便快速插入已经从指导中利用的款式的文本。
在此进程的这一步中，你可以调剂完成文本属性，如色彩，比重和巨细。
色彩一词：在挑选色彩时，请斟酌你的调色板。挑选与你的调色板调和分歧的色彩。


Use styleguides to standardize type across your designs
在你的气概指南中，请确保最少包括以下内容：字体界说，字体巨细，字体色彩和示例用法。
Google’s Material Design typography guidelines 是包括在气概指南的一个很好的例子。其他几个包括排版指南的例子Mailchimp, Apple和 Focus Labs。
排版是尝试。它既是科学又是艺术。

原文地址：https://medium.freecodecamp.com/typography-can-make-your-design-or-break-it-7be710aadcfe
原文作者：Jonathan Z. White（Designer & developer）
译者：SKYUI
接待关注SKYUI官方微博“SKYUIHOME”
官方微信公众账号“SKYUIUX”
aHR0cDovL3dlaXhpbi5xcS5jb20vci9xQzh1TmxiRVBndEJyUkpWOTNxNg== (二维码自动识别)





原文地址：https://zhuanlan.zhihu.com/p/26412322
免责声明：
1、文章部分图片源于收集，均为表示图；
2、一切文章、图片、音频视频文件等材料版权归版权一切人一切；
3、因非原创文章及图片等内容没法和版权者联系，如原作者或编辑以为作品不宜上网供阅读，或不应无偿利用，请实时告诉我们，以敏捷采纳适当办法，避免给双方形成不需要的经济损失；
4、本页面内容由爬虫法式自动收集于互联网，如无意中加害了媒体或小我的常识产权，请电邮【E-Mail:cb@yoyodoc.com】告之，我们将于24小时内删除。