作為設(shè)計(jì)師有一個重要的技能：如何選擇文字。這是因?yàn)槲淖质窃O(shè)計(jì)師和客戶溝通的主要方式之一。那么排版就是決定你設(shè)計(jì)好壞的重要因素。

大家覺得排版即美麗又復(fù)雜。幸運(yùn)的是，很多人把精力都投入到了排版上并且他們有很多作品，所以我們可以在線上找到很多資源。

這篇文章的主旨是幫助你如何選擇對你設(shè)計(jì)有用的文字排版。并鼓勵你探索字體與字體之間的組合。

明確你的目的

在你做任何事情之前，首先要確定你的設(shè)計(jì)目的。你想傳達(dá)的是什么信息？以及你要用什么方式來實(shí)現(xiàn)？

良好設(shè)計(jì)的排版與其設(shè)計(jì)目的應(yīng)該是一致的。這是因?yàn)榕虐媸窃O(shè)計(jì)風(fēng)格和感情定位的關(guān)鍵。

例如：如果你正在設(shè)計(jì)一張插圖風(fēng)格的賀卡，請選擇符合插圖風(fēng)格的字體。 與你設(shè)計(jì)的其余部分協(xié)調(diào)一致。

選擇一個適合您的插圖風(fēng)格的字體

如果你正在設(shè)計(jì)一個登錄頁，請選擇不會影響你圖像并能夠強(qiáng)調(diào)信息的簡單的字體。

如果圖像是設(shè)計(jì)的焦點(diǎn)，請選擇簡單的字體，使圖像脫穎而出

明確定位你的用戶

確定你設(shè)計(jì)的目的后，要明確你的用戶群體，這一步很重要，因?yàn)槟挲g，興趣和文化認(rèn)知會影響你對字體的選擇。

例如，一些字體更適合兒童。當(dāng)兒童開始學(xué)習(xí)閱讀時，他們需要的是字型大方并且高度清晰的字體。一個好的例子就是Sassoon Primary 字體，Rosemary Sassoon在她 “對于孩子們什么樣的字母最容易閱讀” 的研究基礎(chǔ)上發(fā)明了這款字體。

Rosemary Sassoon 是Sassoon Primary字體的發(fā)明者

其他的字體更適合中老年人。友好的字體使用方便閱讀的尺寸大小，高對比的顏色，并避免了裝飾樣式。

選擇字體時，請考慮你用戶及其需求。簡單的說，要有同理心。

尋找靈感

觀看其他設(shè)計(jì)師的作品時，試著理解為什么他們選擇這種字體。

字體啟發(fā)

對于字體的啟發(fā)，CreativeBloq的《The 100 Best Free Fonts》是一篇可以告訴你如何正確選擇字體的文章。這篇文章解釋了選擇每個字體后面的動機(jī)。

另一篇Awwwards的《100 Greatest Free Fonts Collection for 2015 》也非常有用。

Invison編制了一套《 giant repo of typography resources》。你可以在那里找到很多資源。

Typ.io從網(wǎng)絡(luò)上整理字體靈感

實(shí)際網(wǎng)站的可以查看Typ.io. 該網(wǎng)站搜集來自網(wǎng)絡(luò)的字體靈感。此外，它還提供了每個靈感樣本底部的CSS字體定義。

另外，查看你喜歡的網(wǎng)站，并探索他們使用什么字體。有一個很好用的工具“WhatTheFont”。這個工具是一個Chrome擴(kuò)展程序，可以通過將鼠標(biāo)懸停在網(wǎng)頁上檢查網(wǎng)頁字體。

字體搭配

除了選擇合適的字體之外，還要選擇合適的字體進(jìn)行搭配。字體搭配與字體本身一樣重要。良好的字體搭配有助于建立視覺層次結(jié)構(gòu)，提高設(shè)計(jì)的可讀性。

字體搭配與字體本身一樣重要

對于字體的搭配，可以從Typewolf開始。Typewolf的靈感來自不同網(wǎng)站的字體組合。除此之外，他們還有字體推薦和排版指南。這是屬于排版設(shè)計(jì)師的寶庫。

