4年的UI設(shè)計(jì)師告訴你字體的10個(gè)黃金規(guī)則

對(duì)于設(shè)計(jì)師而言，為每個(gè)項(xiàng)目選擇合適的字體，是已經(jīng)掌握的特殊技能。今天這篇文章可以讓你通過(guò)應(yīng)用一些簡(jiǎn)單的規(guī)則，就能設(shè)計(jì)出適用于電子、印刷技術(shù)或提升項(xiàng)目檔次的字體。

如果你正在為選擇字體組合而感到困惑，遵循本文規(guī)則，你就可以設(shè)計(jì)出優(yōu)秀的字體。

 

1. 定位項(xiàng)目重點(diǎn)

?

項(xiàng)目開始時(shí)，我們需要明確設(shè)計(jì)目的。當(dāng)你在Google Font或Typekit等網(wǎng)站尋找字體之前，先問(wèn)問(wèn)自己以下幾個(gè)問(wèn)題：

• 項(xiàng)目面向的目標(biāo)人群是什么
• 用戶會(huì)怎樣對(duì)待這個(gè)設(shè)計(jì)
• 適合怎樣的氛圍、心情
• 需要和其他的設(shè)計(jì)、品牌相匹配嗎

這些答案將幫助你構(gòu)建出設(shè)計(jì)的初步框架。

 

2. 找到相同屬性的字體

?

設(shè)計(jì)許多的字體組合時(shí)，字體的形狀細(xì)節(jié)會(huì)影響設(shè)計(jì)的的好壞。那么，你應(yīng)該如何進(jìn)行正確的選擇？

首先尋找相似形狀的字體。讓我們仔細(xì)研究每種字體是圓形還是橢圓形、粗或細(xì)、高或短、對(duì)角的還是傾斜的。

選擇要用于標(biāo)題和正文的字體后，將同樣形狀的輔助性字體組合在一起。

• 確認(rèn)一下各種字體的小寫「o」。內(nèi)側(cè)是圓形還是橢圓形？將[o]形狀相同的字體組合在一起。
• 選擇x字高（英文：x-height）相同的字體。
• 不用擔(dān)心混合字體風(fēng)格。襯線和無(wú)襯線字體的組合也可以嘗試。如果選擇了一格復(fù)雜的字體，另一種字體選擇簡(jiǎn)單點(diǎn)的會(huì)比較好。此外，使用最頻繁的地方，如正文，我們還是選擇一個(gè)簡(jiǎn)單的字體方便閱讀。
• 小心字體的傾斜度。使用多個(gè)斜體或相反方向傾斜的字體對(duì)可能會(huì)給用戶的閱讀帶來(lái)不適，應(yīng)該避免。

3. 設(shè)置同類型字體尺寸

字體的粗細(xì)，尺寸是決定項(xiàng)目的好壞的因素之一。文字的尺寸過(guò)大會(huì)讓視線停止，讓人無(wú)法自然的閱讀。另外，文字尺寸過(guò)小則會(huì)導(dǎo)致視覺(jué)疲勞，用戶或許會(huì)從設(shè)計(jì)作品上移開視線。

通過(guò)正確的設(shè)定字符大小，用戶可以在內(nèi)容上自由的閱讀。合適的文字尺寸是：和項(xiàng)目中各種各樣的尺寸相對(duì)應(yīng)。

正文內(nèi)容、小標(biāo)題或大標(biāo)題等有著各種各樣的尺寸。這些尺寸和使用方法，必須保證在設(shè)計(jì)內(nèi)具有一致性。

注意以下幾點(diǎn)，用戶會(huì)更容易閱讀內(nèi)容。

• 文字內(nèi)容的尺寸，可以根據(jù)信息的重要程度來(lái)確定優(yōu)先順序。字體越大內(nèi)容越重要，占用用戶視覺(jué)范圍的可能性就更高。
• 通過(guò)縮小文字的尺寸，可以讓文本閱讀速度更快，能讓用戶用更短的時(shí)間確認(rèn)內(nèi)容。
• 較大的文本元素，可以通過(guò)分割長(zhǎng)句來(lái)更使其容易閱讀。

4. 設(shè)置留白空間

?

