11 種網頁設計字體，讓您的網站煥然一新

網頁設計字體似乎只是您商業網站的一個小方面，但實際上，它們對轉換有很大影響。

“超級”與普通的區別是什麼？ 正如一個藍色的大頭電影角色驚呼，“演示！”

在設計網頁時，外觀在總體規劃中起著重要作用。 假設您可能有一篇有趣的作品，您的聽眾可能會喜歡。 如果你的演講很糟糕或非常糟糕，你可能會把觀眾推開。 很遠很遠。

幸運的是，網頁設計和開發並不困難。 您需要使您的網頁具有吸引力，並真正吸引您的觀眾。這就是您為用戶創造美妙體驗的方式。 特別是，您選擇的字體會影響讀者是停留還是離開您的網頁。

隨意將這些字體用於您的網頁設計，並發揮您的最大潛力。 希望您可以大致了解選擇哪些字體以及為什麼它們對在線影響如此強大。

如何選擇網頁設計字體

您的網頁具有明確而獨特的外觀。 如何在外觀上顯示文本是您成功的關鍵。 但是請記住，您可以根據以下六個因素提高成功率：

1. 易讀性和可讀性
2. 品牌一致性
3. 情緒和基調
4. 網頁無障礙指南
5. 跨瀏覽器兼容性
6. 可擴展性

1.易讀性和可讀性

易讀性是您的用戶區分字符的難易程度。 如果您的讀者無法確定字符是否為“5”的“S”，那麼您可能需要選擇不同的字體。 一些字體為相似的字符（如“1”、大寫的“I”和小寫的“l”）提供不同的形狀，以便將它們彼此區分開來。

易讀性可能會受到其他因素的影響，例如前景色和背景色的選擇、字體大小和字體粗細。 例如，當您增大字體大小時，某些字母可能更清晰，但它是否可讀？

在這方面，易讀性不同於可讀性。

可讀性是讀者閱讀文本塊的舒適程度。 這種舒適程度還受到文本易讀性的影響。 如果一個詞太小而無法將字母彼此區分開來，則該詞可能不可讀。 在一堆密集的法律“細則”中也是如此，人們可以閱讀整個文本，但並不像他們希望的那樣舒服。

2. 品牌一致性

您需要使演示文稿保持一致。 雖然您的品牌聲音為您的網頁提供了堅實的基礎，但始終保持相同的身份可以確定您在推動您的觀點方面的認真程度。 您的演示文稿旨在講述一個特定的故事，並且您是在邀請客戶認同並認可該故事。

尋找能夠保持敘事的字體。 如果您正在尋找專業的語氣，請使用具有專業外觀的字體。 對於引人入勝且友好的內容，請使用看起來舒服的字體。 如果您足夠仔細地尋找，您可以找到一個剛好符合要求的產品。

3. 語氣和語氣

字體心理學研究字體如何影響觀眾對內容的看法。 有些字體傳統上用於特定目的，人們已經習慣了。 其他字體只是簡單地喚起了讀者的某些想法和情感。 無論如何，您可能希望使用一種字體來幫助您的讀者進入您想要建立的情緒。

您可以嘗試使用字體來營造那種氛圍。 例如，某些字體對於標題比作為正文更有效。 混合和匹配字體甚至可以為您的內容營造更生動的感覺，並帶來更強烈的情感。

4. Web 無障礙指南

您的網站必須包容所有訪問者。 它確保那些遇到困難或限制的人仍然以與其他人相同的方式歡迎您的網站。 它不僅是一種為您的企業帶來更多流量的工具，而且還鼓勵您在所有消費者之間建立一個社區。

為此，設計人員經常使用指南來改進網站的 Web 可訪問性。 這些規則和準則使內容對所有訪問者而言更加人性化和易於理解。 雖然此時不需要，但提高網絡可訪問性是與您的消費者群建立融洽關係的好方法，並向他們表明您關心並希望他們成為您正在構建的內容的一部分。 四個主要標準是：

• 可感知的。 簡而言之，您的消費者必須了解您的內容。 它也不僅限於“看到”內容。 請記住，盲人或視力不佳的用戶使用替代屏幕閱讀器軟件來幫助他們瀏覽 Internet。 在設置網頁時考慮這些用戶。
• 可操作。 這意味著所有用戶都可以訪問和操作您網頁的所有部分（文本、鏈接、音頻、視頻、其他媒體）。 通常，大多數可操作的網站都很簡單，因此易於瀏覽。
• 可以理解。 您的用戶必須能夠消化您所說的所有信息。 您可以使用通用語言，或提供替代語言。 同樣，您網站的導航必須直觀自然地組織，以幫助用戶了解您和您的產品。
• 強壯的。 您網站上的內容應該很容易被屏幕閱讀器等輔助程序分解和解析。 這樣，有困難的人仍然會成為您網站提供的體驗的一部分。

