為網站選擇合適的字體 - 指南

已發表: 2022-05-06

你永遠不會有第二次機會給人留下第一印象。

這是我們聽到人們重申並應用到我們生活的幾乎每一個方面的事情。 它也包括我們的網站。

無論您是 SaaS 還是電子商務品牌,但當訪問者第一次訪問您的網站時,他首先註意到的就是佈局和字體。 因此,在設計網站時擊中靶心對您來說至關重要。

設計是一項緊張而繁瑣的任務,因為它包含一系列相互配合的方面。

有些人可能更喜歡谷歌字體,而其他人可能會選擇排版或草書。 但它是否有效取決於設計過程中涉及的其他因素。 你有導航、字體、佈局、顏色模式、易讀性等等。

至於字體,它們在網頁上無處不在。 您會在標題、正文和其他任何地方找到它們。 因此,選擇正確的字體可以利用您的整體網站前景。

今天,我們將討論如何為網站選擇字體。

為網站選擇最佳字體的重要性

你的字體是你的品牌大使

您只有 0.5 秒的時間來確保您的訪問者對您的網站和字體選擇有積極的看法。 其中大部分,94% 取決於設計元素。

必須了解每種字體都有一組獨特的特徵。 因此,如果您想說服訪問者相信您的專業知識,則必須通過網站的設計語言和字體選擇來做到這一點。

它有助於增強整體用戶體驗

為什麼我們要花時間和資源來建立網站? 因為我們希望我們的訪客在使用它時感到舒適。

打造無可挑剔的用戶體驗需要您對細節有敏銳的洞察力。 這也意味著站在訪問者的立場上,衡量一個特定的設計選擇是否適合他們。

為網頁設計選擇好的字體是其中不可或缺的一部分。 它可以幫助您產生更多的訪問者、更高的轉化率並提高整體滿意度。

網頁字體分類

網頁字體分類
Pexels 上的 Brett Jordan 拍攝的照片

我們已經提到,每種字體樣式都有自己的故事和特徵,這意味著您可以將它們分為幾組。 此外,還有大量付費和免費字體供您選擇並添加到您的網頁中。

我們可以將網站字體分為以下幾類——

襯線

示例 – Times New Roman、Garamond、MS Serif、Merriweather、Abril Fatface、Playfair Display、Georgia

Serif 字體是人類已知的最古老的字體類型之一。 文藝復興時期的字體在過去以高可讀性而聞名。

現代的 Serif 字體具有相同的傳統,儘管也是數字化的。 您可以通過注意橫向或對角線末端來識別它們。 它為設計語言增添了優雅,使其成為書籍和正式網站的絕佳選擇。

大多數設計師將這些字體用於其他內容元素或在其網頁上彈出的內容。 因此,您更有可能將它們作為標題、字幕、徽標和類似文本找到。

無襯線字體

示例 – Arial、Alegreya、Open Sans、Montserrat、Comic Sans、Verdana、Oswald、Roboto、Lato、Helvetica

Sans-serif 字體是 Serif 的現代迭代。 顧名思義,這些沒有襯線,提升了極簡主義的感覺。 在最初的日子裡,計算機顯示器還不夠先進,無法以原始形式呈現襯線。 因此,設計師發現了更便於數字閱讀的字體。

無襯線字體也不會讓讀者感到厭煩,並通過迎合更廣泛的受眾為設計師提供靈活性。 這些字體的最常見用戶迎合了年輕一代,並希望在他們的方法中被視為現代和專業。

Segoe UI 是 Windows 操作系統的默認字體,是一種無襯線字體樣式。 Base 9 & 12 是您可能會遇到的最流行的 Adob​​e 字體類型之一,它屬於 Sans-serif 類別。 SF Pro 是 Apple 平台上最受歡迎的字體之一,也屬於這一類。

平板襯線

示例 - Sentinel、Clarendon、Adelle、Arvo

Serif字體的一種,也稱為Slab Serif作為埃及人的字體。 這些是塊狀且外觀堅固的字體樣式,其對比度比傳統的 Serif 低。

根據您選擇的字體樣式,這些字體的範圍可以從老式複古到更現代的外觀。 通常,您會發現 Slab Serif 作為顯示文本的一部分,但這些也可用於設置正文文本。

腳本

示例——Arizonia、Tangerine、Great Vibes

顧名思義,腳本字體是最接近人類筆蹟的字體。 它們很華麗,您經常會發現它們裝飾網站的標題、徽標和類似的短語。

此外,這些可以被認為是非正式的。 關於 Script 字體最令人興奮的事實是它們的高度情緒化。 這些可以引起反應(在大多數情況下是特定的)並引起訪問者的大量關注。

鑑於它們的複雜性,它們的用途有限。 但是,大多數精心設計的網站都使用它們來增強整體感覺。

裝飾性的

裝飾性的

示例 – Helios、Casandra、Cherie Bomb、Countryside

裝飾性字體也稱為顯示字體,是指不一定具有共同特徵的多種字體。 識別它們的唯一共同方法是注意它們精緻的形狀和高度的裝飾。

這些在 19 世紀開始流行,並且一直用於網頁設計和廣告目的。

與其他可以在不同情況下同化的字體類型不同,裝飾性字體有其局限性,即它們中的每一種都散發出特定的情緒(快樂、恐怖或任何其他)。 這些是具有高度表現力且易於識別的原始字體。

這些是您只能在標題中使用的粗體字體,我們建議您不要將它們用於您網站的正文。 以簡約的方式吸收它們進行網頁設計將使網站脫穎而出並給訪問者留下持久的印象。

字體和字體之間的區別

