起點課堂會員權益
職業(yè)體系課特權
線下行業(yè)大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業(yè)技能直播
會員專屬社群
榮耀標識成也排版敗也排版：一個選擇的過程
作為設計師有一個重要的技能：如何選擇文字。這是因為文字是設計師和客戶溝通的主要方式之一。那么排版就是決定你設計好壞的重要因素。
大家覺得排版即美麗又復雜。幸運的是，很多人把精力都投入到了排版上并且他們有很多作品，所以我們可以在線上找到很多資源。
這篇文章的主旨是幫助你如何選擇對你設計有用的文字排版。并鼓勵你探索字體與字體之間的組合。
明確你的目的
在你做任何事情之前，首先要確定你的設計目的。你想傳達的是什么信息？以及你要用什么方式來實現？
良好設計的排版與其設計目的應該是一致的。這是因為排版是設計風格和感情定位的關鍵。
例如：如果你正在設計一張插圖風格的賀卡，請選擇符合插圖風格的字體。 與你設計的其余部分協調一致。
選擇一個適合您的插圖風格的字體
如果你正在設計一個登錄頁，請選擇不會影響你圖像并能夠強調信息的簡單的字體。
如果圖像是設計的焦點，請選擇簡單的字體，使圖像脫穎而出
明確定位你的用戶
確定你設計的目的后，要明確你的用戶群體，這一步很重要，因為年齡，興趣和文化認知會影響你對字體的選擇。
例如，一些字體更適合兒童。當兒童開始學習閱讀時，他們需要的是字型大方并且高度清晰的字體。一個最好的例子就是Sassoon Primary 字體，Rosemary Sassoon在她 “對于孩子們什么樣的字母最容易閱讀” 的研究基礎上發(fā)明了這款字體。
Rosemary Sassoon 是Sassoon Primary字體的發(fā)明者
其他的字體更適合中老年人。友好的字體使用方便閱讀的尺寸大小，高對比的顏色，并避免了裝飾樣式。
選擇字體時，請考慮你用戶及其需求。簡單的說，要有同理心。
尋找靈感
觀看其他設計師的作品時，試著理解為什么他們選擇這種字體。
字體啟發(fā)
對于字體的啟發(fā)，CreativeBloq的《The 100 Best Free Fonts》是一篇可以告訴你如何正確選擇字體的文章。這篇文章解釋了選擇每個字體后面的動機。
另一篇Awwwards的《100 Greatest Free Fonts Collection for 2015?》也非常有用。
Invison編制了一套《?giant repo of typography resources》。你可以在那里找到很多資源。
Typ.io從網絡上整理字體靈感
實際網站的可以查看Typ.io. 該網站搜集來自網絡的字體靈感。此外，它還提供了每個靈感樣本底部的CSS字體定義。
另外，查看你喜歡的網站，并探索他們使用什么字體。有一個很好用的工具“WhatTheFont”。這個工具是一個Chrome擴展程序，可以通過將鼠標懸停在網頁上檢查網頁字體。
字體搭配
除了選擇合適的字體之外，還要選擇合適的字體進行搭配。字體搭配與字體本身一樣重要。良好的字體搭配有助于建立視覺層次結構，提高設計的可讀性。
字體搭配與字體本身一樣重要
對于字體的搭配，可以從Typewolf開始。Typewolf的靈感來自不同網站的字體組合。除此之外，他們還有字體推薦和排版指南。這是屬于排版設計師的寶庫。
FontPair（http://fontpair.co/）是字體搭配網站，專門針對Google字體。你可以根據類型風格排序，比如無襯線和襯線，或者襯線和襯線。
最后，設計師在線創(chuàng)建了大量的字體搭配集合。例如 Typography: Google Fonts Combinations?和Typography: Google Fonts Combinations – Volume 2 ；只需在Behance和Dribbble等網站上搜索“font pairing”。
選擇你的字體
通過調研你已經準備好選擇你的字體了。關于選擇類型，請牢記以下原則：可讀性，易讀性和目的。
在選擇字體之前，研究其預期目的
選擇常規(guī)且易于閱讀的字體。 避免高度裝飾的字體，有利于簡單實用的字體。 另外，請注意字體的目的。 例如，一些字體更適合作為標題而不是正文。
因此，在選擇字體之前，研究其預期目的。
配對字體相互對照
在字體搭配方面，保持簡單，最多可以有三種不同的字體。這樣做將有助于引導讀者的眼睛，首先是標題，然后到內容文本。 您還可以使用不同的字體大小，顏色和重量創(chuàng)建視覺對比度。
對于網絡字體，您可以使用Google字體，Typekit和Font Squirrel。 Google Fonts是免費的，Typekit和Font Squirrel都有免費和付費的字體。
確定字體大小
設置完字體的組合之后就該確定字體大小了。Adobe的排版負責人Tim Brown提供了一個很好的工具。
Modular Scale是一種通過歷史上令人滿意的比例來為文字大小創(chuàng)建尺度的系統。
例如，你可以使用基于黃金分割的比例。 這將是你計算出的前五個字體大小的選項：
GoldenRatio (1:1.618)
1.000x 1.618 = 1.618
1.618x 1.618 = 2.618
2.618x 1.618 = 4.236
4.236x 1.618 = 6.854
6.854x 1.618 = 11.089
有一個問題你可能會遇到的是，需要較大的比例。那看一下基于黃金比例的計算繼續(xù)下去會發(fā)生什么變化。
GoldenRatio (1:1.618)
…
11.089x 1.618 = 17.942
17.942x 1.618 = 29.03
29.030x 1.618 = 46.971
46.971x 1.618 = 75.999
75.999x 1.618 = 122.966
如你所見，數字之間的間隔開始變大。但是對于大多數界面，你需要較小的間隔。幸運的是，Modular Scale 具有基于幾何，自然和音樂的各種比例。
MinorSecond 15:16
MajorSecond 8:9
MinorThird 5:6
Major Third 4:5
…
所以如果不使用黃金比例，你可以使用像“Perfect Fourth”那樣產生較小間隔的比率。
PerfectFourth (3:4)
…
9.969x 1.333 = 13.288
13.288x 1.333 = 17.713
17.713x 1.333 = 23.612
23.612x 1.333 = 31.475
31.475x 1.333 = 41.956
41.956x 1.333 = 55.927
一旦你定了一個尺度，你可以從列表中挑選字體大小，并將它們四舍五入到最接近的大小。
FontSizes
Header1: 55px
Header2: 42px
Header3: 31px
Header4: 24px
Header5: 14px
Body:17px
Caption:14px
Modular Scale是使用精確的數學來生成字體大小。但是，這只是一個參考。我們用這種方法作為參考，然后用自己的雙眼來調整字體大小。
創(chuàng)建排版風格指南
這個過程最后一步是為你的排版創(chuàng)建一個樣式指南，來幫助標準化你的設計中的文字。
Sketch中的共享樣式
在像Sketch這樣的程序中，你可以創(chuàng)建共享的文本樣式，以便快速插入已經從準則中應用的樣式文本。
在這一步中，你可以調整和完成文本屬性，如顏色，寬度和大小。
選擇字體顏色的時候，要考慮到整個色系。要選擇和你色系協調的顏色。
使用樣式指南來標準化您的設計中的文字
在你的風格指南中，請確保至少要包含以下內容：字體的風格，字體的大小，字體的顏色和示例用法。
谷歌的Material Design 是一個很好的例子，包含了風格指南。還有Mailchimp，Apple 和FocusLabs也是很好的指南。
排版既是科學又是藝術
我鼓勵你離開自己的舒適區(qū)，在你的設計中探索文字。
原文鏈接：https://medium.freecodecamp.com/typography-can-make-your-design-or-break-it-7be710aadcfe
譯者：非科班設計翻譯小組@冬柏，校對@逗砂，微信公眾號【非科班設計】
本文由 @冬柏 ?翻譯發(fā)布于人人都是產品經理。未經許可，禁止轉載。
有看得舒服的字體換真不太容易，哈哈