Scalenut 成為 2022 年 G2 秋季領導者 - 內容創作類別

已發表: 2022-11-29

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

我們聽到人們在我們生活的幾乎每個方面都重申和應用了這一點。 它也包括我們的網站。

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

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

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

平板襯線

示例 - 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 是分別屬於 Serif 和 Sans-serif 類別的網絡安全字體。 如果您正在尋找裝飾性的東西,Script MT 和 Luminari 是分別屬於 Cursive 和 Fantasy 類別的自適應字體。

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

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

再加上像字距和行距這樣的因素,你有很大的空間來把它弄好。 同樣重要的是要了解某些字體可以成對使用,而另一些則不能。 所以不乏選擇,但你必須確保它與你的品牌願景同步。

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

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