漂亮的字體排版總能為網(wǎng)站設(shè)計加分不少。別具一格的設(shè)計雖然精彩，但是更多的時候，沿著前人探索出來的設(shè)計規(guī)則來設(shè)計，會更加得心應(yīng)手。

怎樣利用成熟的規(guī)則來創(chuàng)造令人驚艷的網(wǎng)頁呢？今天的文章就沿著這樣的思路來探索網(wǎng)頁設(shè)計的可能性。

尺寸和層次

大小尺寸可能是排版設(shè)計的時候，調(diào)整得最多的因素。大而不當(dāng)?shù)淖煮w設(shè)計不可取，小而難讀的尺寸同樣違反了可用性的基本需求。尺寸控制的終極目標(biāo)，大概是增一分過大，減一寸太小的境界吧？

而層次也是不可忽略的因素。高可讀性的排版通常是具備有層次感的，而正是層次感引導(dǎo)用戶，先看標(biāo)題，再看副標(biāo)題，之后看正文。當(dāng)你明白內(nèi)容的輕重緩急，字體和排版層次就自然而然的有了。

字間距和字偶距

在中文和英文排印當(dāng)中，字間距的概念比較簡單也容易理解，這是在一段或一句文字中，每個文字的固定間距，但是在英文字體排印當(dāng)中，還存在一個概念，就是字偶距（Kerning），這個概念在中文中幾乎用不到：字偶距值得是特定字母組合之間的距離，比如A和V這樣的字母在一起的時候，如果不調(diào)整兩者之間的字偶距，就會看起來隔得很遠，視覺上會讓人覺得不太正常。

控制整體文本的字間距，能夠讓內(nèi)容的可讀性、文本段落的松緊顯得更加合理。而字偶距在標(biāo)題、展示性字體設(shè)計當(dāng)中，起到關(guān)鍵的作用，甚至?xí)绊懻w的風(fēng)格。

控制字體數(shù)量

這絕對是老生常談。當(dāng)你的網(wǎng)頁中使用過多的字體的時候會成為視覺噪音。絕大多數(shù)的項目會將字體數(shù)量控制到2到3種。

字體選擇的關(guān)鍵在于挑選擁有可變風(fēng)格的字體族。絕大多數(shù)的字體都擁有多種不同的樣式，包括常規(guī)、粗體、斜體等。通過選擇有多種可變樣式的字體，讓你的設(shè)計項目確保多變的同時，還擁有內(nèi)核和精神上的一致性。如果你的需求比較多樣的話，甚至有些字體族中混合了襯線體和非襯線體，絕對夠你使用了。

不過，在中文字體的問題上，目前還沒有足夠優(yōu)秀的在線字體的解決方案，有也不夠成熟。不過你可以在英文字體的搭配上多花點心思。

樣式的混合與搭配

誠然，字體的選擇很棘手，甚至可能是整個設(shè)計方案中最令人頭大的部分，但是有時候，選擇風(fēng)格截然不同的兩種字體，也是一個不錯的答案。

進行不同樣式字體搭配的時候，關(guān)鍵技巧在于選擇x高度相同的字體（字體中x、o這些小寫字體的高度），同時還要注意o這樣的小寫字體的內(nèi)空大小要相近，這樣能保證字體的整體體驗是一致的。

這樣的細節(jié)確保了一件事情：即使兩種字體分別為襯線體和非襯線體，擁有足以匹配的視覺體驗，能夠混在一起閱讀。

如果你對于英文字體非常感興趣，不妨看看青椒姑娘的字體課：

1. 《青椒姑娘的設(shè)計課！從零開始學(xué)英文字體設(shè)計（一）》
2. 《青椒姑娘的設(shè)計課！從零開始學(xué)英文字體設(shè)計（二）》
3. 《青椒姑娘的設(shè)計課！從零開始學(xué)英文字體設(shè)計（三）》
4. 《青椒姑娘的設(shè)計課！從零開始學(xué)英文字體設(shè)計（四）》

忘記連字符和對齊吧

在傳統(tǒng)的排版印刷當(dāng)中，為了確保閱讀體驗和排版的整體美感，當(dāng)單詞出現(xiàn)到一行的邊緣無法完全顯示的時候，會通過連字符跳轉(zhuǎn)到下一行。同時，為了讓沒一行兩頭都完美地對齊，會使用Justification（對齊）這一技術(shù)。

