字體配對指南:為您的網站選擇最佳字體組合

已發表: 2020-11-02

作為網頁設計師,您要為構建的每個網站做出許多重大決定。 調色板、UI 交互、導航佈局、為您的網站選擇最佳字體等等。

然而,您可能沒有花足夠時間考慮的網頁設計領域之一是字體配對。

選擇一種好看的字體是一回事。 一旦您對品牌的聲音和風格有了很好的了解,識別傳達類似氛圍的字體就會變得容易得多。

目錄

  • 為什麼需要字體配對?
  • 配對字體時要考慮的事項
  • 網頁設計中字體配對的 4 條規則
  • 規則 #1:在您的網站上使用的字體不超過三種
  • 規則#2:協調和對比是好的; 衝突是壞的
  • 規則 #3:不要害怕在字體超家族中配對
  • 規則 #4:確保您的字體大小和形狀正確
  • 網頁設計的 30 種最佳字體組合

為什麼需要字體配對?

網站需要不止一種字體——建立層次結構,讓訪問者與大量文本保持互動,並在潛意識中告訴訪問者更多關於品牌個性和方法的信息。

當您在混合中添加這一額外的複雜層時,事情會變得棘手。 您不僅將字體相互配對; 您也將它們與您的網頁設計配對。

我相信您在瀏覽網絡的過程中遇到過這樣的場景:

  • 兩種無聊的字體使一篇冗長的博客文章很難閱讀,你最終會瀏覽標題,看看你是否可以用這種方式把故事拼湊起來。
  • 一種有趣且獨特的草書字體向訪客介紹了該業務,只是因為太小且超簡單的正文字體與第一印象相矛盾。
  • 該網站聲稱該公司採取了一種年輕和創新的經營方式,這就是為什麼復古字體看起來如此格格不入的原因。

如果您不花時間了解字體是如何組合在一起的,那麼在字體配對中就會出現太多問題。

了解如何向 WordPress 添加自定義字體

配對字體時應考慮的事項

在我們的網站最佳字體指南中,我們總結了要尋找的關鍵特徵:

1. 易讀性

襯線字體在文學和報紙中備受青睞的原因之一是因為其易讀性。 字符頂部和底部的襯線(腳)使讀者更容易區分外觀相似的字符,例如大寫的“I”和小寫的“l”,因此不會因理解問題而變慢。

如果您正在設計一個超過 600 個單詞的頁面,出於這個原因,在正文中使用襯線並不是一個壞主意。

也就是說,如果您發現具有不同字體的無襯線字體(即使沒有襯線字體),請不要害怕嘗試。 我們有一些示例說明如何在下面的正文和標題位置中使用無襯線字體。

2. 可讀性

長期以來,人們認為 san serif 比在線文本的 serif 更好的原因之一是因為它們的可讀性高。 然而,研究表明,人們閱讀 serif 與 san serif 文本的速度或容易程度幾乎沒有區別——至少在較小的尺寸下。

多年來,隨著屏幕分辨率的大幅提高,排版師已經能夠創建兩種風格的字體,並且具有同樣的可讀性。 正如 NNG 解釋的那樣:

“在線排版的舊可用性指南很簡單:堅持使用無襯線字體。 由於計算機屏幕太糟糕而無法正確呈現襯線,因此嘗試以正文大小使用襯線字體會導致字母形狀模糊。”

雖然其他字體類型——比如過度裝飾的字體——可能在大標題文本之外難以閱讀,但設計師在如何使用襯線和無襯線字體設置頁面上的文本樣式方面有很多選擇。

那麼,您應該更清楚的是字符的大小和間距,因為這確實會影響可讀性和易讀性。

3. 舒適度

有一些網頁設計師不願意使用像 Helvetica 或 Times New Roman 這樣的字體,因為它們被過度使用了。 但是,字體選擇和配對與您對網站排版的感覺無關,而與訪問者閱讀時的舒適度有關。

所以,如果他們完成了工作,選擇經典並沒有什麼可恥的。

4. 風格

選擇字體類型和样式與您的品牌非常吻合的字體。 例如,襯線字體感覺更傳統和嚴肅,而不是草書字體,後者往往更古怪和有趣。

您可以通過選擇正確的字體類型來向訪問者介紹您的品牌。

當您進入下一步的排版設計時,請不要忽視這些規則: