選擇合適字型：Web排版實用指南

排版（Typography）^[1]是個巨大的領域。即使人們投入畢生精力致力於這種古老的工藝，卻總會有些新東西要學。本文中，我將重新審視一些當你為網站選擇字型時應考慮的要點。

---

實用排版（Practical Typography）

當你設計某個網站時，你必須接受內容會發生變化的事實。在一個龐大的網站上，花時間對每個標題中的字母間距進行調整簡直是不可能的。換言之，你須放棄某些控制。

我今天要關注的是實用排版（practical typography）。對我而言，這意味著，要接受對於網站的版式你將永遠無法擁有全部控制權。選擇字型、決定字號，這些是作為設計師的我們擁有發言權的所有事情。實用排版意味著學習如何調整你可以控制的事情，並且更重要的是為什麼要調整。

---

易讀性（Readability）

你設定版式是要做什麼？閱讀它！那麼，為什麼那麼多的網站要使得做到這一點如此TMD難？無論是很小的字號、擁擠的行高、或只是平淡無奇的醜陋字型，似乎很多網站都決心不讓你享受它們的內容！

只要你的版式更易讀，你便立刻超越了至少半數競爭者，那真幸運，千真萬確，因為這並不難！

字型（Typefaces）

當決定在你的網站上使用什麼字型時，請千萬牢記：別多想。我知道許多設計者討厭使用Helvetica字型，因為該字型已被極度濫用。我同意這一點，但是這句話漏掉了一個非常重要重要的資訊：為什麼。人們之所以濫用Helvetica字型，是因為它太TMD好了。它適合幾乎所有能想到的設計，在小字號和大字號下同樣效果良好。

儘管以這種濫用的字型來設定你的版式可能會違揹你的想法，但是如果可行的話，那麼就試試看吧。

正文被認為是需要最具可讀性的設計部分，所以一定要確保你選擇一種在小字號下效果良好的字型。此話怎講？如果你將你的正文字號設定為10px，而且你仍能辨認出其中內容，那麼這是個好跡象表明你已經選擇了一種易讀的字型。

以上介紹了正文，而對於標題怎麼辦？

對於大標題的易讀性要比正文更容易解決。如果你能夠立刻辨認出它所說的內容，那麼它的易讀性就足夠了。

關於什麼良好的字型是指，一旦你做過做夠多的專案以後，你將對什麼可用和什麼不可用擁有一個好主意。從那以後，你將更好地做出有關字型的關鍵選擇。

對於為你的網站選擇合適的字型而言沒有公式可循。通常，決定某個字型的最好辦法是儘可能嘗試每種你認為可用的字型，然後進行比較。選擇字型真的是靠直覺，但是請千萬牢記，在百分之九十的時間裡，使用者不會考慮所使用的字型，因此如果易讀，那麼通常就足夠了。

字型配對（Pairing）

（以前）很少有只有一種字型適於網站使用的情況。普通網站擁有大量文字。不可能一種字型對所有文字都有效！絕大多數設計完善的網站會使用兩種字型：一種用於正文，而另一種用於標題。

當選擇一對字型時，要考慮的最重要的事情是它們如何協同工作。“它們足夠相似麼？”“太相似了麼？”“沒有足夠差異麼？”這些都是你應該問自己的問題。我發現選擇一對可用字型的最好辦法是，只是把許多字型並排放在一起，進而決定最佳搭配。在你嘗試所有字型配對以前，你是沒有辦法知道最佳搭配的。

有時，最佳字型配對是雙sans-serif，而有時候，你希望對標題使用sans，而對正文使用serifs。它們是否外觀相似並不重要，重要的是它們是否行為相似。這取決於你的設計的其餘部分。無論你選擇哪種字型都必須強烈傳達你的資訊，這是否意味著擁有一些對比鮮明的字型，那麼就試試看吧。

Simon Collison在他的網站上非常好地使用了字型配對，選擇粗體sans-serif用於主標題，普通的Serif用於其他更小的標題、以及正文。這種夥伴關係熟練地顯示出網站力圖表達的訊息，而以每種單獨字型的方式是無法表達的。