但是，在網(wǎng)頁設(shè)計中，截然不同的需求讓這兩種排印技術(shù)顯得并不那么有用。連字符會打破用戶原有的閱讀節(jié)奏，所以連字符的意義并不大。而使用兩頭對齊的技術(shù)，會讓許多段落內(nèi)的字間距和行間距變得非常奇怪。所以，忘記這兩個東西吧。

不要強行改變字體

從技術(shù)上來說，你可以讓一個胖一點瘦一點，高一點或者矮一點，甚至在高一點的同時還加粗等等等等。這在網(wǎng)頁中運用并不可取，因為字體設(shè)計師原本已經(jīng)在力圖讓一款字體看起來足夠一致也足夠漂亮，強行改變通常只能讓整字體劣化，在頁面中顯示也往往無法確保好看。

如果你發(fā)覺某款字體不適合你的設(shè)計，最好是搜索另外的字體。你可以使用 Identifont 這樣的服務(wù)來尋找類似的字體。

對比

對比度是字體排版設(shè)計的時候，最值得注意的幾個因素之一。就像你需要使用不同的尺寸的字體對比來營造層次感一樣，不同的字體重量是對比，色彩能構(gòu)成對比，樣式不同也一樣是對比。

高效的對比手法有不少，但是色彩是來的最高效的。最理想的方案，是淺色的背景上使用深色的文本字體（或者相反）。有無數(shù)的配色方案可以幫你實現(xiàn)這一點。不過，值得注意的是，有的對比色過于晃眼，比如藍色+亮紅色，就讓人很難受。所以，除了足夠的對比，還要在明暗和飽和度上調(diào)整，才能帶來好體驗。

度量也很重要

網(wǎng)頁中文本的載體和度量也很重要，一行有多少字母，一段有多少文字，這些都影響著整個閱讀體驗。用戶始終是需要從左到右閱讀文本，并且循環(huán)往復(fù)掃視來獲取信息的，太短了用戶需要頻繁掃視，太長了會使得掃視范圍過廣，也容易讓人分心。

如果你想擁有良好的閱讀體驗，將每行文字控制在大概60個字符左右，這個字符數(shù)量能夠讓你的內(nèi)容擁有恰到好處的可讀性。

在移動端上，每行文字應(yīng)該控制在30~40個字符之間，這也符合目前的用戶使用習(xí)慣和閱讀體驗。參考下面的對比圖，可以看出，40~60個字符數(shù)通常能夠取得最佳的閱讀體驗。

在網(wǎng)頁設(shè)計中，通常使用 em 和 px 來控制文本塊的寬度，借此來控制每行的字符數(shù)量。

【設(shè)計基礎(chǔ)牢靠才能搞得定好設(shè)計】

1. 《劃重點！在為可穿戴設(shè)備設(shè)計時這11點超重要！》
2. 《對比這10個注意事項，你的網(wǎng)頁文字排版達標(biāo)了么？》
3. 《從這些工具開始，在設(shè)計時更科學(xué)地搞定配色》
4. 《講真，如今的好設(shè)計還是離不開數(shù)據(jù)的支持》
5. 《想讓設(shè)計更走心？你得學(xué)會用共情來驅(qū)動設(shè)計》
6. 《學(xué)會插畫的這四種玩法，能讓你的UI體驗更優(yōu)異》
7. 《這樣做引導(dǎo)，幫你的用戶快速熟悉手勢交互》
8. 《懸浮按鈕要怎么設(shè)計才能帶來好體驗？》
9. 《怎樣借助故事板做好用戶體驗設(shè)計？》

原文地址：designshack
原文作者：CARRIE COUSINS
優(yōu)設(shè)譯文：@陳子木

本文由優(yōu)設(shè)網(wǎng)原創(chuàng)翻譯，請尊重版權(quán)和譯者成果，轉(zhuǎn)摘請附上優(yōu)設(shè)鏈接，違者必究。謝謝各位編輯同仁配合。

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================明星欄目推薦================

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com 是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎(chǔ)設(shè)計愛好者也準(zhǔn)備了貼心的知識樹專欄。開啟免費自學(xué)新篇章，按照我們的專欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺效果。

設(shè)計導(dǎo)航：國內(nèi)人氣最高的設(shè)計網(wǎng)址導(dǎo)航，設(shè)計師必備：http://hao.uisdc.com