這種方法本身與字體無(wú)關(guān)，但是在選擇字體時(shí)，設(shè)置留白的方式也很重要。

字距、行距、跟蹤、填襯這些方法，能表現(xiàn)出字體的美感，也有可能將他們弄的亂七八糟。

適當(dāng)運(yùn)用留白，會(huì)讓你設(shè)計(jì)稿更精致。但它還取決于在實(shí)際項(xiàng)目中使用的字符、字體等的組合和大小。

 

5. 選擇左對(duì)齊

和其他語(yǔ)言一樣，用戶在閱讀英語(yǔ)、日語(yǔ)、中文的時(shí)候，都是從左往右移動(dòng)視線的，所以理想的突出主體內(nèi)容可讀性的方法是左對(duì)齊。

如導(dǎo)航標(biāo)題和Hero Header，一些文本本身就很容易閱讀，所以不用將它們對(duì)齊到左邊。而對(duì)于長(zhǎng)句子來(lái)說(shuō)，應(yīng)該將它們對(duì)齊到左邊。

 

6. 選擇兩種字體

在設(shè)計(jì)項(xiàng)目中使用了兩個(gè)字體，這個(gè)規(guī)則可能很多人知道。

當(dāng)你打破這個(gè)規(guī)則的時(shí)候，可以看看是否可以用該字體的另一種樣式：如粗體、細(xì)體、斜體來(lái)解決。

 

7. 不要修改默認(rèn)的字型

不要去伸展，扭曲，或傾斜你的字體。如果您需要不同的字體，請(qǐng)嘗試選擇其他方法。

字體設(shè)計(jì)師花費(fèi)了大量的時(shí)間來(lái)做一款好看的字體。如果更改字型，將會(huì)損害字體的可讀性。

 

8. 使用大量的對(duì)比

?設(shè)計(jì)師很困擾的一個(gè)問(wèn)題是：如何在圖片或背景上加文字。

當(dāng)給文字添加陰影時(shí)，不一定會(huì)獲得足夠高的對(duì)比。通過(guò)調(diào)整亮度，可實(shí)現(xiàn)輕松對(duì)比，也有助于將普通的風(fēng)格變得厚重。

有些情況下，照片中既有亮也有暗的地方的情況下，你就可以利用粗體字或細(xì)體字形成對(duì)比。

讓我們考慮選擇附加文本，選擇較厚的字體，并嘗試在照片上疊加顏色。所有的技術(shù)都是為了突出了對(duì)比，使文本更具可讀性。

9. 不要忘記移動(dòng)端的排版

關(guān)于網(wǎng)站排版的問(wèn)題，移動(dòng)終端的可讀性是最重要的一個(gè)問(wèn)題。雖然給文字添加圖案或紋理在某些桌面屏幕上進(jìn)行打印或顯示時(shí)不會(huì)出現(xiàn)問(wèn)題，但對(duì)于小型設(shè)備來(lái)說(shuō)效果并不理想。

所以，考慮這個(gè)字體適用在什么地方是很重要的。

對(duì)于移動(dòng)終端來(lái)說(shuō)，字體看起來(lái)會(huì)略大一些，所以讓我們把字體間距做得比桌面寬一點(diǎn)。通過(guò)這樣做，可以有效減少用戶不喜歡的移動(dòng)操作，例如在閱讀短句時(shí)多次滾動(dòng)顯示。

 

10. 參考風(fēng)格指南

?當(dāng)您決定要用某種字體在項(xiàng)目時(shí)，你需要一個(gè)總結(jié)了所有用法和規(guī)則的樣式指南。

比如：請(qǐng)你的元素移至在網(wǎng)頁(yè)上易于訪問(wèn)的位置，并在該位置修改你的設(shè)計(jì)。

所以，完美的字體設(shè)計(jì)的關(guān)鍵因素是：統(tǒng)一性。

 

總結(jié)

字體的好壞，應(yīng)由用戶來(lái)決定。

為了設(shè)計(jì)出完美的排版，利于閱讀是最重要的一點(diǎn)。字體容易閱讀，便容易理解。所以，為了達(dá)到用戶可以隨時(shí)閱讀而不用考慮任何事情的目的，字體也應(yīng)該符合場(chǎng)景想要傳達(dá)的信息和氛圍。