雖然排版是網(wǎng)頁(yè)設(shè)計(jì)中極為重要的組成部分，但是絕大多數(shù)的網(wǎng)站并未在排版上做過(guò)專(zhuān)門(mén)的設(shè)計(jì)和調(diào)整。

事實(shí)上，在我看來(lái)我們?nèi)粘ＴL問(wèn)的許多網(wǎng)站在排版設(shè)計(jì)上并無(wú)亮點(diǎn)，這也是為什么，當(dāng)我們發(fā)現(xiàn)這些在排版設(shè)計(jì)上用心雕琢的網(wǎng)站的時(shí)候，會(huì)由衷地感受到喜悅和別樣的幸福感。

如果你厭倦了無(wú)處不在的宋體、雅黑、Arial和Helventica，那么你應(yīng)該會(huì)喜歡接下來(lái)的案例，這些巧用字體排版帥氣的優(yōu)秀網(wǎng)站會(huì)再次擴(kuò)充你的網(wǎng)頁(yè)收藏夾。

1. V02 Group

雅致的文字排版懸浮在半空中，和背景融為一體，這種設(shè)計(jì)除了眾所周知地提高逼格之外，能明顯地提升頁(yè)面的深度。強(qiáng)對(duì)比的色彩搭配也是設(shè)計(jì)師別具匠心的體現(xiàn)，我想你已經(jīng)發(fā)現(xiàn)了。

所用字體: Crimson Text, Futura

2. What is Your Future?

這個(gè)名為“What is your future”的網(wǎng)站同樣設(shè)計(jì)精美，排版也頗為嚴(yán)謹(jǐn)。設(shè)計(jì)師很明顯喜歡極簡(jiǎn)和扁平風(fēng)，所用的字體Baron Neue 又是極具表現(xiàn)力的樣式，在黑色的背景之下極為醒目，使得整個(gè)頁(yè)面都炫酷起來(lái)了。撇開(kāi)排版技巧不說(shuō)，這字體都值得來(lái)一發(fā)吧？

所用字體: Baron Neue, Georgia

3. Jacob Grubbe

復(fù)雜的網(wǎng)站都是一樣的復(fù)雜，而簡(jiǎn)潔的網(wǎng)站卻總能玩兒出不一樣的風(fēng)情。這個(gè)形同windows藍(lán)屏死機(jī)了一樣的背景之上，用不同色彩的單一字體來(lái)呈現(xiàn)內(nèi)容，而這個(gè)字體正是我們所熟知的“Android 的靈魂”——ROBOTO。極簡(jiǎn)風(fēng)，合理的選色，加上一個(gè)足夠現(xiàn)代的字體，就可以輸出一個(gè)有個(gè)性的頁(yè)面。

所用字體: Roboto

4. Secret Resolutions

當(dāng)今這個(gè)時(shí)代，個(gè)性即正義。這個(gè)網(wǎng)站的設(shè)計(jì)思路和上一個(gè)很接近，讓色彩發(fā)聲，用字體展現(xiàn)個(gè)性，這個(gè)網(wǎng)站用的字體名為Brandon Grotesque，雖然稍顯怪異，但是搭配其他的元素之后，就顯得極為獨(dú)特了。這就是冒險(xiǎn)的樂(lè)趣，改著改著，就成了一個(gè)獨(dú)一無(wú)二的網(wǎng)站了，你覺(jué)得呢？

所用字體: Brandon Grotesque

5. Basics09

正如同這個(gè)網(wǎng)站在標(biāo)題介紹上所說(shuō)，它旨在“提供用于基本的網(wǎng)站設(shè)計(jì)和印刷的字體（Benton Sans）”。坦率的講，Benton Sans 的確是一種非常樸素的非襯線體，稍微調(diào)整就能創(chuàng)造出層次感。網(wǎng)站和字體俱佳，挺不錯(cuò)的。

所用字體: Benton Sans

6. Degordian

Degordian 這個(gè)網(wǎng)站充分運(yùn)用了對(duì)比強(qiáng)烈的大背景和具有沖擊力字體（Futura）的組合（這也是目前網(wǎng)站設(shè)計(jì)的一個(gè)大趨勢(shì)），網(wǎng)站另一個(gè)值得稱贊的地方是它用的正文字體：Merriweather。

