在網(wǎng)頁(yè)設(shè)計(jì)中，文字排版為什么對(duì)于網(wǎng)站和用戶(hù)之間建立良好的溝通以及幫助用戶(hù)實(shí)現(xiàn)目標(biāo)起著重要的作用的10點(diǎn)建議。在網(wǎng)頁(yè)設(shè)計(jì)中，文字排版對(duì)于網(wǎng)站和用戶(hù)之間建立良好的溝通以及幫助用戶(hù)實(shí)現(xiàn)目標(biāo)起著重要的作用。當(dāng)我們談?wù)摼W(wǎng)頁(yè)是否能和用戶(hù)建立有效的溝通的時(shí)候，通常是指文字排版在這里起到的作用：

“網(wǎng)頁(yè)中95％以上的信息是以文字形式呈現(xiàn)的。”

良好的排版使用戶(hù)更易于閱讀，而混亂的排版則使用戶(hù)失去繼續(xù)瀏覽的意愿。正如“Oliver ReichensReichenstein在他的文章“Web Design is 95% Typography ”中寫(xiě)道：“排版的目的是優(yōu)化可讀性，訪問(wèn)率，可用性，保持和圖形的平衡關(guān)系”

換言之，優(yōu)化排版也在幫助您優(yōu)化界面。本文中，我們提供一組規(guī)則，將幫助您提高文本內(nèi)容的可讀性和易讀性。

1.不要使用過(guò)多的字體

網(wǎng)站排版中建議更多不要超過(guò)3種字體類(lèi)型，不然會(huì)使網(wǎng)站看起來(lái)松散和不專(zhuān)業(yè)，不僅太多的字體類(lèi)型會(huì)造成這種問(wèn)題，太多的字體尺寸也會(huì)破壞網(wǎng)頁(yè)布局。

通常情況下，將字體家族的數(shù)量限制在更小數(shù)量（2個(gè)是很多，1個(gè)通常就夠了），整個(gè)網(wǎng)站堅(jiān)持使用相同的原則。如果使用多個(gè)字體，請(qǐng)確保倆個(gè)字體是否和諧。以下面的字體組合為例，Georgia和Verdana的搭配相得益彰，相對(duì)比較和諧。相比于右邊Baskerville和Impact則會(huì)有明顯的沖突感，非襯線Impact明顯的超過(guò)了Baskerville的視覺(jué)沖擊力。

而在中英文排版中，建議大家中文使用標(biāo)準(zhǔn)中文字體，而英文、數(shù)字和字符使用標(biāo)準(zhǔn)的英文字體。以下面的圖為例，是否可以對(duì)比處那個(gè)美觀一些。

2.盡量使用標(biāo)準(zhǔn)字體

在Google Web Font或者Typekit，和國(guó)內(nèi)的“有字庫(kù)”的字體嵌入式服務(wù)有很多有趣的字體，對(duì)于國(guó)內(nèi)設(shè)計(jì)師來(lái)說(shuō)，痛苦的是中文字體會(huì)很大，一個(gè)字體動(dòng)則幾兆，十幾兆的，這樣用戶(hù)在會(huì)增加用戶(hù)瀏覽網(wǎng)站的載入時(shí)間；反之英文字體26個(gè)字母大小寫(xiě)，加數(shù)字標(biāo)點(diǎn)符號(hào)一共幾百k的字體是很容易在網(wǎng)頁(yè)中使用的。

盡可能選擇標(biāo)準(zhǔn)字體（近幾年網(wǎng)頁(yè)中通常使用思源黑體，PingFang，英文可以使用Arial，Calibri或者其他常見(jiàn)的易于屏幕閱讀的黑體字，如沒(méi)有特殊概念指導(dǎo)盡可能避免使用襯線字體，如宋體）

不是每位用戶(hù)都可以在終端上看到同一個(gè)字體，意味著你選擇的適合的字體，用戶(hù)有可能看不到。

用戶(hù)更熟悉標(biāo)準(zhǔn)字體，因此他們可以更快的閱讀

特殊的、并且少量的字體可以制作成.svg格式的素材嵌入Web使用

良好的排版會(huì)使用戶(hù)更加關(guān)注內(nèi)容本身，而不是字體的類(lèi)型。

3.限制一行文字的長(zhǎng)度

保證每一行文字的字符數(shù)量是文本可讀的關(guān)鍵。不是設(shè)計(jì)師來(lái)定義文本的寬度，而是根據(jù)用戶(hù)的可讀性來(lái)定義。

太寬-會(huì)使得單行文字太長(zhǎng)，讀者的眼睛會(huì)難于專(zhuān)注文字。因?yàn)殚L(zhǎng)時(shí)間閱讀容易串行，大段的文本中很難找到正確的行。

太短-會(huì)使得用戶(hù)的眼睛經(jīng)常回到下一行文本，會(huì)打破讀者的閱讀節(jié)奏，長(zhǎng)時(shí)間閱讀造成視覺(jué)疲勞。太短也會(huì)傾向于向讀者發(fā)出一種信號(hào)，使得讀者沒(méi)有讀完當(dāng)前這行就去跳到下一行閱讀，可能會(huì)忽略潛在的重要詞句。

以Google和百度為例，我們不難看出這點(diǎn)

對(duì)于移動(dòng)設(shè)備，應(yīng)該每行30-40個(gè)字符（半角），具體顯示多少個(gè)字?jǐn)?shù)，與不同分辨率的屏幕、文本寬度和字體大小都會(huì)有關(guān)系，設(shè)計(jì)的原則是：保證用戶(hù)可以流暢的閱讀文本，文字不宜太小或太大。以iOS（手機(jī)）為例，正文文本更小字號(hào)不能小于24px，太小了用戶(hù)閱讀會(huì)難以閱讀。以百度為例，可作為參考。

