對于網(wǎng)頁來說，視覺信息的傳遞非常重要。用戶通過頁面獲取信息，文本、圖片、圖標、按鈕、表單等UI元素都承載著不同類型的信息。其中，文字的作用尤為重要。在排版設(shè)計中，文字內(nèi)容的處理占有相當大的比重。雖然互聯(lián)網(wǎng)上呈現(xiàn)信息的方式多種多樣，但90%以上的信息都是通過文本傳遞的。

　　好的排版設(shè)計可以使閱讀成為一種樂趣，就像奧利弗賴因斯坦在他的文章中所說的：

　　“優(yōu)化排版相當于增強可讀性，提高可訪問性，增強易用性，最終達到視覺平衡！”

　　換句話說，優(yōu)化排版設(shè)計就是優(yōu)化UI界面。今天的文章總結(jié)了文本排版的10個常見注意事項，可以幫助你真正提高內(nèi)容的可讀性和可讀性。

　　1.控制字體數(shù)量

　　當你在網(wǎng)頁的文本內(nèi)容中使用三種以上完全不同的字體時，會使網(wǎng)站顯得雜亂無章、不專業(yè)。

　　過多的字體和復雜的樣式會影響布局。

　　為了防止這種情況發(fā)生，需要盡可能控制字體類型的數(shù)量。

　　總的來說，限制字體數(shù)量是很有用的方法(最多兩種字體，通常一種字體可以處理大部分排版)，堅持在整個網(wǎng)站設(shè)計中使用一種字體可以帶來一致的體驗。如果您需要使用兩種或兩種以上的字體，請確保這些字體系列能夠相互補充和匹配。以下面四種字體為例。喬治亞和Verdana字體大小、寬度相近，構(gòu)成和諧搭配。相比之下，右側(cè)的兩種字體，巴斯克維爾和Impact，如果搭配在一起就不合適了。沖擊太厚，巴斯克維爾的反差太突出。

　　2.盡量使用標準字體

　　網(wǎng)上的字體服務(wù)，比如Google  web  Fonts和Typekit，可以為你推薦很多新鮮有趣的字體。意想不到的字體設(shè)計可以在很多場合給用戶帶來新鮮的體驗。在使用方面，也很方便。例如，谷歌網(wǎng)頁字體是這樣使用的：

　　選擇您喜歡的字體，如“打開字體”

　　生成代碼，粘貼到HTML文檔的標簽中。完成！

　　這個操作就像把大象放進冰箱一樣簡單。

　　那么，問題到底出在哪里呢？

　　首先，你選擇的漂亮字體是任何人的電腦都沒有的。第一個例子是Windows電腦里的微軟雅黑不是Mac的標準字體。如果你在網(wǎng)頁中使用微軟雅黑，它會以平面的方式顯示在Mac電腦上。你選擇的字體不是萬能的，最終會以另一種方式出現(xiàn)在別人的屏幕上。用戶熟悉標準和常用字體，最安全的英文字體永遠是Arial、Calibri、Trebuchet等。其實好的排版只是基礎(chǔ)，吸引人的永遠是漂亮整齊的排版和高質(zhì)量的內(nèi)容，而不是字體本身。3.控制每行內(nèi)容的長度

　　每行文本的字符數(shù)直接影響內(nèi)容的可讀性。正如Baymard通過研究發(fā)現(xiàn)的：

　　“要想有好的閱讀體驗，每行文字控制在60個字符左右。這一數(shù)量的字符可以使您的內(nèi)容可讀性恰到好處。”

　　如果文本太短，用戶內(nèi)容的掃描頻率會太高，往往會打破閱讀的節(jié)奏，而如果太長，用戶就很難保持持續(xù)的高濃度閱讀。

　　在移動端，每行字符應(yīng)該控制在30到40個字符之間，這也符合目前的用戶習慣和閱讀體驗。參考下面的對比圖，可以看出40~60個字符通?？梢赃_到最好的閱讀體驗。

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

　　4.選擇可以在各種尺寸下很好顯示的字體

　　用戶注定要通過不同的設(shè)備訪問您的網(wǎng)站。大多數(shù)用戶界面需要使用不同大小的文本元素作為支持，如正文、標題、按鈕標簽、表單等。你選擇的字體應(yīng)該有不同的大小和不同的粗細。

　　最值得參考的是幾個主流平臺獨立設(shè)計的字體家族，比如安卓上的Roboto，舊金山，蘋果的全系列通用英文字體。

　　當字體足夠大的時候，可識別性的問題不明顯，但是當它在小屏幕上呈現(xiàn)內(nèi)容的時候，可識別性的問題就很明顯了。比如下面的Vivaldi字體很漂亮，但是尺寸小的時候可讀性明顯不足：

　　5.使用易于識別的字體

　　由于英文字體的幾何特性，很多字體在設(shè)計時很難被用戶識別，尤其是字母“I”和“L”，以及字母“R”、“N”和“H”。在選擇字體時，要特別注意這些問題，確保這些基本問題不會給用戶帶來麻煩。

　　6.避免所有大寫

　　事實上，在英語網(wǎng)站上使用所有大寫文本是一個典型的設(shè)計禁忌。就像Miles  Tinker說的，所有段落都使用大寫字母，相對于小寫字母，可讀性明顯降低，直接體現(xiàn)在用戶的身體上，也就是文本的閱讀速度明顯降低。

　　7.注意控制線的高度

　　在排版中，Leading，也就是行高，是一個很常見也很重要的概念。在排版設(shè)計中，行高也是值得注意的。用一個更容易理解的概念來解釋這件事。一般情況下，行距應(yīng)為文字高度的30%，以保證視覺易讀性。德米特里法代耶夫(Dmitry  Fadeyev)發(fā)現(xiàn)，如果段落間距控制得好，整個閱讀效率可以提高20%。這種布局可以讓文字變得更容易被用戶消化，剝離無關(guān)的細節(jié)。

　　8.確保色彩對比合理

　　文字和背景要有足夠的對比，文字越明顯，用戶就越能快速清晰地獲取其中的信息。按照W3C的建議，文本和背景的對比是有規(guī)律的：

　　小文本應(yīng)確保與背景的對比度至少為4.533301

　　大文本(14pt粗體，18pt常規(guī))應(yīng)確保文本和背景之間的對比度超過：1

　　當對比度不足時，幾乎無法閱讀

　　這些符合對比度規(guī)格，易于閱讀

　　一旦確定了配色，就需要在盡可能多的設(shè)備上進行測試，讓不同的用戶看到效果，盡可能避免可讀性問題。

　　9.避免使用紅色和綠色文本

　　紅綠色盲是最常見的視覺障礙之一。彩色文本通常用于區(qū)分重要信息，但紅色和綠色可能會失去視覺傳達的功能。即使只用紅色，也盡量搭配其他區(qū)分方法。

　　10.避免使用閃爍的文本

　　閃爍的文字確實能吸引用戶的注意力，但它最大的問題是讓人感覺不舒服，甚至會引起特定用戶的癲癇病。惡心又讓人分心的閃爍文字，無論從哪個角度來看，都是弊大于利的設(shè)計錯誤。

　　標簽

　　現(xiàn)在排版在網(wǎng)頁設(shè)計中越來越重要。糟糕的排版讓人分心，內(nèi)容無法清晰傳達。反之，優(yōu)秀的排版會更含蓄、無聲，讓內(nèi)容傳達得更清晰、更直觀，最終用戶更容易理解內(nèi)容。