- 相關推薦
網頁設計中怎樣選擇合適的字體
第一印象通常就是一種持續印象。不管你是否意識到，你的版式能夠幫助用戶在他們甚至還沒有開始讀一個字或者點擊一個按鈕之前建立一個體驗。版式不僅僅是講述一個故事，它告訴用戶是這個網站的幕后以及這個背后的人是做什么的。對于字體的處理創造了一種氛圍，同時也會像聲音的音調一樣引起回想。
你需要問一問你自己，你想要表達什么以及你想要怎么去表達它？想一想用戶：當頁面加載的時候你想讓他們有什么樣的感受和體驗？版式建立一個交流的模式，同時，也表達了一個網站的個性。字體的選擇將會決定人們對你的網站的反饋。
以下的網站有著非常明顯的個性，大部分都是通過版式來建立的。誠然，有時候他們并不是很完美（不幸的是，性能常常是個問題），但是他們通過字體來吸引用戶來產生興趣。好的網頁版式不僅僅只是一個美好的視覺處理，同時也要注意速度。很多設計師徹底忽視了性能。請注意：這些網站沒有在老的瀏覽器或者移動設備上做過測試。當然這不是這篇文章的主旨。相反的，我們將會近距離的觀察有趣的版式處理以及字體的創新使用。
精致的字體使用實例
Enso
大字號，加粗，全大寫的無襯線體映入眼簾，就好像它在吶喊一樣。然而，Enso也使用柔和的色調來調和這種大膽的版式——盡管黃色有一點難以閱讀。這種布局很新穎很有趣；設計師想讓你注意到這種頁面從上到下的版式，同時向下滾動看到全部的信息。這是一個很聰明的做法，因為導航是散落在頁面各處的亮粉色文字。Logo在頁面頂部作為首頁按鈕，當鼠標滑過時推出整個單詞。
Crafting Type
該網站就是關于樣式設計的，所以它的排版就是在推銷自己。在Logo上，纖細的大寫“Crafting”和厚重的小寫“type”之間的對比創造了一種視覺的平衡。正文采用大字號保證可讀性。襯線字體和簡潔大方的布局也有助于可讀性。
Nautilus
這個漂亮的網站整齊，干凈，且易于瀏覽。排版起了很大的作用，而且所用的三種字體來自于同一系列。這是一種區分樣式的很好的方法，可以保持一致性而且不干擾美感。不幸的是，這種網頁排版也有其代價：12.6MB大小和73次HTTP請求，還有兩張超大圖片，分別是3.5MB和2.4MB。
Kick My Habits
到這個頁面你第一眼看到的就是這個厚厚的粗體“Kick My Habits”。瘦瘦的字體（叫做KG How Many Times）以其迷人的手寫風格，與其他粗體形成對比。這個設計漂亮圖文并茂的網站是用一種輕松、非正式的方式來測試你在壞習慣上浪費了多少錢，而且這個網站也不會占用很多網絡帶寬。包括所有頁面上的圖片在內，它只有1.2MB，盡管初次加載時會有161次HTTP請求，更多的內容只有在需要時才會加載。
Monocle
Monocle是一個有著經典品質的漂亮的網站。它使用了不同磅數的襯線體和非襯線體，看上去簡單大方。Monocle是一個全球性新聞網站，主要聚焦在國際事務，商業，文化以及設計。布局很創新，同時也提供了所有用戶需要的東西。類別用標簽來承載，用子類別來削減信息層級。
Rezo Zero
Julien Blanchet的自定義字體獨特而又引人注目。它建立了品牌身份，在單色網站背景上使用薄荷綠。這種字體既沒有過度使用也沒有充分利用，而是以logo美麗的詮釋了它。
More Sleep
簡潔，但友好且誘人！這就是我第一次訪問該網站的感覺。大字號以及略顯圓潤的邊角就有一種友好的感覺。打字機風格的字體用于描述和解釋，有著一種圓潤，柔軟，溫馨的情調。
Lenta
Lenta是一個俄國新聞網站。神奇的是，該類型的圖片質量是怎樣引導你，并影響你對于網站及其內容的看法。任何新聞網站的身份都是由其銘牌建立的。這里使用的是一個干凈的無襯線字體，用粗體來傳達新聞來源的權威性。當文字被翻譯成其他語言時，這個字體仍然有效。保持著傳統新聞的布局的情況下，整個網站的文章和廣告牌都使用了襯線字體。
Pixel Recess
Pixel Recess使用的是無襯線字體Adelle Sans，這種字體整齊清晰，并且在屏幕上顯示效果很棒。然而更耐人尋味的是標題字體，Zeitgeist，它有點扭曲，像素化，甚至是有點模糊的外觀，在左上角的操場那一側也是同樣的'感覺。像素化在傳統上會被認定為是一個錯誤的用法，但由于網站上其他地方是尖銳的，這里會格外吸引注意力——確實是一個聰明的做法。
結論
這不僅僅關乎你說什么，而是你怎么說，是吧？根據你的目的，我們可以嘗試更多，在排版上也更有創意。我們可以大膽的使用大字號，粗體，或是新奇獨特的手寫體。我們應該始終記得字體要有可讀性，因為如果沒有人能閱讀的話，這樣的字體就沒什么可以炫耀的。如果設定了韻律和風格，字體可以做出如此多的設計。
漂亮的字體和大片區域的背景圖片很容易讓人分心。但我們也不能忽略性能。自定義的網頁字體會降低加載速度，所以讓我們找方法來解決這件事。
【網頁設計中怎樣選擇合適的字體】相關文章：
網頁設計中的字體設計07-26
網頁設計中字體規范06-07
網頁中字體排版設計方法07-12
網頁設計中字體和文字搭配的技巧10-01
網頁設計常用哪些字體08-05
網頁設計配色及字體規范06-09
怎樣保存Word中的字體09-25
網頁設計之字體設計規范06-20
自考新生報名怎樣選擇合適的專業06-25
網頁設計中最常用的字體有哪些07-07