@Wenzel_Hu 在這篇文章中，我們精選了一些網站例子來帶你體驗一場引人深思的網頁設計之旅。當然了，這些網站都有些棒呆了的的交互性設計，然而，它們的字體選擇、排版風格和間隔的使用風格才是我們選它們作為本文中的例子的原因。在排版的過程中，考慮排字和網格結構也是很重要的。
為什么網格結構和排字對于排版至關重要
排字和網格結構是讀者和文字之間進行有效交互的關鍵性因素。在Thinking with Type(想想字體!)一文中，Ellen Lupton詳盡地解釋了用網格工作的益處，她特別強調了網格的便利性，網格在整合文字和圖片之中的作用，以及如何用網格組織一個復雜的層次結構。
字體、字號和一行文字的尺寸之間有著不可分割的聯系。當一個網站的外觀在不同的設備上看起來并不相同時，優秀的設計師們需要將閱覽者需要閱讀的量控制在吸引人和可消化的范圍內，小心翼翼地維持瀏覽者的興趣。然而，失去瀏覽者的興趣是隨時有可能發生的。 比如——出于不同的原因——一長串的細小字體可能就是閱讀的災難，同時，擠在一小行的大號字體同樣會帶來困擾。
在下面一個情形中，不停地換行可能會淹沒了標點符號，使得讀者不得不回過頭來再去看那行小字。在以上兩種情形下，超長或者超短的一串文字都有可能使得讀者對它們失去興趣。
這兩張圖片很好地解釋了將特別細小的字體運用于很長一串文字或極短一串文字的不妥之處——既不方便閱讀，也不吸引閱覽者。(Bright Pink設計)
重要程度不同的段落需要不同層次的強調來引導瀏覽者瀏覽網站，并在期間保持他們的注意力。在相對同樣重要的段落之間使用同樣的板式就是種很賞心悅目的引導方式，不連續是會帶來困擾的。
當同樣重要的段落文字分成多縱列時，突然毫無理由地改變段落的橫向寬度就會帶來混淆。(Bright Pink設計)
網格結構
在這個部分，我們挑選的網站將向你展示網格是如何有效地進行排版、吸引訪問者、使內容可讀及構造和支持網頁的層次結構的。
SILKTRICKY
Silktricky的網格結構由六個縱向的方格組成，將信息拆成有吸引力的幾個部分。標題所采用的排版方式一致：Bookman Light Italic字體較輕的色調與Futura Condensed Bold的厚重的視覺沖擊形成了鮮明對比。
這些字體很好地互為補充，創造了在大小，字形，紋理，厚重上的強烈變化。這種對比促使著你想要看更多信息，將你的注意力吸引到方格中的描述性的無襯線文本上。
當你點擊按鈕時，文本會擴展成數個段落并延伸兩列，剛剛好使得你目光停留在文本上的同時也不會超出網格的范圍。這個拓展出的段落文字創造了另一種排版方式和色調，有效的與標題做對比，展現了一種視覺效果的可喜變化。
PERCUSSION LAB
Percussion Lab(打擊樂實驗室?)同樣有效地利用了網格。靈活地使用了四個方格來展示四位投稿藝術家的詳細資料，并且都包含了有關日期、藝術家、類型的細節信息，很好地融入了層級結構中。標題部分延伸到兩個方格的寬度并展示了音軌列表和有用的細節信息。
靈活地使用了四個縱向方格得字體，襯線和無襯線的混合，厚重程度等特性的改變強調了層級結構。版式的細節和方格結構使得瀏覽者產生并保持興趣。
THE NEW ART GALLERY WALSALL
英國The New Art Gallery Walsall的網站使用了無襯線的字體使得網頁看起來整潔清楚，有吸引力，但是，字體大小的變化和網格恰如其分的運用使得這個網站使人印象深刻。文本主體內容在左邊豎排下來，而其他的元素，比如超鏈接，占據了右邊部分。
整潔的字體的使用和大膽的留白反映了這個美術館本身的構造，其內的收藏品和它本身的美感都使得藝術顯得那么的可近可親。
吸引用戶的字體
文字的實質是最重要的嗎?毫無疑問這是對的，特別是當語言振奮人心或者是強調作者意圖的時候。使我們快樂的文本，或是有爭議的文本本身就足夠吸引人了。
但是能使文本變得更富吸引力的工作還有很多：字體、紋理、風格、整個的外觀和文本布局都對吸引讀者的注意力起著很重要的作用。字體同樣可凸顯主題的重要、情緒的強度、頁面的美感或是作品的獨特性。
Crockett & Jones
Crockett & Jones的網站就是這樣的一個例子。這個英國公司從1876年以來一直手工制作精美的鞋子，而它的網站也毫無疑問地反映了它對形象和款型的傳承。品牌名在每個頁面上都有出現，并且每個字母都呼應著這種裝飾性的維多利亞時代的設計方式。而微軟雅黑則被用于正文文本來展現這種傳承、品質、風格和對細節的專注。
在撰寫這段文字的時候，我想到了Beatrice Warde那篇發表于1932年的著名的有關于打印和字體的論文“水晶酒杯”中說道：“印刷應是無形的。”她特別強調了字體——她使用了玻璃杯中的葡萄酒作為隱喻，說明打印出來的文字在任何情況下都不能喧賓奪主——不能掩蓋了文字的意義。Warde說，字體應當補充并加強文意的呈現，促進我們的理解和欣賞。
這和Marko Dugonjic在《為閱讀體驗而設計》一文中的觀點不謀而合，“只有當排版經過了深思熟慮時才能帶來完美的閱讀體驗和信息的有效傳達。”顯然，Warde的文章早于互聯網的出現很多年了，但是原則到今日也還是適用的。
字體的結合
選擇和結合字體來凸顯主題總是充滿挑戰的任務。它需要耐心來一次次嘗試可能的組合并以視覺感受來評判適合效果好壞。這個部分的網站混合了精挑細選、賞心悅目的字體來強調主題，吸引讀者并制造驚喜的感覺。
FOUR SEASONS
在Four Seasons的網站中，將不同的風格和厚度的Garamond Italic(加拉蒙斜體)和許多種類的Helvetica字體(著名的無襯線字體)結合起來，達到了紋理和色調的顯著對比。有著粗重豎直筆畫的Garamond字體和有著不同紋理的Helvetica字體相得益彰。
來這個網站體驗這種顯著對比在網站的層級結構上和在突出Four Seasons品牌的風格、品質和口碑等方面的應用。Garamond字體和Helvetica字體在磅數和風格上的變化，使得它們在組織網站的層級結構的過程中非常有效。
NOWNESS
在Nowness的標題上，CreateThe Group將大小寫的Garamond字體和大寫的P22 Underground Titling字體優雅地結合起來，這種結合流露出古典韻味。Garamond字體優雅的筆畫與P22復雜的字形有個討人喜歡的對比。
CreateThe Group對于字符間的空格和字體大小的變化十分注意，小心翼翼地控制著色調和層級結構并使標題有型。
BARCAMP OMAHA
由Grain和Mortar設計的Barcamp Omaha網站很好地描述了它所說的“非傳統會議”——一種非正式的聆聽他人和社交的場合。通過大量圖片的串聯，網站將三種精挑細選的、對比強烈的字體結合在一起，其中有兩種很明顯是他們選來用作標題的。
這兩種字體——一種粗的、稍濃縮的無襯線大寫字體和另一種全大寫的無襯線字體——有著微微復古之感，通常會令人將它聯系到美國大學的美學論(???)。文本被放置在數個小框框里，然而，字體的變化和厚度及顏色的改變突出了細節并加強了層級結構。
WARHOL INITIATIVE
由Toky設計的Warhol Initiative網站在排版十分大膽。壓縮過的標題文字可能會不利于閱讀，強勁的豎直筆畫結合著小型的字母可能——在某些場合下——會影響可讀性。這里，Toky將一種無襯線字體強烈的壓縮，和展現了他的卓越技術和勇氣。
字母之間的間距和恰當的字母大小使得閱讀變得容易。字體的紋理被這種壓縮的形式很好地加強了，使得讀者能夠快速閱覽標題并且將注意力放在后面的細節上。這種壓縮后的字體非常適合于加強Warhol的風格。
COMBADI
由Radial設計的Combadi網站可能在這部分的幾個網站中尤為醒目。它的網格結構由12豎格組成并且在不同的網頁中有不同的構造方式。然而，字體的結合才是這種設計的真正引人注目之處。Brandon Grotesque字體和Museo Slab字體很好地突出了層次結構。
Museo Slab字體被用于主體文本，橫向的寬度、短小的上升筆劃和下降筆畫還有字符間距都使得閱讀變得十分容易。作者同樣通過改變顏色來使得文字和品牌的顏色相呼應。Brandon Grotesque字體則與之相補，用于二級標題、導航等。
ARIA
由Un.titled設計的Aria的在線商店使用了優雅的襯線文字。意大利體的標題中的“v”和“w”這兩個字母尤其特別，象征Aria產品設計的獨特之處。文本文字有限的色調變化導致了獨特的排版風格。為了充分把握層次之間微妙的差異，網站采用了文字大小及斜體的變化。
間隙、行距和字符間間隙
為了使文本看起來有吸引力且清晰可讀，字間的間隙是非常重要的。即使你選到了理想的字體，也可能由于間隙的不恰當而使得整個設計功虧一簣。這個部分的網站將向你展示的是通過充分考量決定的間隙的使用，不僅可以使得設計更有吸引力，同樣也會使得讀者閱讀起來更加舒適。
STL DESIGNWEEK
STL DesignWeek的設計通常棱角分明而且采用不易察覺的細線和字母間隙來突出重點。這種無襯線字體被設計成擁有合適的大小，弧形的橫向筆畫和略寬的字符間距的樣子。行間距同樣很寬，加強了輕盈之感并且引導讀者一行行地閱讀下去，構成完美的閱讀體驗。
THE BEETLE
DDB Tribal設計了The Beetle的網站，這家網站專注于大眾甲殼蟲汽車的精神理念的傳承。甲殼蟲汽車的特性——可靠、有效被完美地由字體所呈現出來。從排版上來說，這個網站十分簡單：字體僅限于兩種不同磅數的Futura字體。
清晰簡練的字體十分凸顯，細致的字母和行間距仿佛訴說著甲殼蟲樸素的歷史。標題文字被賦予了額外的空間，似乎是要稍稍加強一下它與其它文本之間的色調差異，并強調品牌形象的獨特性質。總的來說，標題引導讀者們閱讀每一行文本，使得閱讀甲殼蟲的歷史成為一種享受。
I LOVE TYPOGRAPHY
如果你對I Love Typography(我愛排版)這個網站并不熟悉的話，真的需要好好地去看看，喜歡字體的人都會在這找到些有趣的東西。整個網站在不同的文章中換著花樣地使用字體，而且你會知道它們用了哪幾種字體，包括FF Basic Gothic Web Pro，Le Monde Journal STD還有Le Monde Sans STD神馬的。
排版十分地優雅，但是標題和字符間空隙也加強了精致和精煉的感覺。每一篇文章的標題都采用了一種磅數小的無襯線字體，同時字符間隙和單詞之間的間隙同樣有著完美的感覺。
I Love Typography采取了一種謹慎的方式展開文章內容。
字體大小的變化
字體大小的變化常常用于指明優先級和層級順序。最通用的方式之一就是將標題設置成大大的、粗粗的樣子而將主體(body)部分的字號設置得小一些、輕盈一些。然而以下的例子或許會使你耳目一新……
DESIGN WALLER GREEK: THE FINAL FOUR
字體大小的變化是創造結構和強調優先級的完美方法，而且也是在能選用的字體受限制時的一種解決方案。Design Waller Creek的“Final Four”部門的比賽頁就通過調整大小來強調層級結構。(請看正文部分)四行大一些的文字組成了一段陳述式的說明，后面跟著用著相同字體的、小一些的長串文字，之后的標題又回復了陳述說明文字的大小——可能顯得沒那么厚重，后面的又是字號變小了的一串要點(points)。
這里的色調同樣也是值得注意的。文章被主要設計成灰色，但是作為段落指示的使用Slab Serif字體的標題卻在色調上與正文部分相近。
CARAVUS
由Toky設計的Caravus網頁的排版有許多值得贊許的地方，但是這里字體大小的變化應該得到特別的注意。文本有著分明的結構層次，厚重感和大小的變化都被應用于明確的位置：大的、輕盈的、無襯線的字體被用于標題文字，同時，小得多的、也更加粗重的字體被用于正文文本。
這是在典型的結構層次之外的嘗試，通常我們都會將大而粗的字體用于標題而不是相反。通覽整個網站，引用、統計和其他重要信息都是通過使用文字大小的對比凸顯出來的，而通常我們都會采用使用亮色的方式來做。你可以稱之為這是“化字為圖”(原諒小編對type as image的無力吧!嗷嗷嗷!)，很好地抓住了注意力，同時也用一種新穎的方式加強了層級結構。
在大多數情形下，視覺效果是評判的第一標準，而在這里結構層次就很好地通過大小、顏色的變化將紋理及色調的對比凸顯出了。
結論
我們展示的所有網站的設計者們都小心地選擇和使用字體來凸顯它們想表達的信息或品牌價值。這些設計成就了網頁的層次結構和吸引力， 并且通過文字與圖像的結合，及顏色與排版的使用，更加使得這些網頁令人過目難忘。
我們一直專注于排版和組織網頁內容，我們希望這篇文章能拓寬你的視野，并且你的注意力轉移到有效排版的部分細節問題上去。或許這篇文章能促使你繼續你自己的設計探險之旅。從Beatrice Warden的時代至今，新的技術已經使得我們能夠更加便利地嘗試各種排版的可能方式，并且新的字體能夠使得我們在傳達信息的同時保持對讀者的吸引力。