(Shavaughn Haack著 Timmliu & Charrywang譯 Sevenshao校正 查看原文 轉(zhuǎn)載請注明出處)
第一印象通常就是一種持續(xù)印象。不管你是否意識到，你的版式能夠幫助用戶在他們甚至還沒有開始讀一個字或者點擊一個按鈕之前建立一個體驗。版式不僅僅是講述一個故事，它告訴用戶是這個網(wǎng)站的幕后以及這個背后的人是做什么的。對于字體的處理創(chuàng)造了一種氛圍，同時也會像聲音的音調(diào)一樣引起回想。
你需要問一問你自己，你想要表達(dá)什么以及你想要怎么去表達(dá)它?想一想用戶：當(dāng)頁面加載的時候你想讓他們有什么樣的感受和體驗?版式建立一個交流的模式，同時，也表達(dá)了一個網(wǎng)站的個性。字體的選擇將會決定人們對你的網(wǎng)站的反饋。
以下的網(wǎng)站有著非常明顯的個性，大部分都是通過版式來建立的。誠然，有時候他們并不是很完美(不幸的是，性能常常是個問題)，但是他們通過字體來吸引用戶來產(chǎn)生興趣。好的網(wǎng)頁版式不僅僅只是一個美好的視覺處理，同時也要注意速度。很多設(shè)計師徹底忽視了性能。請注意：這些網(wǎng)站沒有在老的瀏覽器或者移動設(shè)備上做過測試。當(dāng)然這不是這篇文章的主旨。相反的，我們將會近距離的觀察有趣的版式處理以及字體的創(chuàng)新使用。
精致的字體使用實例
Matt Luckhurst
這個網(wǎng)頁色彩斑斕也很有趣。首先映入眼簾的是活潑的襯線字母，接下來，看起來很隨意分散的字母拼寫出Matt的名字。懸停效果顯示每個項目的示例圖片，這種做法非常有效，幾乎是跳出字母的限制。這個網(wǎng)站顯示了字體可以作為平面元素合并在設(shè)計中。混合在一起的五彩有襯線字母打破了經(jīng)典，可能我們能夠從襯線字體中更清醒的找到創(chuàng)意。
Playful
Wow,這個網(wǎng)站確實很幽默!這個網(wǎng)站的調(diào)調(diào)不是僅僅根據(jù)字體的特征而設(shè)計的，而是通過它們的排版方式。它打破了我們的常規(guī)交流的順序。通常你會在印刷海報中看到軸對稱的排版，那通常給人印象深刻。在這個網(wǎng)站上，字體的選擇并不是非常的有個性的裝飾性或者是很好玩的裝飾性字體，它就是用的非常簡單的無襯線字體。非常棒的背景圖案觸覺體驗，它引導(dǎo)閱讀的方向，以及用戶閱讀網(wǎng)站的文字時頭部從一邊到另一邊的運動。
Atelier
這個網(wǎng)站的所有地方都值得關(guān)注。整個頁面由不同的元素組合在一起有一種動感。網(wǎng)站的logo是用的一種寬的但是很優(yōu)雅的字體，建立了一種設(shè)計基調(diào)。運動的感覺是由一條傾斜的線來建立的，這根傾斜的直線跟logo中的首字母“A”的傾斜保持一致，創(chuàng)建了這個網(wǎng)站的節(jié)奏?；瑒拥念A(yù)覽圖深深的抓住你的眼球，圖片很大讓你感覺到無拘無束。然而，這個網(wǎng)站的背景圖片居然有：2560*5350像素，2.4MB，哎喲!
Cirp
這個為葡萄園設(shè)計的網(wǎng)站非常的獨特和創(chuàng)新，設(shè)計的就像一個老式的海報。這個美麗的網(wǎng)站設(shè)計成功的找到了一種葡萄酒的感覺。我喜歡”Russian River”后面的陰影會跟隨著你的鼠標(biāo)的移動而運動從而在一個另外的靜態(tài)頁面創(chuàng)造出動感。這個地方最主要的缺點就是，從某中意義上說，文字是作為圖像而嵌入到網(wǎng)站上的，可能會讓文字無法復(fù)制和粘貼。還有，當(dāng)然類似的設(shè)計被創(chuàng)造出來需要不少于3.4 MB和43次HTTP請求。
max Di Capua
這里的布局和排版混合在一起是通過一套模板的系統(tǒng)建立的，通常是幾個部分重疊在一起。這種布局的方法很清新因為它不死板，并且非常容易改變。排版也是同樣的感覺，因為他們都有很大的間距，不管是大量的文字還是稠密的文字。標(biāo)題和說明性文字，以一種很容易閱讀的無襯線字體出現(xiàn)在作品的旁邊。
Rijksmuseum
一種很常見的字體的巨大的字母在整個屏幕范圍之內(nèi)，還延伸到整個頁面。使得“Rijksmuseum”看起來比現(xiàn)實中的大很多。主頁就通過循環(huán)漂亮的圖片來展示博物館的內(nèi)容。主導(dǎo)航也很有意思：當(dāng)你點擊的時候，它會下滑然后讓你選擇子目錄。整個網(wǎng)站的體積只有955KB以及31次HTTP請求——優(yōu)化做的很棒。
I shot Him
這個設(shè)計工作室的網(wǎng)站以一張寫著歡迎你的照片來向你問候，這很新鮮。用戶馬上就有了一種置身于這些設(shè)計師工作室的感覺。有一種陌生感，但是同時也感受到很真實可靠。字體是焦點，但是不至于太吵或者太壓抑。我非常喜歡他們這種從完美的電腦中走出來展示他們自己獨特的一面的方式。盡管這個網(wǎng)頁沒有你期待的交互那么好，這個工作室的個性就在這張照片上完美的顯示出來了，那就是有深度，有實質(zhì)。手寫的字體讓這個網(wǎng)站看起來很有個性，也讓用戶為這個工作室的設(shè)計產(chǎn)生了一個心理預(yù)期。這個網(wǎng)站除了歡迎語之外的所有字體處理方式都強化了輕松但有創(chuàng)造力，文字簡短但是直達(dá)目的。另外一個很有趣的地方就是導(dǎo)航：它藏在登陸頁面，但是鼠標(biāo)懸停在一個圖標(biāo)上的時候可以看到它們。當(dāng)你滑到底端，導(dǎo)航仍然固定顯示在頂部。
Banger’s
這個網(wǎng)站有很多的字符。Banger’s是一個腳踏實地的專注于啤酒和香腸的小飯館。它的故事看起來就像是畫在一個灰色的卡片箱子上，他們的食物就是通過這個箱子來盛裝運輸?shù)?。它的?biāo)志看起來就像是手繪的標(biāo)記，很獨特，似乎不很完美，但是其他的一切都看起來跟它搭配在一起很協(xié)調(diào)。固定的導(dǎo)航欄在你上下滑動的時候使用起來很不錯，懸停的效果(標(biāo)題變成紅色)非常的簡單有效。字體對整個視覺識別起到了很大的貢獻(xiàn)，同時圖形也很棒，但是性能不是特別好。最大的缺點是主頁就有7.2MB，254次HTTP請求。老實說，真有點不能接受。
Caava Design
Caava Design使用無襯線字體使這個網(wǎng)站有著整潔干凈的美感。“Good design is Good business(好的設(shè)計帶來好的商業(yè)價值)”使用很大的字號，非常明顯和容易閱讀，下面是斜體的介紹。整個網(wǎng)站的字體都是有目的的使用，而且不需要很吵鬧，同時網(wǎng)站的內(nèi)容又不至于比整個的文件遜色。然而，那些很小的文字可能太小而不太適合閱讀。而且排版的網(wǎng)格間距是很凌亂的。字號的強烈對比同時也會讓用戶在閱讀整個網(wǎng)站的時候失去信心。再次，整個視覺與5.7MB,90次HTTP的請求不太相符。
The Black Sparrow
這個網(wǎng)站看起來顯得有點復(fù)古，大量的字體都使這個網(wǎng)站顯得折中主義，有一種很淳樸的感覺。這個小酒吧休閑室的主題是基于Chaeles Bukowski的小說，結(jié)合一些文學(xué)的元素和古老的打字機(jī)字體的標(biāo)志。我喜歡它的導(dǎo)航條，當(dāng)你的鼠標(biāo)懸停在上面的時候，那些小圖標(biāo)轉(zhuǎn)動的方式。這個網(wǎng)站真有一種20世紀(jì)三十年代的感覺，那些麻雀的插圖讓這種感覺更加強烈。然而，在空間允許的情況下，字號有一點偏小而不太容易閱讀。
Nocturnal
漂亮而且厚重的襯線字體在這里看起來簡潔，干凈，比較大而且容易閱讀。網(wǎng)站的設(shè)置非常的寬敞，使得整個網(wǎng)站有很大的呼吸空間。簡單，整齊的布局以及對于字體的處理讓用戶能夠很快對這個設(shè)計師的作品有一個全面的簡單印象。這個網(wǎng)站作為一個設(shè)計作品集的展示非常有效率。它沒有做什么特殊的事情，僅僅是專注于藝術(shù)家的作品。有時候，這些其實就是最需要展示的。
Marie Guillaumet
手寫的字體讓這個個人網(wǎng)站看起來非常的漂亮和有個性。同時也給人一種設(shè)計師的整個身體都投入在這個作品的過程中。一種強烈的個性化和獨特性的感覺伴隨著設(shè)計師，轉(zhuǎn)過來就是她的作品。手寫的字體同時也跟手繪的圖標(biāo)，增加的字母很搭，幾乎就感覺是我們在盯著她的視覺日記，了解設(shè)計師個人的一部分，這些就會慢慢地帶來潛在的客戶。
Vintage Hope
這個網(wǎng)站的標(biāo)題看起來就像是用一只很粗的畫筆畫的很粗的痕跡。字體驚人的粗同時很具有表現(xiàn)力。背景是一種很漂亮的照片。它給用戶一種非常開放和自由的感覺，同時描繪出了這個組織的特征。Vintage Hope 通過外借古老的瓷器為馬拉維的不幸的人們籌款，整個視覺看起來是激動的，高興的和積極的。同時網(wǎng)站只有1MB和40次HTTP請求，這是令人傾佩的。
Browser Awareness Day
這個網(wǎng)站加載下來，用戶能夠被指引使用，使得網(wǎng)站有趣，快，安全。在每一邊每一個關(guān)鍵字都使用裝飾性的字體。每一個字母很明顯的創(chuàng)意，這就抓住了用戶的注意力，引誘用戶往下滑動看到更多內(nèi)容。右邊的小標(biāo)簽使用了一種很有喜劇色彩的書寫字體，添加在這個很滑稽的網(wǎng)站上。讓你滑到底端的時候，同樣的具有喜劇色彩的書寫字體也伴隨著另一種很有趣的字體被用在網(wǎng)站上。
Rob Edwards
這個網(wǎng)站的字體很漂亮。這也是設(shè)計的一部分，同時也給訪問者建立了一個對這個設(shè)計師的作品的心理預(yù)期。“Hi there”非常的巨大，抓住了用戶的注意力。其他的裝飾性的馬戲團(tuán)式字體非常吸引人眼球也很有趣。你不會每天看到這些，它作為一種介紹是非常的有效。剩下的整個網(wǎng)站的感覺有一點點位置不合適，尤其是在空間和對比度上。
82nd&Fifth
這個網(wǎng)站全部是關(guān)于視覺的，它的排版也證明了這一點。使用的無襯線字體非常的美觀簡潔和輕量，為標(biāo)題設(shè)置的背景的顏色塊顯得非常的精致。對于這個網(wǎng)站來說，字體不是關(guān)注的焦點，而是強大的照片支持。整個網(wǎng)站顯得非常的有活力，當(dāng)你往下滑動的時候，一些小的塊塊會加載下來。這個網(wǎng)站也有一個明顯可看見的導(dǎo)航欄，當(dāng)鼠標(biāo)懸停在上面的時候，一個黑色的導(dǎo)航條就先露出來整個菜單。整個網(wǎng)站跟它展示的藝術(shù)作品的每一部分都很貼切。缺點是有6.4MB和120次HTTP請求。
ECC Lighting&Furniture
不論你是否喜歡，Helvetica都占據(jù)了這個網(wǎng)站的主要舞臺。網(wǎng)站的分類按鈕非常寬大，牢牢的抓住了用戶的注意力。這個網(wǎng)站的平面設(shè)計非常的經(jīng)典，干凈，極簡主義。網(wǎng)站右上方豎直的導(dǎo)航條的文字創(chuàng)造了一種很強的趣味效果，但是仍然能夠讓用戶將注意力放在主要分類導(dǎo)航上。只有當(dāng)鼠標(biāo)懸停在圖片區(qū)域的時候才顯示這一點做得非常有趣。
Marianne Brandt
當(dāng)你聽到這個名字“Marianne brandt”的時候你期待什么?你怎樣將它轉(zhuǎn)換為一個網(wǎng)站?通常情況下，一種包豪斯的水準(zhǔn)專注于功能就是關(guān)鍵。這個網(wǎng)站真的很有包豪斯的風(fēng)味，扁平的色彩以及Futura字體。整個的審美就是極簡主義，干凈但是絕對不呆板。
捕獲我的注意力的是“thanks/Danke(謝謝的英文和德文)”這塊。你設(shè)定了哪種語言決定了哪種“感謝”顯示為紅色。這是一個很棒的創(chuàng)意對于那些支持多種語言的網(wǎng)站。不同的選擇提醒我不同區(qū)域的不同色塊，這是以一種很好的方式去將網(wǎng)站的信息進(jìn)行分類。顏色，幾何造型，以及整個字體都全部是包豪斯主義。
Nate Navasca
這個網(wǎng)站對于字體和樣式的選擇上顯得有點傳統(tǒng)。用一個粗的無襯線體作為標(biāo)題，一種襯線字體作為內(nèi)容文字。如果它沒有壞，為啥要修呢，你說對吧? 設(shè)計師專注于網(wǎng)站的功能和簡單，而且它的確非常的好用。
Ewket
這是個簡單的扁平化設(shè)計的網(wǎng)站。用最基本的造型設(shè)計，就像油畫的第一層。Ewket在埃塞俄比亞致力于基礎(chǔ)教育事業(yè)。網(wǎng)站內(nèi)容所使用的字體Andale Mono并不是你所期待的那樣，但是它能夠讀懂。這個字體是一種鋒利的無襯線字體，有一種空蕩蕩的感覺。Ewket是一個基層項目，所以它的整個設(shè)計看起來非常的基本和簡單，也映照了它的功能。然而，它并沒有很好的對應(yīng)它的性能，4.6MB和58次HTTP請求顯得有點沒必要的多余。
The Dissolve
我喜歡它的銘牌，它營造了一種老式的電影院的感覺。對比起文章的襯線字體來講，這種字體有一種古老的感覺。這個網(wǎng)站有一種簡單，干凈和非常復(fù)雜的老電影的體驗。導(dǎo)航條的設(shè)計讓頂部的空間得到的了很好的應(yīng)用。一旦這個網(wǎng)站的視覺識別跟它的銘牌一起建立起來，當(dāng)你把鼠標(biāo)懸停在上面的時候，不同的分類廣告就會出現(xiàn)在銘牌的位置。
The whig
這個餐廳是一個可以坐下來，放松，和你的小伙伴們喝一杯的地方。Medula One字體被用來詮釋這樣一種感覺。這種無襯線字體非但不會顯得過分裝飾而且它的筆刷線條有一種中世紀(jì)的感覺 。它非常的友好而不做作，很好的映襯了這個小bar的氛圍。
Find&Form
干凈，單色的審美特征，這個網(wǎng)站讓內(nèi)容文字減少到最少。網(wǎng)站的排版很簡潔和低調(diào)，讓圖片本身來說話。單色的字體在這里看起來有一點特別，但是，它傳達(dá)了這個團(tuán)隊的口號那就是“數(shù)碼世界渴望古老的校園工藝”。這種審美是跟我們同一時代的。另外非常有趣的就是當(dāng)你向下滑動到網(wǎng)站的底部的時候，導(dǎo)航條會水平移動到右邊，這樣可以給整個網(wǎng)站其他的內(nèi)容留下一些空間。
Carrera
Carrera網(wǎng)站的設(shè)計有一種永恒的魅力，正如它的產(chǎn)品真實且永恒。網(wǎng)站的設(shè)計應(yīng)該要符合產(chǎn)品設(shè)計的氣質(zhì)。這個眼鏡公司則援引其目標(biāo)之一“在傳統(tǒng)與時尚之間達(dá)成完美平衡”。簡單，粗體的大寫字體實現(xiàn)了這一點，既有傳統(tǒng)的感覺又不會落伍或過時。盡管字體上與logo風(fēng)格有很大的不同，但很大膽和醒目。同時值得一提的是，有趣的鼠標(biāo)懸停效果也是整個網(wǎng)站與眾不同的部分。
Myfelt
該網(wǎng)站所用的字體樣式非常友好溫暖，文案插圖與產(chǎn)品氣質(zhì)也是一致的。所有這些元素加在一起都傳達(dá)著同樣的訊息。這個網(wǎng)站讓我很感興趣的一點是，地毯上的點融入了logo和銘牌。
Vogue
設(shè)計師Claus Eggers Sørensen設(shè)計的Playfair Display字體，帶來一種大膽而不張揚的格調(diào)。優(yōu)雅的襯線體與Vogue的品牌相得益彰。對于設(shè)計師而言，將字體放到更大字號時看上去更佳。
All Saints Estate
用字體來達(dá)到傳統(tǒng)又優(yōu)雅的風(fēng)格有很多種方法，該網(wǎng)站則恰到好處的混合了襯線體和少量無襯線體。Garamond Premier Pro Display字體看上去既現(xiàn)代又精致，與正文文本匹配的精致完美，而且與葡萄園和葡萄酒也很合適。
Evening Edition
銘牌的黑體字的字體與傳統(tǒng)的印刷報紙是一致的。它會給人權(quán)威莊嚴(yán)感，新聞來源與小報以示區(qū)分。
Served MCR
這個有趣的涂鴉風(fēng)格的網(wǎng)站是為了一個乒乓球比賽。排版看上去很原始的手繪風(fēng)格。在一些區(qū)域，會有一些元素是動畫或是動畫的背景。在網(wǎng)頁設(shè)計中動畫并不常用，但在這它很好的吸引了用戶的注意力。注冊的條目就是這樣一個例子，文字清晰并且突出。由于文字并不是很多，這種排版是合適的，依然可以保持網(wǎng)站的易用性。然而，頁面的性能卻很糟糕，頁面大小有7.5MB，175次HTTP請求。不論是在電腦還是在移動端，主要背景圖片有2032*4761像素，2.2MB大小。
Enso
大字號，加粗，全大寫的無襯線體映入眼簾，就好像它在吶喊一樣。然而，Enso也使用柔和的色調(diào)來調(diào)和這種大膽的版式——盡管黃色有一點難以閱讀。這種布局很新穎很有趣;設(shè)計師想讓你注意到這種頁面從上到下的版式，同時向下滾動看到全部的信息。這是一個很聰明的做法，因為導(dǎo)航是散落在頁面各處的亮粉色文字。Logo在頁面頂部作為首頁按鈕，當(dāng)鼠標(biāo)滑過時推出整個單詞。
Crafting Type
該網(wǎng)站就是關(guān)于樣式設(shè)計的，所以它的排版就是在推銷自己。在Logo上，纖細(xì)的大寫“Crafting”和厚重的小寫“type”之間的對比創(chuàng)造了一種視覺的平衡。正文采用大字號保證可讀性。襯線字體和簡潔大方的布局也有助于可讀性。
Nautilus
這個漂亮的網(wǎng)站整齊，干凈，且易于瀏覽。排版起了很大的作用，而且所用的三種字體來自于同一系列。這是一種區(qū)分樣式的很好的方法，可以保持一致性而且不干擾美感。不幸的是，這種網(wǎng)頁排版也有其代價：12.6MB大小和73次HTTP請求，還有兩張超大圖片，分別是3.5MB和2.4MB。
Kick My Habits
到這個頁面你第一眼看到的就是這個厚厚的粗體“Kick My Habits”。瘦瘦的字體(叫做KG How Many Times)以其迷人的手寫風(fēng)格，與其他粗體形成對比。這個設(shè)計漂亮圖文并茂的網(wǎng)站是用一種輕松、非正式的方式來測試你在壞習(xí)慣上浪費了多少錢，而且這個網(wǎng)站也不會占用很多網(wǎng)絡(luò)帶寬。包括所有頁面上的圖片在內(nèi)，它只有1.2MB，盡管初次加載時會有161次HTTP請求，更多的內(nèi)容只有在需要時才會加載。
Monocle
Monocle是一個有著經(jīng)典品質(zhì)的漂亮的網(wǎng)站。它使用了不同磅數(shù)的襯線體和非襯線體，看上去簡單大方。Monocle是一個全球性新聞網(wǎng)站，主要聚焦在國際事務(wù)，商業(yè)，文化以及設(shè)計。布局很創(chuàng)新，同時也提供了所有用戶需要的東西。類別用標(biāo)簽來承載，用子類別來削減信息層級。
Rezo Zero
Julien Blanchet的自定義字體獨特而又引人注目。它建立了品牌身份，在單色網(wǎng)站背景上使用薄荷綠。這種字體既沒有過度使用也沒有充分利用，而是以logo美麗的詮釋了它。
More Sleep
簡潔，但友好且誘人!這就是我第一次訪問該網(wǎng)站的感覺。大字號以及略顯圓潤的邊角就有一種友好的感覺。打字機(jī)風(fēng)格的字體用于描述和解釋，有著一種圓潤，柔軟，溫馨的情調(diào)。
Lenta
Lenta是一個俄國新聞網(wǎng)站。神奇的是，該類型的圖片質(zhì)量是怎樣引導(dǎo)你，并影響你對于網(wǎng)站及其內(nèi)容的看法。任何新聞網(wǎng)站的身份都是由其銘牌建立的。這里使用的是一個干凈的無襯線字體，用粗體來傳達(dá)新聞來源的權(quán)威性。當(dāng)文字被翻譯成其他語言時，這個字體仍然有效。保持著傳統(tǒng)新聞的布局的情況下，整個網(wǎng)站的文章和廣告牌都使用了襯線字體。
Pixel Recess
Pixel Recess使用的是無襯線字體Adelle Sans，這種字體整齊清晰，并且在屏幕上顯示效果很棒。然而更耐人尋味的是標(biāo)題字體，Zeitgeist，它有點扭曲，像素化，甚至是有點模糊的外觀，在左上角的操場那一側(cè)也是同樣的感覺。像素化在傳統(tǒng)上會被認(rèn)定為是一個錯誤的用法，但由于網(wǎng)站上其他地方是尖銳的，這里會格外吸引注意力——確實是一個聰明的做法。
結(jié)論
這不僅僅關(guān)乎你說什么，而是你怎么說，是吧?根據(jù)你的目的，我們可以嘗試更多，在排版上也更有創(chuàng)意。我們可以大膽的使用大字號，粗體，或是新奇獨特的手寫體。我們應(yīng)該始終記得字體要有可讀性，因為如果沒有人能閱讀的話，這樣的字體就沒什么可以炫耀的。如果設(shè)定了韻律和風(fēng)格，字體可以做出如此多的設(shè)計。
漂亮的字體和大片區(qū)域的背景圖片很容易讓人分心。但我們也不能忽略性能。自定義的網(wǎng)頁字體會降低加載速度，所以讓我們找方法來解決這件事。
最后，如果你探索到了更有趣的對字體極為講究的網(wǎng)站，一定要聯(lián)系Typewolf和Font in Use。
申請創(chuàng)業(yè)報道，分享創(chuàng)業(yè)好點子。點擊此處，共同探討創(chuàng)業(yè)新機(jī)遇！