4.選擇用有多個(gè)字重并顯示良好的字體

用戶(hù)將通過(guò)不同屏幕分辨率的終端設(shè)備訪問(wèn)你的網(wǎng)站，大多數(shù)用戶(hù)界面需要各種大小尺寸的文本（標(biāo)題、副標(biāo)題、文本、標(biāo)注等等）。選擇一款能夠在不同屏幕分辨率的設(shè)備上運(yùn)行良好的字體以保證它的不同尺寸的字體都具有極高可讀性(Readability)和可用性(Usability)也是非常重要的。

近倆年備受大家歡迎的思源黑體和PingFang字體都是不錯(cuò)的選擇，當(dāng)然，個(gè)人認(rèn)為漢儀旗黑無(wú)論從家族字體的數(shù)量、字體質(zhì)量、屏幕顯示、紙媒印刷上來(lái)說(shuō)都不遜色于前面?zhèn)z款字體。參與過(guò)這款字體設(shè)計(jì)的設(shè)計(jì)師曾說(shuō)過(guò)，思源黑體還是相對(duì)比較粗糙的一款字體。

同樣，為了保證在屏幕上清晰可辨，盡量避免使用襯線體，盡管他們很漂亮。

5.使用識(shí)別度高的字體

在選擇英文體的時(shí)候，有些字體的個(gè)別字母極易混淆，特別是“i”和“L”（如下圖所示）；以及文字之間的間距。許多中文字體在使用較小字體的時(shí)候筆畫(huà)會(huì)粘到一起(上圖），不容易辨別；所以在選擇字體類(lèi)型的時(shí)候，請(qǐng)檢查你選擇使用的字體，確保不會(huì)為用戶(hù)和產(chǎn)品造成不必要的損失。

6.避免在界面中大段的使用大寫(xiě)字母

不要所有文本使用大寫(xiě)字母，強(qiáng)制用戶(hù)閱讀大寫(xiě)字母，首字母大寫(xiě)，具有特殊含義的縮寫(xiě)等情況除外，與小寫(xiě)字母相比，大量的使用大寫(xiě)字母會(huì)嚴(yán)重降低用戶(hù)的閱讀效率和愉悅感。

7.將行間距控制在字體的1.5-2倍之間

在文字文字排版中，我們又一個(gè)特殊的術(shù)語(yǔ)，用于表示行與行之間的距離：行間距（或行高）。為了保證文本的可讀性和易讀性，使文本形成線性的閱讀感受，將行間距控制在字體大小的1.5-2倍之間（中文字體）。英文字體推薦使用默認(rèn)行間距，或根據(jù)默認(rèn)行間距微調(diào)。

8.適當(dāng)?shù)念伾珜?duì)比度

通常情況下，文本和背景盡量避免使用相同或相似的顏色。文本越明顯，用戶(hù)能夠掃描和閱讀的速度越快。當(dāng)然，學(xué)會(huì)通過(guò)文本顏色、大小和背景的顏色關(guān)系來(lái)控制視覺(jué)層級(jí)也是必要的。

與背景相比，小文本和背景的對(duì)比度至少為4.5:1

大文本（14px/18px以上）應(yīng)該保持與背景3:1以上的對(duì)比度

灰色通常作為輔助色使用，根據(jù)之前的項(xiàng)目經(jīng)驗(yàn)，給大家分享一套我自己一直在使用的灰色，灰的有層次，清晰的區(qū)分信息層級(jí)是必要的

9.避免將文字著色為紅色或綠色

色盲和色弱是我必須要照顧到的一部分用戶(hù)，特別是在男性中（8％的男性是色盲）建議使用處顏色以外的其他方式來(lái)區(qū)分重要的信息（如下劃線，加粗等）。避免使用紅色和綠色單獨(dú)傳達(dá)信息。因?yàn)榧t綠色盲是更常見(jiàn)的色盲形式。（現(xiàn)在想想，那些因?yàn)榧t綠色盲而考不了駕照的童鞋是不是要分分鐘恨死制定紅綠燈規(guī)則的人，當(dāng)然這只是個(gè)笑話，使用紅綠燈是因?yàn)楣鈱W(xué)在物理傳播方面的原因，這里不解釋?zhuān)?/p>

雖然在日常生活中我們總是用這種方式告知用戶(hù)綠色是表示正確的操作，紅色表示錯(cuò)誤的操作，反思一下我們是否有去考慮色盲用戶(hù)的操作和體驗(yàn)。或許我們是不是可以考慮換一個(gè)方式去表達(dá)正確或錯(cuò)誤？

10.避免文字閃爍

閃爍的文字或內(nèi)容可能會(huì)讓某些用戶(hù)感到不適，對(duì)于一般用戶(hù)而言，這可能分散他們的注意力或者使他們感到煩躁。

雖然在網(wǎng)頁(yè)設(shè)計(jì)中依然有很多需要我們注意的地方，更后，分享給大家一個(gè)想法就是：網(wǎng)頁(yè)設(shè)計(jì)中排版很重要。做出正確的排版可以讓你的網(wǎng)站感覺(jué)清爽，糟糕的網(wǎng)頁(yè)排版會(huì)令用戶(hù)分心，傾向于關(guān)注自己的感受而非內(nèi)容。排版的關(guān)鍵在于使信息層級(jí)清晰、用戶(hù)易于閱讀、并且保證文字是可讀的。文字的排版不應(yīng)該增加用戶(hù)的認(rèn)知符合，以求達(dá)到尊重內(nèi)容、尊重用戶(hù)的目的。