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

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

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

 

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

?

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

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

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

 

2. 找到相同屬性的字體

?

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

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

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

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

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

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

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

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

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

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

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

?

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

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

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

 

5. 選擇左對齊

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

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

 

6. 選擇兩種字體

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

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

 

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

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

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

 

8. 使用大量的對比

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

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

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

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

9. 不要忘記移動端的排版

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

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

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

 

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

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

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

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

 

總結(jié)

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

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