作為一個設(shè)計師的最重要技能之一就是你要學(xué)習(xí)如何去選擇排版问窃。這是因為文本是設(shè)計師與用戶溝通的主要方式之一。排版能成就你的設(shè)計，也能毀滅你的設(shè)計雇初。
一個美觀又復(fù)雜的排版。有些人將他們?nèi)康氖聵I(yè)奉獻(xiàn)在了排版上减响。值得慶幸的是靖诗，他們的工作是有據(jù)可查的，所以我們有大量的在線排版資源支示。
本文的目的是作為一個起點幫助你學(xué)習(xí)如何為你的設(shè)計選擇排版刊橘。它將激勵你探索超乎你所認(rèn)知的字體間的組合。
確定你的目標(biāo)
在你做任何事之前颂鸿，你首先要確定你設(shè)計的目標(biāo)伤为。你想要傳達(dá)的是什么信息？你的設(shè)計媒介是什么据途？
優(yōu)秀的設(shè)計使其排版與其目的具有一致性绞愚。這是因為排版是設(shè)計中的情緒，音調(diào)和風(fēng)格的關(guān)鍵颖医。
例如位衩，如果你正在設(shè)計一張插圖豐富的賀卡，你需要選擇適合你插圖風(fēng)格的字體熔萧。與你設(shè)計的其余部分協(xié)調(diào)一致糖驴。
如果您正在設(shè)計一個圖像驅(qū)動的登錄頁面僚祷，你需要選擇不會影響圖像的簡單字體。使用排版作為強(qiáng)調(diào)溝通信息意義的方式贮缕。
確定你的受眾
明確你的設(shè)計目的后辙谜，確定你的受眾。這一步很重要感昼，因為年齡和興趣愛好會影響你的字體選項装哆。
闡明你的設(shè)計目的后，確定你的受眾定嗓。這一步驟至關(guān)重要蜕琴，因為有關(guān)你的用戶信息（如年齡，興趣和文化成長）可能會影響你對排版做出的決定宵溅。
例如凌简，一些字體更適合兒童使用。當(dāng)閱讀時恃逻，兒童需要高度清晰并且較大的字體雏搂。Sassoon Primary是一個很好的例子。Sassoon小學(xué)由Rosemary Sassoon開發(fā)寇损，根據(jù)她的研究結(jié)果畔派，發(fā)現(xiàn)了孩子們很容易閱讀哪些字母。
其他字體更適合老年人使用润绵。高級友好的字體且使用可讀的尺寸线椰，高對比度的顏色，并要避免腳本和裝飾的風(fēng)格尘盼。
選擇排版時憨愉，請考慮你的受眾及其需求。簡單地說卿捎，設(shè)身處地從用戶的角度感受配紫。
找尋靈感
看看其他設(shè)計師的工作。嘗試了解他們?nèi)绾巫龀雠虐娴臎Q定午阵。
字體啟發(fā)
對于字體的靈感躺孝，CreativeBloq的The 100 Best Free Fonts是一個很好的文章，以便讓你有正確的心態(tài)去選擇排版底桂。在文章中植袍，CreativeBloq解釋了每種字體背后的動機(jī)。
另外一個有用的資源是Awwwards的100 Greatest Free Fonts Collection for 2015籽懦。
Invision還編制了giant repo of typography resources于个。在這你會發(fā)現(xiàn)更多的靈感來源。
從網(wǎng)站的實際靈感來看暮顺，查看Typ.io.該網(wǎng)站策劃的字體靈感來自于網(wǎng)絡(luò)厅篓。此外秀存，它在每個靈感樣本的底部都提供了CSS的字體定義。
查看專用字體靈感網(wǎng)站羽氮，訪問你最喜歡的網(wǎng)站或链，并查看他們使用的是什么字體。WhatTheFont是一個很不錯的工具档押。WhatTheFont是Chrome的一個擴(kuò)展澳盐，可以通過鼠標(biāo)懸停在網(wǎng)頁上來檢查網(wǎng)頁中的字體。
配對靈感
除了字體外汇荐，還要看字體的配對靈感洞就。字體配對與字體本身一樣重要盆繁。良好的字體配對有助于建立視覺層次結(jié)構(gòu)掀淘，提高設(shè)計的可讀性。
為了靈感油昂，從Typewolf開始革娄。Typewolf的策劃來自不同網(wǎng)站的字體配對靈感。除此之外冕碟，他們還有字體建議和深入的排版指南拦惋。這是排版的寶庫。
FontPair還策劃字體配對靈感安寺，專門針對Google Fonts厕妖。你可以按排版的風(fēng)格組合排序，如無襯線和襯線挑庶，或襯線和襯線言秸。
最后，設(shè)計師在線創(chuàng)建了大量的字體配對集合迎捺。例Typography: Google Fonts Combinations和Typography:Google Fonts Combinations Volume 2举畸。只需在如Behance和Dribbble上搜索“字體配對”。
選擇字體
用研究和靈感來支撐凳枝。關(guān)于選擇排版抄沮，請牢記以下原則：可讀性，易讀性和目的性岖瑰。
選擇常規(guī)且易于閱讀的字體叛买。避免高度修飾的字體，有利于簡單實用的字體蹋订。另外聪全，需要注意字體的目的。例如辅辩，一些字體更適合作為標(biāo)題而不是正文难礼。
為此娃圆，在選擇字體之前，需要研究其預(yù)期所達(dá)到目的蛾茉。
在字體配對方面讼呢，保持簡化，最多可以有三種不同的字體谦炬。另外悦屏，配對字體組織之間相互對比。這樣做將有助于引導(dǎo)讀者的視線键思，首先是標(biāo)題础爬，然后到正文文本。你還可以使用不同的字體大小吼鳞，顏色和權(quán)重創(chuàng)建視覺對比度看蚜。
對于網(wǎng)絡(luò)字體，你可以使用Google Fonts,Typekit和Font Squirrel赔桌。Google Fonts是免費(fèi)的供炎，Typekit和Font Squirrel都有免費(fèi)和付費(fèi)的字體。
確定字體大小
確定字體組合后的下一步是確定字體的大小疾党。Adobe的排版主管Tim Brown提供了一個很好的工具是Modular Scale音诫。模塊化量表是一個系統(tǒng)，以確定歷史上令人滿意的比例創(chuàng)建尺度雪位，來確定排版的大小竭钝。
例如，你可以使用一個基于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的基礎(chǔ)上的后期間隔會發(fā)生什么队伟。
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
正如你所見穴吹，數(shù)字之間的間隔開始變得很大。對于大多數(shù)界面嗜侮，你需要較小的間隔港令。值得慶幸的是，Modular Scale具有幾何锈颗，自然和音樂的各種比例顷霹。
Minor Second ???15:16
Major Second ???8:9
Minor Third ????5:6
Major Third ????4:5
...
所以不用使用黃金比例，你可以使用像Perfect Fourth那樣產(chǎn)生較小間隔的比率击吱。
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
一旦你定了一個刻度淋淀，你可以從列表中挑選字體大小，并將它們舍入到最接近的十進(jìn)制覆醇。
Font Sizes
Header 1: 55px
Header 2: 42px
Header 3: 31px
Header 4: 24px
Header 5: 14px
Body: 17px
Caption: 14px
Modular Scale方法使用數(shù)學(xué)精度來生成字體大小朵纷。但是炭臭，這只是一個引導(dǎo)。使用此方法作為起點袍辞，然后利用人眼調(diào)整大小鞋仍。
創(chuàng)建一個排版風(fēng)格的引導(dǎo)
該過程的最后一步是為你的排版創(chuàng)建一個風(fēng)格指導(dǎo)，以幫助你的設(shè)計排版標(biāo)準(zhǔn)化搅吁。
在像Sketch這樣的程序中威创，你可以創(chuàng)建共享的文本樣式，以便快速插入已經(jīng)從引導(dǎo)中應(yīng)用的樣式的文本谎懦。
在此過程的這一步中肚豺，你可以調(diào)整完成文本屬性，如顏色界拦，比重和大小吸申。
顏色一詞：在選擇顏色時，請考慮你的調(diào)色板寞奸。選擇與你的調(diào)色板協(xié)調(diào)一致的顏色呛谜。
在你的風(fēng)格指南中在跳，請確保至少包含以下內(nèi)容：字體定義枪萄，字體大小，字體顏色和示例用法猫妙。
Google’s Material Design typography guidelines是包含在風(fēng)格指南的一個很好的例子瓷翻。其他幾個包括排版指南的例子Mailchimp,Apple和Focus Labs。
排版是實驗割坠。它既是科學(xué)又是藝術(shù)齐帚。
原文地址：https://medium.freecodecamp.com/typography-can-make-your-design-or-break-it-7be710aadcfe
原文作者：Jonathan Z. White（Designer & developer）
譯者：SKYUI
歡迎關(guān)注SKYUI官方微博“SKYUIHOME”
官方微信公眾賬號“SKYUIUX”?
