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