字號（Size）

作為一般規則，設計師喜歡將正文字號設定為至少12px。然而，大多數人會選擇更大的尺寸，如14px，這使得易讀性更好。除去開始變得複雜的標題，正文字號真的很容易決定。

標題應該多大？這要視情況而定。根據我的觀察以及建立網站的經驗，我已經得出結論，標題只應有它必須的那麼大。這意味，你應該嘗試不同尺寸直到你發現某個字號剛好大到足以引起你需要注意，但又不過大，除非巨大的文字是你所追求的，在這種情況下，儘管去做好了。

層次結構（Hierarchy）

標題的本質是大。它是頁面上很重要的條目，那麼它自然應該更大，對不？對也不對。對，標題一般大於其他元素；又不對，因為大字號不是引起讀者關注它們的唯一方式。字型顏色、字型粗細、以及佈局對於為你的頁面建立明顯的視覺層次結構都是同樣重要的。

關於視覺層次結構要記住的重點是，它都是相對而言的。網站上的某些文字只須相對於網站上其他文字脫穎而出就行。以Wilson Miner的站點為例。他的標題很小是為表明它們是多麼的重要，而且字號出奇地接近。然而，他使用顏色區分最重要的標題，並賦予它們更多的含義。

使用版式對於建立視覺層次結構是非常重要的工具，可通過字號、字型顏色、字型粗細、甚至佈局來實現。

行距（Leading）

行距或文字行之間的距離，對於清晰、易讀的文字而言是一種寶貴的工具。糟糕的行距可以毀掉一篇在其他各方面很出色的文章，而合適的行距能讓即便最糟糕的版式也看起來很易讀。幸運地是，它實現起來並不複雜。

使用CSS的line-height屬性，你能輕鬆指定正文行距。一般來說，對於大段文字，1.5倍字號是個不錯的行距尺寸。較小的文字應具有更緊密的行距，而巨大的文字應具有很大的行距。這並不複雜，真的。

字距（Tracking）

字距是指文字中字元之間的距離。我承認，當談及“實用排版”時，這一點是有些灰色地帶的，因為在CSS中沒有給予我們對於字距的很大控制權。通常，你不必擔心小文字，只需關注那些已成為問題的標題。一般來說，在你的CSS中新增letter-spacing: 1px;或letter-spacing: 2px;就能獲得足夠的字元間距。

另一有益於增加字距的地方是小型大寫字母（small-caps）。這裡，在字元之間增加額外一個或兩個畫素被普遍認為是個優良實踐，因為它們很容易顯得更大。

字型顏色（Color）

儘管沒有嚴格地講排版，然而顏色對於每個網站的版式而言都是非常重要的部分。我不是在談論配色方案（color schemes），而是談論必要的對比度（the contrast）以確保你的站點易讀性。白底（或淺底）黑字被普遍認為是最易讀的文字顏色。

我並沒有說你應該去把所有的內容都設定為白底黑字，只是為了說明當你進行設計時，你應該意識到你的文字對比度。如果你不小心對待的話，它可能會回過頭來咬傷你。

柵格（The Grid）

依我看來，對於Web實用排版而言，使用柵格是最重要的思想。你能擁有極好的字型、間距、以及各種顏色，但是如果你沒有優秀的佈局，那麼你不如使用comic sans字型算了。

當你設計版式時使用柵格是為你的設計提供一種清晰平衡的幾何圖形結構。它不是修復糟糕設計的魔法，但是如果你從一開始就是使用柵格進行設計，那麼你可以確保至少你的佈局將是堅實的。

那麼對於排版而言必須對柵格做些什麼？簡而言之：一切。柵格體現了排版的所有基本理想。它是幾何圖形的、一致的、便於使用的，而且最重要的是：漂亮的。

使用柵格設定你的文字是一種建立視覺層次結構的重要途徑，而且它對於表明你的文字應該有多大（或多小）是一個很棒的標識。

---