所用字體: Futura, Merriweather

7. Brancott Estate

設(shè)計(jì)師將網(wǎng)站的排版和配圖都做成黑板畫(huà)的效果，質(zhì)感非常不錯(cuò)。雖然無(wú)法確認(rèn)網(wǎng)站的主要字體，但是用來(lái)搭配的字體可以確認(rèn)是Georgia，兩者組合看起來(lái)非常舒服。

所用字體: 未知, Georgia

8. Miles Calder

這也是是一個(gè)極簡(jiǎn)風(fēng)的網(wǎng)站，整個(gè)網(wǎng)站使用了一個(gè)字體：Founders Grotesk。有意思的是，設(shè)計(jì)師用這一字體的不同的色彩、尺寸營(yíng)造出了層次感。

所用字體: Founders Grotesk

9. Run for AJD

這是一個(gè)法語(yǔ)網(wǎng)站，從字體樣式上來(lái)講可讀性確實(shí)很差，但是從風(fēng)格和個(gè)性上來(lái)說(shuō)，極為突出。

所用字體: Avenir Book

10. SendAMessage.to

只需幾個(gè)步驟，你就可以借助這個(gè)網(wǎng)站給朋友和親人發(fā)送個(gè)性化的信息。在網(wǎng)站設(shè)計(jì)上，設(shè)計(jì)師同樣使用了單一字體用作網(wǎng)站排版。Proxima Nova 字體的大尺寸看起來(lái)非常漂亮。

Fonts used: Proxima Nova

11. Amazee Labs

看起來(lái)Amazee Labs已經(jīng)為自己的網(wǎng)站設(shè)計(jì)了屬于自己的一套字體，這套自己的設(shè)計(jì)主要源自Source Sans Pro 和 Museo 。兩種字體協(xié)調(diào)地融為一體，和不同的色彩搭配排版也頗為漂亮。

Fonts used: Source Sans Pro, Museo

12. Oudolf

和之前的那個(gè)Jacob Grubbe的網(wǎng)站一樣，Oudolf這個(gè)網(wǎng)站里，排版設(shè)計(jì)幾乎是整個(gè)網(wǎng)站唯一的設(shè)計(jì)元素。在這里，排版設(shè)計(jì)和圖片巧妙的結(jié)合到了一起。

所用字體: Mason Neue Book, Univers Standard

13. I Am Baaz

這個(gè)網(wǎng)站主要運(yùn)用了兩種字體： Verlag Book 和 Acrom Extra Bold 。設(shè)計(jì)師采用了時(shí)下流行的視頻背景圖，視頻背景與前景漂亮的字體組合起來(lái)仿佛一個(gè)可交互的動(dòng)態(tài)海報(bào)，絕贊。

所用字體: Verlag Book, Acrom Extra Bold

14. FS Millbank

作為一個(gè)字體的宣傳網(wǎng)站，悶騷的排版設(shè)計(jì)幾乎是一定會(huì)出現(xiàn)的。和許多優(yōu)秀的前輩一樣，它旨在潤(rùn)物細(xì)無(wú)聲地存在，成為一個(gè)“路人”一樣的字體——漂亮，現(xiàn)代，可靠，耐看。

所用字體: FS Millbank

15. Studio Lovelock

過(guò)去的一年里，Futura PT似乎成為了用戶增長(zhǎng)最大的字體，這個(gè)Studio Lovelock 網(wǎng)站干脆全站都用的這個(gè)。盡管如此，設(shè)計(jì)師別處心裁的將不同字重不同尺寸的Futrua PT 用在網(wǎng)站不同的地方，一樣百變，一樣好使。

所用: Futura PT

16. Adoratorio

玩弄色彩還是挺容易玩出花樣的，雖然有時(shí)候看起來(lái)略顯奇怪，但是配合上富有表現(xiàn)力的字體，反而會(huì)成為網(wǎng)站的亮點(diǎn)。Montserrat 和 Courier New 都不是以有趣好玩為賣(mài)點(diǎn)的字體，但是在這個(gè)網(wǎng)站就顯得特別突出。