FontPair（http://fontpair.co/）是字體搭配網(wǎng)站，專門針對Google字體。你可以根據(jù)類型風(fēng)格排序，比如無襯線和襯線，或者襯線和襯線。

最后，設(shè)計(jì)師在線創(chuàng)建了大量的字體搭配集合。例如 Typography: Google Fonts Combinations 和Typography: Google Fonts Combinations – Volume 2 ；只需在Behance和Dribbble等網(wǎng)站上搜索“font pairing”。

選擇你的字體

通過調(diào)研你已經(jīng)準(zhǔn)備好選擇你的字體了。關(guān)于選擇類型，請牢記以下原則：可讀性，易讀性和目的。

在選擇字體之前，研究其預(yù)期目的

選擇常規(guī)且易于閱讀的字體。 避免高度裝飾的字體，有利于簡單實(shí)用的字體。 另外，請注意字體的目的。 例如，一些字體更適合作為標(biāo)題而不是正文。

因此，在選擇字體之前，研究其預(yù)期目的。

配對字體相互對照

在字體搭配方面，保持簡單，最多可以有三種不同的字體。這樣做將有助于引導(dǎo)讀者的眼睛，首先是標(biāo)題，然后到內(nèi)容文本。 您還可以使用不同的字體大小，顏色和重量創(chuàng)建視覺對比度。

對于網(wǎng)絡(luò)字體，您可以使用Google字體，Typekit和Font Squirrel。 Google Fonts是免費(fèi)的，Typekit和Font Squirrel都有免費(fèi)和付費(fèi)的字體。

確定字體大小

設(shè)置完字體的組合之后就該確定字體大小了。Adobe的排版負(fù)責(zé)人Tim Brown提供了一個很好的工具。

Modular Scale是一種通過歷史上令人滿意的比例來為文字大小創(chuàng)建尺度的系統(tǒng)。

例如，你可以使用基于黃金分割的比例。 這將是你計(jì)算出的前五個字體大小的選項(xià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

有一個問題你可能會遇到的是，需要較大的比例。那看一下基于黃金比例的計(jì)算繼續(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

如你所見，數(shù)字之間的間隔開始變大。但是對于大多數(shù)界面，你需要較小的間隔。幸運(yùn)的是，Modular Scale 具有基于幾何，自然和音樂的各種比例。

MinorSecond 15:16

MajorSecond 8:9

MinorThird 5:6

Major Third 4:5

…

所以如果不使用黃金比例，你可以使用像“Perfect Fourth”那樣產(chǎn)生較小間隔的比率。

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是使用精確的數(shù)學(xué)來生成字體大小。但是，這只是一個參考。我們用這種方法作為參考，然后用自己的雙眼來調(diào)整字體大小。

創(chuàng)建排版風(fēng)格指南

這個過程最后一步是為你的排版創(chuàng)建一個樣式指南，來幫助標(biāo)準(zhǔn)化你的設(shè)計(jì)中的文字。

Sketch中的共享樣式

在像Sketch這樣的程序中，你可以創(chuàng)建共享的文本樣式，以便快速插入已經(jīng)從準(zhǔn)則中應(yīng)用的樣式文本。

在這一步中，你可以調(diào)整和完成文本屬性，如顏色，寬度和大小。

選擇字體顏色的時候，要考慮到整個色系。要選擇和你色系協(xié)調(diào)的顏色。

使用樣式指南來標(biāo)準(zhǔn)化您的設(shè)計(jì)中的文字

在你的風(fēng)格指南中，請確保至少要包含以下內(nèi)容：字體的風(fēng)格，字體的大小，字體的顏色和示例用法。

谷歌的Material Design 是一個很好的例子，包含了風(fēng)格指南。還有Mailchimp，Apple 和FocusLabs也是很好的指南。

排版既是科學(xué)又是藝術(shù)

我鼓勵你離開自己的舒適區(qū)，在你的設(shè)計(jì)中探索文字。

網(wǎng)站題目：成也排版敗也排版：一個選擇的過程
URL鏈接：http://m.2m8n56k.cn/news/212357.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動態(tài)網(wǎng)站、外貿(mào)建站、網(wǎng)站收錄、網(wǎng)站維護(hù)、軟件開發(fā)、用戶體驗(yàn)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：[email protected]。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)