推薦閱讀：優先考慮以客戶為中心的網頁設計概念

5.跨瀏覽器兼容性

您必須考慮到一些用戶只是直接不想使用流行的網絡瀏覽器，如 Chrome 或 Mozilla（出於某種原因）。 在某些情況下，這些替代瀏覽器使用替代字體（如 Arial 或 Times New Roman）來顯示您的文本。 使用大多數（如果不是全部）瀏覽器都能正確顯示的字體。

網站支持的四種字體格式是：

• 嵌入式開放式 (EOT)。 僅受 Microsoft 瀏覽器（Internet Explorer 和 Microsoft Edge）支持
• True Type 字體/Open Type 字體 (TTF/OTF)。 這些格式由 Apple 和 Microsoft 在 1980 年代創立，所有主要瀏覽器均支持這些格式，即 Chrome、Firefox、Opera、Microsoft Edge 和 Internet Explorer
• Web 開放字體格式 (WOFF)。 由 Mozilla 於 2009 年創立，這種格式是 TTF/OTF 的壓縮版本，加載速度更快
• Web 開放字體格式 (WOFF2)。 對早期 WOFF 的修訂，其主要參與者包括 Chrome、Firefox 和 Opera； 它旨在取代 WOFF 並且最終會這樣做

請注意，目前最常用的格式是 TTF/OTF 和 WOFF。 使用這些格式的字體可以在所有支持的瀏覽器中正確顯示。

6.可擴展性

你有沒有註意到有些字體看起來比其他字體更好更流暢？ 這些類型的字體稱為可縮放字體。 無論文本大小如何，它們都被編程為看起來相同。 有些字體的編程方式不同，生成的文本看起來更便宜，質量也更差。

為什麼可擴展性很重要？ 這很簡單。 有些人，主要是年長的用戶，就是無法閱讀較小的文本。 他們必須非常努力地放大才能閱讀您想讓他們閱讀的內容。 選擇可縮放字體可以豐富他們在您的網頁上的體驗，也可以讓他們感覺自己是您的受眾群體的一部分。

流行的網頁設計字體

現在您已經了解了為您的網頁選擇最佳字體的基礎知識，下面是設計師推薦的一些流行字體。

1.打開無

Open Sans 是一種“簡潔”的字體。 它直截了當，切中要害，不會混淆您的信息。 Open Sans 的用途也非常廣泛。 它看起來很正式，但它的設計師也賦予了它“中性但友好的外觀”。

它是可擴展的，這意味著您可以用小字體和大字體閱讀它。 它還針對打印、Web 和移動界面進行了優化。

你可以看到為什麼 Open Sans 在網上很受歡迎。 事實上，超過 8400 萬個網站以這種或那種方式使用它。 其中一些網站包括：

• 工作
• 瓦娜
• 環礁數碼
• Ssense 雜誌

2.機器人

Roboto 是設計師推薦的另一種流行字體。 它是一種剛性和幾何形狀的字體，同時具有“友好和開放的曲線”。 字母看起來彼此更緊密，使閱讀更有節奏感。

Roboto 的字體系列包括 Roboto Condensed 和 Roboto Slab，使整個 Roboto 系列變得靈活。 它是一種幾乎可以用於任何東西的字體，從標題到標題，再到普通的舊正文。 無論如何，它看起來足夠專業和友好，可以放在您的網頁上。

難怪超過 6.3 億個網站（包括 Google 和 YouTube）虔誠地使用 Roboto。

3.拉托

Lato 最初是為企業網站設計的專業字體。 由於客戶轉向了不同的方向，因此該字體已發布供公眾使用。 字母看起來時尚而優雅，有點像鄉村主題的手寫字母。

它在視覺上也很容易，使 Lato 成為正文的有力競爭者。 它在較大尺寸時也非常好，隨著文本變大仍保持其獨特的特性。

熟悉和溫暖也是字體的重要主題。 Lato（波蘭語中的夏天）在設計時也考慮到了夏天的感覺。 它很僵硬，但又不過分，散發出一種嚴肅但令人欣慰的語氣。

在企業風險投資網站 Bundl 中可以找到 Lato 使用的一個很好的例子。

4.黑體字

這個是經典。 你可能聽說過這個，根據你問的地方，它收到了很多褒貶不一的評價。 無論如何，Helvetica 仍然是網頁的可靠字體。 它是一個非常靈活的字體系列，您可以將其設置為粗體、壓縮字體，或者只為您的網頁使用普通字體。

