排版是網站設計的重要組成部分,事實上,它和顏色和圖片一樣,對于網站的美學設計非常重要。微軟和麻省理工大學甚至進行了一項研究,證實好的排版是如此強大,它可以影響用戶的情緒。那么,為什么不利用這一點呢?
做出最佳的排版選擇是設計過程中至關重要的一部分,但是有這么多字體可供選擇,你怎么能下定決心在自己的網站設計項目中使用其中一種呢?為了幫助你更容易地決定,我們列出了10種Google字體組合的靈感。你會發現哪些字體可以像花生醬和果凍一樣搭配得很好,以及哪些組合可以確保給你的網站訪問者帶來積極的用戶體驗。
在我們開始之前,讓我們看看設計過程通常是什么樣的,以及排版是如何融入其中的……
從哪里開始
大多數網站設計師使用各種在線資源作為出發點,他們在dribble、pinterest、behance等網站上尋找靈感,直到他們對自己想要創造的風格和想要在作品中注入的氛圍有了大致的了解。在很大程度上,是圖像激發了字體的選擇。
請看下面顯示的圖像,你怎么描述它?你可以說它是現代的,充滿活力的,對吧?因此,伴隨圖像的排版應該有同樣的感覺。
最重要的是確保一致性,你希望每一個內容都能完美地融入到最終的網站設計中。每一種字體都應該在視覺上與圖片和網站的目的一致。
例如,當Oswald與諸如Roboto、Open Sans和Merriweather等字體結合使用時,它看起來非常棒。如果所有的字母都是大寫的,這些字體會給人一種非常都市化的感覺,很適合披薩店或餐廳。但如果你是為一家律師事務所做網站,你可能想要搜索另一種字體,一種更直接的字體,它可能更適合與法律相關的內容。
排版SOS
如果你在排版方面陷入了靈感困境,你可以向以下幾個地方尋求幫助。像Fontpair和Canva字體組合這樣的網站是提供有趣的字體搭配的很好的資源。你可能還想看看排版資源網站,那里有很多與排版相關的內容。你可以用它來獲得靈感,但你也可以選擇購買字體,甚至免費下載一些。至于高質量的免費字體,Google字體數據庫是權威的首選資源。
如果你不是一個網站設計師或網絡專家,但已經決定建立自己的網站設計了,你可能要考慮得到一個溢價WordPress主題。這樣你就可以為自己省去很多麻煩,因為你可以得到一個設備齊全、隨時可用的網站,上面已經為你準備好了完美的字體組合。
字體組合的藝術
不管項目的性質如何,在大多數情況下,設計師都會選擇一種以上的字體(或者至少是一種字體的變體)。每種字體都是不同的,有些看起來很嚴肅,或者很有力量,有些看起來很優雅,很好玩,等等。我們的目標是找到最適合項目整體設計的方案,并能完美互補。在大多數情況下,最好的選擇是每個項目使用兩種字體,因為更多的字體很容易變得太過了。
對于初學者來說,確定哪種字體是主要字體是很重要的。從那里,你可以決定你要結合它的字體。例如,如果主要字體是彎曲和獨特的,最好的選擇是與一些簡單的配對。這樣你就不會分散別人對你想要高亮顯示的文本的注意力,但是互補字體仍然足夠突出,可以閱讀。
做幾個組合,看看他們看起來像旁邊的圖像和按鈕。您將能夠更容易地決定哪種組合在您的設計上下文中工作得最好。
恒星字體搭配
01. 軟件網站字體
說到軟件和技術網站,我們推薦使用Montserrat。它看起來非常現代,而且超級易讀。與此同時,它使你能夠以一種干脆和城市的方式傳達你的信息。這種幾何字體最好的工作與開放Sans,深紅色的文本,源Sans Pro,或Roboto字體。你也可以自己使用它,如果你想把事情調下來,只在整個網站設計上使用一種字體。只要看看下面的圖片就知道它的用途了。它看起來是不是超級時髦?
使用Montserat
02. 優雅網站字體
如果你想要整體看起來優雅,最好選擇無襯線字體。它們缺少每個字母末尾的筆劃,這使得這種字體看起來精煉、簡單、復雜。無論您選擇組合使用哪種無襯線字體,您都不會出錯,無論您正在創建的是哪種類型的網站設計。注意在下面的例子中,柔和的顏色和看起來柔和的圖像如何像拼圖一樣與字體的風格相匹配。老標準TT和Muli一起創造了一個完美的和諧和covey獨特的藝術風格,一定會給任何訪問你的網站設計的人留下持久的印象。另一個出色的組合,為優雅的外觀是Muli和Ovo字體。
舊的標準TT和Muli文本配對的一個例子
03. 烘焙網站字體
當你為你的面包店建立一個網站時,你想讓它看起來盡可能的誘人和美味。你決定使用的圖片在塑造你想要的令人垂涎的風格中起了很大的作用。但排版也是如此。在下面的例子中,讓我們來看看Cormorant是如何在創造整體的現代感的同時又創造了傳統的氛圍。只要看一眼圖片和它的內容,我們就會覺得這家面包店似乎是多年來當地人的最愛。正如你所看到的,Cormorant與Muli組合在一起看起來很棒,但與Proza Libre組合也不會出錯。
Cormorant和Muli文本配對的一個例子
04. 商業網站字體
Montserrat是一種通用字體,幾乎可以與任何類型的網站。它所散發出的氛圍很大程度上取決于你決定與之配對的圖像,當你為你的企業建立一個網站時,不管利基是什么,你幾乎肯定不會在Montserrat出錯。它給人一種科技感和未來感,這正是每個現代企業所需要的。當你把它和開放無襯線字體結合在一起時,它可能是最流行的無襯線字體之一,你可以很容易地為你的網站設計一個實用的同時溫暖的基調。另一方面,您也可以選擇Open Sans作為您的主要字體,并將其與Playfair Display或Poppins等結合使用,以獲得許多企業所追求的現代“嚴肅但平易近人”的外觀。
Montserrat和開放Sans結對的一個例子
05. 體育網站字體
當涉及到體育相關的網站設計項目時,網站設計師通常選擇一種看起來強大而簡單的字體。目標是通過使用適當的字體和態度來產生興奮感。當然,你也不想太過瘋狂,因為文本需要易于閱讀。理想的選擇是Teko字體。您可以使用半粗體的版本,稍微調整一下字母間距,這樣就不必太大就可以達到最大的效果。字體本身是相當沉重的,與字母的方形比例,看起來相當簡單和容易的眼睛。你可以用Ubuntu來補充它,Ubuntu很時髦,而且與體育主題的項目配合得很好。
Teko和Ubuntu配對的一個例子
06. 教育網站字體
Montserrat致勝!撇開所有的玩笑不談,這種字體是如此的多才多藝,無論它所搭配的圖形或媒體內容是什么類型,它看起來都是如此的令人驚嘆。如果你想為幼兒園、高中或其他教育機構建立一個網站,Montserrat絕對是你最安全的選擇。將它與深紅色文本配對,如下例所示,您就得到了一個殺手組合。在所有字體中,我們認為Montserrat字體最適合用深紅色文本。這種老式的字體非常適合Montserrat的現代風格,這兩種字體一起極大地提高了網站頁面對所有學者的吸引力。
Montserrat和深紅色文本配對的一個例子
07. 城市網站字體
你想讓你的網站具有城市個性嗎?如果是,那么奧斯瓦德就是你最好的選擇。這種廣泛使用的無襯線字體使字母看起來醒目和粗體,這就是為什么你很可能會看到它的標題。它還與其他字體完美融合,比如Roboto、Arial、Merriweather、Oxygen、Quicksand,尤其是與Open Sans字體。如果你決定在你的副標題或副本中使用開放Sans字體,你就不會出錯。這是一個匹配,一定會使每個頁面看起來獨特和當代。
Oswald和Open Sans文本配對的一個例子
08. 糕點店和蛋糕店的字體
如果你擅長美食,并且想讓全世界都知道它,那么一個看起來很專業的網站設計是必須的。除了使用誘人的圖像,你的排版需要足夠好,以及吃。一個不錯的字體選擇是Poiret,因為它是幾何的,同時也顯得精致和誘人。這使得它非常適合蛋糕店,尤其是糕點店。把它和無字體字體組合在一起,你會得到一個難以抗拒的美味組合。
Poiret和Open Sans文本配對的一個例子
09. 作品集網站字體
在線投資組合是在全球范圍內接觸人群的好方法,可以展示你的能力。為了給自己爭取盡可能多的客戶,你網站設計的每一個元素都需要好好考慮,包括排版。字體應該與網站設計的其他內容相同。您甚至不需要在字體方面太過瘋狂,就可以獲得最大的效果。例如,使用粗體和常規版本的單一sans serif字體的組合一定會做的工作,并吸引你的訪客的注意。Muli是一種無襯線字體,是標題和正文的最佳選擇。但是如果你想在你的網站設計中有一些多樣性,你可以很容易地將它與Lustria serif字體配對。
Muli和Lustria文本配對的一個例子
10. 婚禮網站字體
Muli是一種非常通用的字體,適用于各種各樣的網站設計。如果你把它和Cormorant配對,你會得到一個適合所有婚禮網站的完美排版。輕盈版的《花木蘭》看起來超級優雅,而斜體版的《鸕鶿》則給整個網站帶來了一種浪漫的氛圍。你可以隨意調整你的字體顏色,只要確保一切都符合你想要達到的婚禮審美。
Muli和Cormorant文本配對的一個例子
總結
排版不應該被當作是事后的想法,確定它需要大量的時間和精力,因為您的工作不僅僅是選擇合適的字體組合。您還必須決定完美的字體大小和重量,以及間距、字距等。所有這些元素結合在一起會極大地影響您的網站設計和您的工作被理解的方式。
如果大量的Google字體還不夠,您可以始終尋找一些自定義字體。在大多數情況下,你需要支付一些錢來使用它們。但是有幾個網站你可以免費找到它們,比如fontsquirrel和dafont。