常見的概念是字體和字體具有相同的含義,但它們不是同義詞。 前者是指具有共同特徵和特徵的字體家族,而後者是指單個字體。

例如, Arial 是一種字體,而 16pt Arial Bold 是一種字體。

為網站選擇默認字體時要記住的事項

我們都知道,世界上有大量無可挑剔的付費和免費字體。 但是在設計網站時,還有很多東西在起作用,你不能選擇你喜歡的東西。 為網站選擇最好的字體是一件整體的事情,需要對其他因素進行深入研究和理解。

以下是在為網站選擇最佳字體時需要考慮的事項 -

正確掌握基礎知識

在為網站尋找好的字體之前,您必須對所涉及的其他內容進行排序。 這些包括;

  • 了解您的目標受眾
  • 網站的目的
  • 您的品牌存在的原因
  • 它承載的個性

像亞馬遜這樣的品牌不會使用恐怖字體(除非在特定場合,如萬聖節)。 您使用的字體類型主要取決於您的目標受眾和您想要產生的情緒。

例如 -無襯線字體表示極簡主義和簡單性。 它們還使您傾向於傳統價值觀和靈活性。 襯線字體具有代表正式表示的裝飾筆觸。

確保您的選擇與您的設計目的同步

一切背後都有一個目的,您的網站設計也有一個目的。 您的選擇最終將取決於您的目標受眾以及您希望通過您的網站喚起的整體情緒。 此外,幾個設計元素在網頁的整體呈現中起著至關重要的作用。

所以這裡有一些你必須記住的元素——

字距調整、領先和跟踪

這三個術語指的是網站中的間距元素。 字距表示兩個相鄰字母之間的間距。 行距定義文本行之間的間距,字母組之間的間距稱為跟踪。 您選擇的間距使您能夠確定字體的外觀。

對比

對於網站,對比度是指文本的呈現方式。 網站設計師使用許多微妙的技術來使某些元素脫穎而出。 這些包括顏色、形式、尺寸、結構和重量,以增加關鍵區域。

對比
攝影者 蘇西黑茲爾伍德 像素

結盟

對齊是指您將文本放置在網站上的方式。 它可以是左、右或中心。 完全合理的文本提供了一種更正式的方法,而粗糙的方法適合打算更加非正式和友好的網站。

通常,左對齊的文本是最易讀的。 要記住的另一個方面是文本塊兩側之間的距離。 您可以通過將平均字符數設置為最多 80 個字符(包括空格)來設置最佳行長。

如果您正在尋找更正式的外觀,則可以選擇完全合理的文本。 它使字體在兩側均勻排列,消除了迷失方向的感覺。

明智地使用字體

鑑於提供的字體和字體眾多,您在做出設計選擇時很有可能會迷失方向。 因此,您必須退後一步,了解您想要創建的最終產品。

下一步是相應地設置字體樣式。 這些設計選擇反映了您所迎合的受眾,並對您的品牌方法有基本的了解。

明智地使用字體
Pexels 上的 Brett Jordan 拍攝的照片

因此,當您最終確定設計元素時,請問自己以下問題 -

  • 你的品牌的本質是什麼?
  • 你想更加強調實用性,還是想脫穎而出?
  • 您的網站將包含什麼樣的圖形? 如果它是圖形繁重的,你可以把前面的部分調低,讓其餘的部分來說話。 如果相反,請確保您的字體選擇能喚起您想要的情感。
  • 是基於項目的嗎? 如果是,它是什麼類型的任務,涉及的要求是什麼?

不要忘記考慮加載時間

慢站點等於低流量。 沒有多少人擁有等待您的網站加載一個又一個元素的帶寬。 設計元素錯誤或設計選擇過度可能會使您的網站變得遲緩並影響您的參與度。

如果您的加載時間過長,您應該查看您採用的字體和样式的數量。 確保只選擇那些必要的。

選擇網絡安全字體

網站字體的選擇通常代表了您如何描繪您的品牌。 例如,亞馬遜、微軟和迪士尼等全球品牌使用不同的字體,這些字體已成為它們的代名詞。

即使您不能為自己做同樣的事情,您也必須確保您的選擇被認為是網絡安全的。 該術語代表一組可以適應不同環境的動態字體。 簡單來說,這些字體可以顯示在閱讀器的屏幕上,即使它們沒有安裝在他們的設備上。

如果您不使用其中之一,瀏覽器將恢復為作為備份保存的通用字體並在其中顯示您的 Web 內容。 它可能會導致功能和設計問題,導致消息傳遞不完整併困擾您的品牌。

幾年前,要找到足夠的網絡安全字體是一項挑戰,但今天有大量的付費和免費字體供您選擇和吸收。

例如,Times New Roman 和 Arial 是 Web 安全字體,分別屬於 Serif 和 Sans-serif 類別。 如果您正在尋找一些裝飾性的東西,Script MT 和 Luminari 分別是屬於 Cursive 和 Fantasy 類別的自適應字體。

是時候使用混合字體以獲得最佳效果了

為網站選擇最好的網絡字體是關於計算混合和匹配的。 每種字體都有其特點,我們建議您選擇最多三種不同的字體(主要、次要和三次),以最終散發出階級和存在的意義。

再加上字距調整和前導等因素,你就有很大的腿部空間來做對了。 同樣重要的是要了解某些字體成對使用效果很好,而其他字體則不行。 所以不乏選擇,但您必須確保它與您的品牌願景保持同步。

此外,鑑於當今互聯網用戶的動態使用模式,必須使用網絡安全字體來動態調整屏幕尺寸。 它確保最終用戶按預期查看網頁,即使他們沒有安裝特定字體。

最終,字體選擇取決於許多因素,您必須取得適當的平衡才能獲得最佳效果。