所用字體: Montserrat, Courier New

17. The Pattern Library

說(shuō)起來(lái)這個(gè)網(wǎng)站幾乎沒(méi)怎么用到排版設(shè)計(jì)，但是它的“Download Now”按鈕之處巧妙地使用了MostraNuova字體，在這個(gè)地方幾乎是絕配。好字體有時(shí)候確實(shí)能成就一個(gè)好設(shè)計(jì)。再次不得不推薦一下國(guó)產(chǎn)iOS記事應(yīng)用“小記”，真心是字體選的好，逼格就爆表啊。

所用字體: MostraNuova

18. Spotify. Sweet Spot

作為一個(gè)知名音樂(lè)類(lèi)服務(wù)，Spotify在用字體上還是頗有一套的。Spotify的設(shè)計(jì)師在他們的情人節(jié)活動(dòng)“Sweet Spot”上選用了Circular TT 字體，這套完備的字體應(yīng)對(duì)了不同位置對(duì)排版的要求，簡(jiǎn)約現(xiàn)代，又變化多端。

所用字體: Circular TT

19. 51 North

51 North是一家位于荷蘭的設(shè)計(jì)機(jī)構(gòu)，網(wǎng)站設(shè)計(jì)采用了Minion W01和 Tw Cen W01兩套字體，謹(jǐn)慎，但是對(duì)比明顯，非常漂亮。

所用字體: Minion W01, Tw Cen W01

20. RelaisBlu

RelaisBlu 是一家地處意大利的高端酒店，他們的這個(gè)網(wǎng)站使用了三種不同的字體來(lái)進(jìn)行排版設(shè)計(jì)。通常超過(guò)2種不同的字體用于一個(gè)頁(yè)面會(huì)讓人覺(jué)得混亂，這個(gè)這個(gè)網(wǎng)站不會(huì)，反而看起來(lái)頗為具有沖擊力。

所用字體: Geosans, Fanwood, Theano

21. April Studio

這個(gè)網(wǎng)站所用的字體你們肯定熟悉，這就是iOS7之后的標(biāo)配字體：Helvetica Neue。在國(guó)外它已經(jīng)有點(diǎn)被濫用的趨勢(shì)了，但是這也正好反映了這一字體的強(qiáng)大兼容性和不俗的表現(xiàn)力。

所用字體: Helvetica Neue

22. EMyth

EMyth 是一個(gè)簡(jiǎn)單但是接地氣的網(wǎng)站，這主要還是得益于排版設(shè)計(jì)所用的兩大字體：Museo Slab 和 Proxima Nova 。

所用字體: Museo Slab, Proxima Nova

23. Melanie DaVeid

左右對(duì)稱的網(wǎng)站越來(lái)越多，這個(gè)網(wǎng)站除了左側(cè)的標(biāo)題之外，正文部分僅用了一種字體：Proxima Nova。正文部分，設(shè)計(jì)師通過(guò)不同字重的對(duì)比而呈現(xiàn)出網(wǎng)站的層次（實(shí)際上我們也經(jīng)常這樣做），少許自定義的字體則賦予了網(wǎng)站以個(gè)性。

所用字體: Proxima Nova, 自定義字體

24. Formlets

雖然Formlets家的產(chǎn)品遲遲沒(méi)有突出，但是他們的網(wǎng)站還是非常亮眼的。個(gè)性化的臉譜插畫(huà)和現(xiàn)代感十足的字體搭配在一起，呈現(xiàn)出同類(lèi)企業(yè)所不具備的個(gè)性和氣質(zhì)。DIN和Roboto誰(shuí)不知道呢？但是要作出這樣的網(wǎng)站，只能說(shuō)功夫在詩(shī)外了。

所用字體: DIN Rounded, Roboto

25. Nicholas Bussiere

一個(gè)字體打天下，好象這真是許多歐美設(shè)計(jì)師的選擇啊。設(shè)計(jì)師在整個(gè)網(wǎng)站只使用了Apercu 字體，為了整站清爽的氣質(zhì)，也僅僅使用了Light和regular 兩種粗細(xì)，層次分明而清晰，有對(duì)比但是不強(qiáng)烈。