脫穎而出（Standing Out）

如前所述，如果你的排版是易讀的，那麼你就已經超越了至少半數競爭者，那麼對於另一半又該做些什麼呢？如果你已做到了這一步的話，那麼讓我們一起離開清晰、一致的易讀性規則，然後進入無與倫比的陰暗神祕世界。

字型（Fonts）

你希望你的網站脫穎而出麼？步驟1：使用一些獨特的排版。想必你而言這意味著使用一些獨特的字型。但是是什麼造就了獨特的字型？對於我來說，它不是一種不常用的字型，而是一種有資訊或感覺表明未被其他網站使用的字型。

選擇一種獨特字型真的是憑感覺。是否感覺這種字型與眾不同？或者它只是外觀不同？當為任何專案選擇字型時，你應該總是考慮設計感覺。由於這完全是個人的意見，我無法幫你找到一種獨特的字型。我所能做的是展示一個獨特字型的例項。

The Design Cubicle有一個非常獨特的標識和設計。它的濃重而不失優雅，引人注目而不失微妙。當我看到它的設計時，優雅的感覺就從此網站散發出來。它說，“我知道我在做什麼。”

離經叛道（Be Unorthodox）

你知道有多少網站的標識與其內容的尺寸一樣大？使用一個極細的標題怎麼樣？不像我最後的觀點，離經叛道的人就是看見其他人在做什麼，然後反其道而行之。

那些在Savvy Belfast的傢伙就很聰明。他們注意到大多數網站侷促的樣子，並決定用一句話來替換所有無意義的正文。

即使你只是片刻訪問他們的網站，你也會不由自主地記住他們的名字。

與你的設計相匹配（Match Your Design）

排版不能自行其是。它是Web設計的一部分，就像任何其他部分一樣。版式固然重要，但是你不應該忘記它只是讓一個Web設計變得傑出的一部分。你應該用腦海裡的其他設計來設計你的版式。

如果你使用一種非常精緻的背景紋理，那麼為你的標題選用漂亮的serif字型也許不錯。

在這裡我的觀點很簡單：不要忘記上下文（context）。設計是一個巨大的領域，而今天我只談到了其中一部分。對於一個成功的網站設計而言，所有部件必須成功地齧合在一起。我們的目標是：為那些將會訪問你網站的人打造使用者體驗。你不能只處理版式，或者只處理配色，甚至只處理內容！

情感版式（Emotional Type）

很多體驗都是由你的感覺定義的：喜、怒、哀、樂等等。人類擁有廣泛的情感，而作為設計師，我們的職責就是用我們的設計喚起這些情感。

在我今天講的所有內容裡，這個主題是到目前為止最抽象的，並且解釋起來有點兒難。與其努力給你解釋，不如讓我為你展示。

當第一次訪問Solid Giant時，我笑了。當第二次見到它時我又笑了，即便是第二次。立刻，對於該設計我感覺一見如故。那個大大的、毛茸茸的字母“G”太可愛了以至於無法忘卻！

坦率地說，我認為真是天才。

情感設計（emotional design）是沒辦法教的，它是一些須要你親身感受的東西，然後在你自己的設計中去把玩。

---

實用排版（Practical Typography）

很好，你已達到本文的結尾。我希望，至少你已學到一些東西，但如果一無所獲，那也不要緊。如果有人認為在閱讀本文以後我想留給你一些思考的話，綜上所述：保持易讀性（be readable）。其他人將會紛紛效仿。

你認為Web排版中最重要的部分是什麼？請在評論中發表你的意見！

譯註

[1] 排版（Typography），指以各種字型、大小和樣式顯示文字。

檢視英文原文：Choosing the Right Font: A Practical Guide to Typography on the Web

---

版權資訊

《選擇合適字型：Web排版實用指南》由高翌翔創作，本作品採用知識共享署名-非商業性使用-相同方式共享 2.5 中國大陸許可協議進行許可。
基於webdesign.tutsplus.com上的作品創作。

iTran樂譯

去iTran樂譯參加活動，讀好文章！