Helvetica 最初設計於 1957 年，是一種中性字體，幾乎可以在任何地方使用。 它充分發揮了這一作用，迅速成為 Internet 上最流行的字體之一。 該字體使文字在遠處更容易閱讀，也非常適合標題。 無論文本的字體大小如何，它都保持清晰易讀。

Helvetica也因其靈活性而不斷與時俱進。 不同行業的品牌以不同的方式使用 Helvetica，即：寶馬、摩托羅拉、雀巢、微軟和蘋果。 美國國家航空航天局和歐盟等政府機構也採用 Helvetica。

5.比鄰星新星

Facebook 的前設計主管 Cameron Moll 發表了一篇關於 Proxima Nova 歷史的文章。 他將這種字體描述為“數字界面的通用性令人難以置信，在許多不同大小下表現得像主力，並且在視網膜顯示器上看起來非常出色。”

Proxima Nova 是一種字體，旨在捕捉 Futura 等字體的圓度和 Helvetica 等字體的幾何形狀。 然而，它在這方面並不是獨一無二的，因為其他字體也試圖做同樣的事情。 在 2000 年代初期，Gotham 比 Proxima Nova 更受歡迎。 Moll 認為，Proxima Nova 在網絡上的早期可用性提升了其作為標誌性字體的地位。

從那時起，它就成為網上最流行的商業字體。

6. 蒙特塞拉特

Montserrat 字體的靈感來自同名的巴西社區。 它試圖捕捉布宜諾斯艾利斯舊版式的氛圍，並將其帶入現代媒體。 正因為如此，蒙特塞拉特驅使觀眾懷舊和熟悉。 它為各種宣傳材料定下了嚴肅而友好的基調。

它的流行歸功於它的可擴展性和可讀性。 因此，它的使用不僅限於在線媒體，還包括小冊子和書籍等印刷媒體。 墨西哥政府的圖形手冊也將字體設置為官方媒體的標準字體。

7. 鐵路

Raleway 是一種時尚的開源字體。 這意味著，它可以免費使用，並且可以在任何網頁設計中真正站穩腳跟，尤其是其獨特的“W”。

設計師喜歡使用 Raleway，因為它易於訪問，也因為它與其他字體結合得很好。 字體本身是可讀的，並為讀者提供了一種歡迎的吸引力。 您可以將 Raleway 用於任何適合廣大受眾的項目。

8. Source Sans Pro

Source Sans Pro 是 Adob​​e 的第一個開源字體系列。 它旨在與用戶界面配合得特別好。 它的圓形形狀使字母在眼睛上看起來很舒服，同時最大限度地增加了每個字符之間的空間。

Source Sans Pro 最顯著的品質是其易讀性，您可以通過一些風格設計選擇輕鬆區分相似的字符。 Source Sans Pro 的核心是可訪問性。 它易於閱讀且語氣專業。 斯坦福大學和 Adob​​e 在其網站上使用該字體。

9. 歡樂滿人間

如果您正在為您的網頁尋找一種堅實而嚴肅的基調，Poppins 可能正適合您。 這些字母看起來很強壯且呈線性，並且與字體一樣簡單明了。

因此，您不必擔心文本的可縮放性。 它也非常時尚和簡單。 它是任何網頁的可靠選擇。

動畫工作室 Wonderlust 是使用該字體的 810 萬個網站之一。

10.格魯吉亞

由 Microsoft 設計，Georgia 是一種旨在以數字格式可讀的字體。 即使在低分辨率屏幕上，它也顯得優雅而清晰。

它的優雅很大程度上歸功於其羅馬風格的設計。 但是，這根本不會阻止字符清晰可辨。 因此，數字和紙質閱讀體驗都感覺平衡。

Microsoft 會定期更新字體，使其外觀更現代、更靈活。 可以購買更新版本 Georgia Pro。 不過，微軟用戶可以在微軟商店免費獲得該字體。

11. Playfair 展示

Playfair Display 讀起來像 18 世紀的新聞紙，但這並不是一件壞事。 這種字體看起來很花哨，為您的網頁營造了一種非常專業的基調。 它還有助於復雜的閱讀，並且非常靈活。 您可以將它與其他字體搭配使用，營造出優雅的感覺。

如何有效地使用網頁設計字體

您已獲得要使用的字體列表，以及如何根據需要識別字體。 有效地使用它們是一個完全不同的過程。 以下是使用字體時需要注意的一些事項。

1.字體配對組合。

設計師混合搭配字體以達到更好效果的情況並不少見。 把它想像成穿過你的衣櫥，讓一件普通的白色 T 卹在你的一套衣服中脫穎而出。 或者將人們的目光吸引到您腳下的那些新踢腿上。

同樣，您可以將讀者引導至您網頁中的某些點，即使他們本身並不引人注目。 你只需要圍繞它構建其他一切，以確保人們真正關注那個特定的地方。

