網頁設計字體組合的10個黃金規則

設計或者藝術的世界,是沒有什麼一成不變的法則的。瞭解了基本的規則之後,我們就可以加入自己的想法,自由的去打破規則。下面小編爲大家整理了網頁設計字體組合的10個黃金規則,希望能幫到大家!

網頁設計字體組合的10個黃金規則

01. 選擇與設計相符的字體

許多字體有着簡便,開朗,正式,雅緻等不同於其他氛圍(英: Mood)或個性(英: personality)。制定設計字體的氛圍,就需要優先確認。

例如圓圓滾滾的字體,用在孩子生日宴會的邀請函上就非常合適,而公司的簡報上就很不合適。

因爲人是有多種多樣各不相同的(例如內向(英: Introverted)或者外向(英: Extroverted)等),因此纔會有魅力。有着強烈的個性的字體,可以將他與簡單的字體相組合以保持平衡。

在下面的這個項目中,有特色的手繪風格字體,與無襯線字體相結合,沒有妨礙主字體的同時,下面的小字也保證了其可讀性。

當決定兩個或以上的字體時,說不定就有一種玩聯想遊戲(英: Guessing Game)的感覺。大部分情況我們都是靠着自己的直覺來決定的,這其實沒關係。

無論是網頁,雜誌,商店用的海報,還是產品包裝,什麼樣的字體組合好,什麼樣的不好,我們都是從聯想字體開始的。

02. 展現視覺的層次感

很久之前發行的報紙或雜誌,對展現字體組合的層次感有着非常好的示範作用。標題,副標題,正文,解說辭等要素都是靠着字體的組合,來將視覺劃分開的。

字體的尺寸(英: Size)粗細(英; Boldness),文字間距(包含了行距(英: Leading)和字間距(英: Kerning))的調整,都可以引導視線,將它們集中在你所希望的特定部分。

層級(英: Hierarchy),就是在標題正文佈局以外,你可以作成各種各樣的的類型的設計。在給項目選擇字體的時候,不妨想一想,你希望一開始就給用戶看到什麼地方。

另一點,決定什麼樣的信息纔是重要的。什麼是最先躍入眼簾的(公司名字的標題,特別優惠等),然後決定什麼內容是不重要的。然後,我們再來決定字體的大小樣式和組合。通常,

重要的內容都是用大字號,粗體來表示的。

03.仔細想想是不是該用

你需要知道什麼樣的環境,什麼樣的用途用什麼樣的字體,什麼樣的字體使用了會更加舒適。在實際表示的尺寸上,清晰易讀是十分重要的,就算是特別小的文字也有必要保證易讀。在下面這個案例中,不論是記載着小文字還是大文字的地方,文字間都留有特定的空間,在強調的同事保證了其易讀性。

然後,字體的尺寸會影響閱讀。在一開始選擇字體的時候,你就需要考慮他的設計性和可讀性是否相匹配。(規則1說明,考慮文字的個性。)

文字選擇的過程中,標題使用的字體(英: display typefaces),選擇有特點的字體還是中規中矩(英: Neutral)的字體,是非常重要的工作。在下面這個雜誌的版面設計中,標題使用了兩種字體,正文使用了無襯線字體。

字體可以從具有歷史性的背景或體裁中選擇。你可以簡單的研究一下字體的歷史背景,以及,這個字體是在什麼時候被創造的。或者說,知道了這個字體是在什麼時代被利用的,你可以瞭解他是否與你的設計相匹配。

例如在給描寫美國總統亞伯拉罕·林肯(英: Abraham Lincoln)一生事蹟的書做封面設計時,我們就可以使用美國南北戰爭(1861-1865)時使用的Caslon或Clarendon體。

另一個案例,字體的種類,在設計的整體中擔任很大的作用。下面這個案例,因爲想表現出1950年代的復古感覺,字體採用了那個年代常用的廣告或標識常用的字體。

 04. 襯線體與非襯線體一起使用

如果沒有時間了,需要你馬上決定兩種字體。在那個時候,我們可以選擇一部分文字使用襯線體(英: Serif),而另一部分文字我們可以是用非襯線體(英: Sans Serif)。這樣的組合大體上往往很不錯,尤其是兩種字體大小不一樣的時候是最適合的。

另外補充重要的一點,現在世界上的排字藝術(英:typography)中,關於襯線體和非襯線體哪一個更容易閱讀有着很大的分歧。大量的文字和文章表明,襯線體的字體可以有效的轉移視線,提高閱讀速度,尤其在印刷品中效果非常明顯。

