網站設計是一個緊張的過程,需要很多艱苦的工作。從配色方案和商標到導航、布局和文本設計,有很多東西需要考慮。但是,也許設計一個網站最棘手的部分是把所有這些不同的元素整合到一個邏輯上的、緊湊的、平衡的整體中去。
網站設計中的字體是這種統一性的重要組成部分,一旦他們對你的網站有了一個全面的印象,你的訪問者就會不可避免地把注意力集中在文字上,以便更多地了解你和你的品牌。這就是為什么,當試圖將這些設計片段粘合在一起時,注意字體設計是特別重要的。這意味著要確保你的字體是可讀的,干凈的,正好在醒目的右側,而不會從設計的其他部分轉移太多的注意力。
選擇正確的字體是一個好的網站設計的關鍵,無論你的網站是一個作品集,一個博客,一個在線商城,還是一個集團公司的網站設計。為了幫助您找出最符合您的品牌本質的字體類型,我們嘗試讓這個過程對您來說更簡單一些。當你為你的網站設計選擇理想的字體時,你可以考慮以下幾點。
1. 從基礎開始
當涉及到網站設計字體時,有很多東西可以看,它會變得非??臁_@就是為什么最好從最基本的開始,然后再進一步。
應該使用Serif還是Sans:這是基本的字體類別分類之一。襯線字體以羅馬字母為基礎,其特征是在字母的垂直和水平筆劃的末端有一個裝飾性的筆劃。
一些最著名的襯線字體包括Times New Roman和Georgia,Times New Roman字體尤其屬于經典的網絡安全字體。總的來說,選擇這樣的默認字體類型不會出錯,因為它們通常很容易閱讀,而且已經存在了很長時間,所以很多互聯網用戶已經習慣了它們。不過,如果你想嘗試一種更大膽的方法,那么我們建議你選擇Noe Display、cargo Text或Portrait collection等字體。當然,總有一些谷歌的襯線字體可以免費使用,例如Playfair Display、Cormorant Garamond或Crimson Text等。
Attika主題與Playfair顯示字體
艾蒂安主題與鸕鶿Garamond字體
巴德主題與深紅色文本字體
Sans字體在字母上沒有襯線(法語中“Sans”的意思是“沒有”),而且與襯線字體相比,它們的設計更現代、更簡潔。Helvetica、Tahoma、Verdana、Futura和Arial都是廣泛使用的無襯線字體。關于免費字體,我們建議嘗試以下谷歌字體免費字體庫:Roboto、Source Sans Pro、Poppins、Heebo或Montserrat。
Foton主題與Poppins字體
夸特主題與Heebo字體
鬃毛主題與蒙特塞拉特字體
你選擇哪種字體很大程度上取決于你的目標受眾,以及你想通過字體設計喚起的情緒。一般情況下,襯線字體的使用目的是為了提出一個更正式和優雅的語氣。雖然它們也可以用來給你的網站設計提供一個替代的外觀,而且經??梢栽陔s志和時尚行業中找到。
另一方面,無字體通常象征著極簡主義、簡單和直率。然而,sans serif字體的一大特點是非常靈活。例如,如果與舊式字體搭配,無襯線字體可以呈現出它的特性,從而產生一種更傳統的氛圍。
裁剪、引導和跟蹤:這三個設計元素在確定字體外觀時非常重要。這些方法的目的是修改字母之間的空間,以獲得一個視覺上令人愉快和易于閱讀的字體。Kerning表示兩個字母之間的間距,lead表示文本行與行之間的間距,tracking(或字母間距)表示字母組之間的間距。
對比:在排版網站設計中,對比被用來以多種方式強調不同的文本塊,所有的目的都是為了讓重要的部分更加突出。不同的對比類型包括大小、重量(使文本的某些部分顯示為粗體)、顏色、形式(例如大寫或小寫字母)和結構(不同的形式與不同的字體混合)。
對齊:弄清楚文本將如何放置在頁面上也是對字體設計有很大幫助的元素,您可以將文本對齊到左邊、右邊或中間。此外,您還可以選擇是否希望文本在右側顯示為不規則或對齊。
一般來說,對齊到左邊的文本是最容易閱讀的。完全對齊的文本被認為更正式,因為它在頁邊距的兩側均勻地對齊,而不規則的文本則被認為更非正式、更友好。您可以根據您的受眾類型、他們的期望以及是否需要考慮空間限制來設置對齊。如果你必須充分利用寫作空間,那么,無論如何,要對齊對齊。如果你想讓你對齊完美的文本看起來不那么枯燥,你可以在文本的不同部分插入一些視覺效果或一個副標題。如果您這樣做,請確保將文本環繞在圖像周圍,使頁面看起來更干凈、更有條理。
對齊文本時,還應該注意行長度(文本塊的左、右之間的距離)。測量行長度最有效的方法是每一行的平均字符數,最佳行長度為45到80個字符,包括空格。
2. 你的排版選擇應該反映你的設計意圖
網絡上有那么多不同的字體可供選擇,你的字體選擇實際上是無限的。雖然這本身很好,但如果您對自己想要(或不想要)沒有一些概念,那么很容易將事情復雜化。這就是為什么仔細考慮你的網頁設計的目的,以及你想吸引的受眾類型是很重要的。然后,查看您正在考慮的字體樣式是否與您想要傳達給訪問者的一般信息相對應。
在弄清這些核心原則之后,下面是一些在選擇字體設計時需要問自己的額外問題:
你的品牌本質是什么?例如,它是嚴肅的還是悠閑的?
如果你的網站設計圍繞著一個項目,它是什么類型的項目?是短期的還是長期的?長期項目(例如雜志或時事通訊)可能比短期項目有更多的需求,并且隨著時間的推移可能需要更改字體。最好選擇具有不同變體和權重的大型字體系列,以便有不同的選項供您選擇,以防萬一。如果你從事的是短期項目(比如產品發布或營銷活動),那么堅持簡單的字體版本而不增加額外的重量可能就足夠了。
你是想追求實用性和功能性,選擇一種網絡安全的字體,還是想從其他字體中脫穎而出,嘗試一種更獨特的字體選擇?
你的網站設計會更注重視覺驅動(圖片、動畫和視頻等圖形),還是主要由提供大量關于你的品牌或產品信息的文本組成?
問自己這些問題至少可以幫助你大致了解你想要什么,所以當你偶然發現一種字體時,決定它是否適合你至少會簡單一點。
3.選擇字體的數量并按重要性排序
在印刷術中,過多的好東西很容易變壞。在為您的網站設計選擇字體時,我們的建議是不超過三種不同的字體。請允許我們對此作更詳細的說明。
主字體:由于這將是您頁面上最顯眼的字體,所以主字體應該與您的品牌標識最接近。主字體主要用于較大的文本,如標題。
如果可能的話,確保你的品牌標識也包含你的主要字體的提示。在選擇主要字體時,你可以選擇更大膽的字體類型,不過,歸根結底,這完全取決于你的品牌。我們建議研究Voga、Ikaros或Qontra等字體。
輔助字體:你應該使用這種字體來復制你的正文。這意味著頁面上的任何文章或描述都將使用輔助字體。最重要的是,你的輔助字體應該干凈易讀。字體類型,如Futura, Roboto或Verdana都可以是你正文的一個可靠的字體選擇。
如果你問我們,這個是完全可選的。重音字體可用于特定的網站設計元素,如呼叫操作或導航菜單。它們應該足夠突出,以便迅速吸引訪問者的眼球。但是請記住,在不添加第三種字體的情況下,將兩種字體組合在一起已經足夠困難了。
盡管如此,每個品牌都有自己的要求,所以沒有什么是一成不變的。只要記住,字體越多,協調它們就越困難。所以,如果可能的話,盡量將字體號保持在最小,除非絕對有必要。
4. 注意加載時間
在這個時代,沒有人有時間也沒有耐心去訪問慢速站點。這就是為什么如果字體加載時間太長,它可能不是您的最佳解決方案。這里有一些你可以做的事情來防止字體減慢你網站的速度。
堅持使用有限數量的字體,我們已經提到了為什么過多的字體可能不是最好的主意,加載速度是您不應該過分使用字體號的另一個原因。
只選擇你需要的款式,通過這種方式,字體的大小將是最小的,更小的大小等于更少的加載時間。例如,下載字體時,只選擇普通和粗體樣式。
不要下載你不會使用的語言,如果您只需要一種或幾種不同的語言來使用特定的字體,那么請確保在下載時取消選擇您確信不需要的語言。
5. 考慮字體組合
在對不同字體進行配對時,需要考慮多種因素。畢竟,每種字體都有自己獨特的字符——有些字體顯得更嚴肅,有些字體看起來更精致,而另一些字體則給人一種更古怪、更自然的感覺。
把兩種不同“情緒”的字體混在一起可能會奏效——他們確實說過異性相吸,這條規則也適用于字體。嘗試將生硬的字體類型與更中性、柔和的字體類型結合起來。前者應該用于標題,而后者最適合用于正文。
另一個很少出錯的好組合是混合使用serifs和sans serifs,字體的配對都是為了創建對比度,當將serifs和sans serifs組合在一起時,它們足以創建一個細微但明顯的差異。
如果您仍然不確定將哪些字體組合在一起,您可以選擇一個安全的路徑,并使用共享相同字體族的兩種字體,因為它們本來就是要組合在一起的。此外,對來自相同字體家族的字體進行配對可以幫助您帶來一致性,從而使設計網站的過程更加容易。您可以通過更改諸如大小、大小寫或權重之類的內容,通過將常規字體與斜體混合,等等,在相同的字體族之間創建對比度。
如果你需要配對字體的幫助,有幾個很棒的在線工具可以幫助你,比如fontpair。
6. 字體靈感和其他有用的工具
如果你在搜索字體時需要額外的幫助,網上有很多地方可以給你提供字體靈感。例如,Typewolf是一個網站,在這里您可以找到大量的字體推薦和列表,這些推薦和列表可以激發您的創造力,或者至少可以向您展示如何進行字體設計。此外,還有一整套排版資源等著你——從書籍和工具到有用的排版博客。另一個很好的入門網站是使用字體。在這里,您可以瀏覽許多設計師在現實世界和web上使用的字體。
假設你在網上偶然發現了一款設計,它的字體非常酷。你可以很容易地在你的網頁上描繪出這種字體,但是你不知道它的名字,也不知道如何自己找到它。幸運的是,對于這些情況,有一些有用的在線工具可以幫助您識別字體。WhatTheFont就是這樣一個字體標識符,由web上最大的字體集合之一提供支持。你所需要做的就是上傳一張帶有你想要的字體的圖片并裁剪它,結果會顯示出你想要的字體的名字。
Fontface Ninja是一個免費的瀏覽器擴展,允許你查看、嘗試和/或購買任何你感興趣的字體。當您將鼠標懸停在字體上時,您不僅可以了解正在檢查的字體的名稱,而且還可以獲得有關字體大小、字距、行高和顏色的信息。
另一方面,如果你真的不想自己去找網站字體,而只是想盡快看到某些字體在你的網頁上會是什么樣子,你會很高興地聽到許多現代WordPress主題都有現成的字體。這些字體都是經過設計師精心挑選和搭配的,所以一定會有一些字體會吸引你,并且符合你對網頁排版的想法。
最后
即使網絡上充斥著華麗的圖形設計元素,如運動圖形、插圖和攝影,大多數在線信息仍然可以在文本中找到。事實上,排版大約占網站設計內容的90%。因此,字體設計的重要性不容忽視,因為它可以直接影響用戶體驗,因此,可以建立或破壞您的網站。為了確保你的網站足夠清晰,讓你的用戶有充分的閱讀體驗,一定要測試你的字體在不同設備和屏幕大小上的顯示效果。
當你弄清楚哪種字體設計最適合你時,首先要考慮你的網站設計目的。一旦你確定了你想要的大致方向,選擇你想要的字體數量,然后開始瀏覽網頁,尋找可能的字體組合。有很多選擇,所以你一定會找到適合你的。