這包括在同一網頁上為不同的目的使用不同的字體，或者像設置美觀的配色方案這樣簡單的事情。 最大限度地利用色彩心理學甚至可以提高網頁的轉化率。

2.自定義字體創建。

如果您足夠有創意，您甚至可以為自己的目的創建自己的字體！ 一些服務，如 Calligraphr，允許您將自己的筆跡轉換為數字格式。 如果您正在尋找一種其他人可以使用的字體，請注意這通常是一個漫長的設計過程。

3. 許可和使用權。

大多數字體都是免費的，可用於多種用途，無論是個人用途還是商業用途。 然而，一些字體設計師對其作品的使用進行了限制。 例如，您必須向設計師付費才能將字體用於商業目的。

4.測試和優化。

任何網頁的重要預發布階段是測試和優化。 您必須仔細檢查文本是否顯示正確，字體是否正確，配色方案是否賞心悅目等。

推薦閱讀：如何創建無縫的網頁設計和開發工作流程

設置用於網站的字體

既然您已經了解哪些字體在網上常用，您就可以開始使用它們了。 開始的方法如下：

1. 下載並安裝字體。

一些創意套件已經預裝了可供使用的字體。 但是，如果您發現您喜歡的字體不在您的目錄中，您可以簡單地在線搜索它們。 您還可以選擇要下載的格式（例如，是否使用 TTF/OTF、WOFF 或兩者）。

許多開源字體都可以免費下載，但有些字體必須購買才能用於某些目的。 如果您計劃將字體用於商業目的，請務必在使用之前閱讀字體的許可條款。

找到字體後，只需將其下載到計算機上即可。 大多數字體將以 .ZIP 格式出現，因此您必須提取它們。 只需右鍵單擊該文件，然後選擇“Extract Here”即可。 您最終會得到一個可以安裝的字體文件。

只需雙擊該文件，然後在彈出的預覽屏幕上按“安裝”。

2. 將字體嵌入您的網站。

如果您打算自己完成這項工作，您可以瀏覽不同的指南，例如本指南，了解如何使用不同的網絡平台嵌入字體。

請記住，在向公眾發佈網頁之前有一個網頁設計清單。

3.確保跨瀏覽器兼容性。

更流行和常用的字體已經有 TTF/OTF 或 WOFF 版本，這意味著它們可以在所有主要瀏覽器中正確顯示。 但是，您可能會遇到一種自定義字體，該字體看起來不太像預期的那樣，因為它具有不同的格式。

如果你想堅持使用一種字體，你可以嘗試一些在線指南並使你的文本跨瀏覽器兼容。 但是，建議您使用具有上述格式的字體，這樣您的網頁設計就不會受到損害。

網頁字體優化技巧

您可能會遇到網頁加載時間問題。 在這個時代，加載時間長是任何瀏覽網頁的人的禍根。 您的用戶和潛在客戶也不例外。 以下是避免加載時間過長的方法：

1.不要使用太多的字體。

這個非常簡單。 通常，您在網站上使用的自定義字體越多，意味著您的網絡託管服務速度越慢。

字體使用的一般經驗法則是堅持兩種字體類別：一種用於頁眉和標題，一種用於正文。 這樣一來，您就可以避免託管服務超載，並且可以減輕您的設計團隊的負擔。 如果您頻繁更改字體，您的查看器也可能會關閉。

2. 為每個瀏覽器使用優化的字體。

不幸的是，沒有一種格式適用於所有瀏覽器。 創建網頁時必須使用不同的格式。 借助 Google Analytics，您可以檢查哪些瀏覽器和設備最受訪問者歡迎。

如果您對使用替代字體的舊瀏覽器感到滿意，則可以隨時使用快捷方式。 但同樣，不推薦這樣做。

要點

現在塵埃落定，是時候發揮你的創造力了。 您可以自由使用此列表中的字體或瀏覽 Internet 以查找更適合您需要的自定義字體。 無論如何，以下是本文的三個主要內容：

• 使用與您的品牌聲音一致的字體。 它改善了與您的受眾的關係，並為新客戶定下了基調。
• 讓您的品牌以客戶為中心。 網頁設計的一個重要方面是您正在為用戶創造一些東西來享受； 不僅僅是你。
• 不要害怕嘗試。 這就是設計過程的目的。 你應該探索什麼有效，什麼無效。

今天就聯繫 Propelrr 了解更多關於網頁設計概念的信息。 我們非常樂意為您提供幫助。 如果您需要更多幫助或更多信息，請通過 Facebook、Twitter 或 LinkedIn 與我們聯繫。

有關如何創建以用戶為中心的網站和應用程序的更多技巧，請確保訂閱 Propelrr 時事通訊以獲得即時訪問。