相反的非襯線字體有着簡單的風格,在網上或者銀幕上表現效果都很好,能讓畫面感覺變得更清晰。

 05. 要有對比意識

另一個使用襯線體和非襯線體組合在一起的理由是,具有對比性。這種對比有很多關聯性包含在裏面,我們需要仔細考慮這之中的字體的層次感,相互之間的互補性等等。

對比,可以通過字體的種類,大小,字體,文字間距,顏色等各種各樣的方式來實現。下面這個樣本案例,就是利用了粗體字與細體字相互組合而成的。這兩種幾乎180度大轉變的風格,卻很好的組合在了一起。

因爲每個字體都是不同的(英: Difference),所以各種字體都有着各種各樣的意義。另外,大膽的使用了粉紅色,讓他比標題還要大兩倍的字號,也不能錯過,他很好的將非常細的字給強調了。

 06. 避免字體衝突

在組合字體的'時候,對比(英: Contrast)是非常重要的,同時也要避免它們相互衝突(英: Conflict)。不同的字體並不意味着他們可以很好匹配組合。

一般來說,幾個風格相似的字體,相同的比例,小字的高度(通常被稱爲x-height)非常的統一等都是值得注意的地方。這樣就算他們的外觀不同,設計從整體來說都是非常統一的。

來看看下面這組字體組合吧。因爲是襯線體和非襯線體,所以風格上是非常不同的。上面的字體非常圓潤,字間距的設定都留有餘地,而下面的字體偏細長,風格更加擁擠,我們可以看到對比非常的大。像頭髮一樣細的襯線體與非常細的非襯線體,在強調他們的對比時應當更加註意。

 07. 避免使用相似的字體進行組合

這在第五條介紹對比時也提到了,太過相似的字體組合也會成爲問題。因爲沒有太大的區別,所以在製造層次感的時候就成了第一個問題。還有字體與字體之間的差異性,選擇它的目的,以及他看起來就像是選錯了的。

但是,也沒有必要選擇完全不一樣的字體。比較字體的重量,外形是非常重要的,字體過於相似,特別是使用相同尺寸的時候,會讓用戶混亂,讓整體內容都變得模糊。

選擇兩種字體並列,然後讓我們一點點慢慢的進行分析。如果字體的外觀上基本相同,由於選擇的字體種類有着非常好的對比,這也是設計的很好的一個預兆。

08.使用同一個系列的字體

使用同一個系列的字體,一直都是一個非常穩妥的辦法。我們可以在一個系列中找到各種各樣的字體(不同的重量,樣式,大小文字等),來充分的表達我們的設計項目。

相同系列的字體進行組合,利用不同的大小,樣式,重量(Light、Regular、Bold等),注意表現出他們的對比。

利用歐文斜體字或Extended版本等字體系列,可以給你的設計創造出無限的可能。

如果項目中規定只能使用一種字體,他的優點就是能讓設計變得更加有效率。縮短了去尋找能完美組合的字體的時間。

 09. 限制你所使用的字體數量

一般一個項目所使用的字體數量是兩到三個,當然你也不必死守這這句話不放。如果你參加過雜誌編輯工作,你也許能從中得到更多的經驗,其實並沒有什麼硬性規定的。

例如,參考風格華麗的維多利亞風格,像這樣參考具有特色的設計風格時,你就更需要仔細推敲字體組合了。利用大量的字體,與設計相調和,得到的結果是平衡還是混亂,這是你需要注意的事項。

但是什麼樣的設計要素,選擇什麼樣的字體纔是合適的,需要大量的設計項目來進行練**。選擇什麼樣的字體,因爲每個設計項目的不同,便會有不同的見解。如果你使用了大量的字體,而當別人一定要追根究底問你爲什麼使用這麼多時,你完全可以不回答他。

10. 勤加練習

最後,我想這是一個好心的建議而不是規則。用你所知道的字體組合不斷的聯繫吧。通過不斷地努力與錯誤,最終你會得到屬於你的創新能力。可能有完美的字體組合,但並沒有完美做出他們的公式。

無懼風險,相信自己,迎接更多的挑戰。或者你有與規則不同的見解,但自己的字體組合感覺又不是很好,想想究竟是哪裏錯了,從失敗中獲得經驗是非常有必要的。這次介紹的只是一些排版的基礎,也希望你們能有更好的作品設計出來。一起來感受設計的樂趣吧~