如果網(wǎng)站上的文字無(wú)法閱讀或者用戶根本沒(méi)有興趣，這個(gè)設(shè)計(jì)就是失敗的。而文字并不是僅僅放在網(wǎng)頁(yè)上就可以了，還需要合理的布局和樣式搭配才能起作用，本文和大家分享如何用合適字號(hào)提升用戶體驗(yàn)。

在一個(gè)網(wǎng)站中，文字的大小是用戶體驗(yàn)的一個(gè)重要部分。隨著網(wǎng)頁(yè)設(shè)計(jì)潮流的不斷變化，文字大小上的設(shè)計(jì)也在不斷改變。

雖然網(wǎng)頁(yè)上字號(hào)不像字體那樣受到多種客觀因素制約，看起來(lái)似乎設(shè)計(jì)師可以自由選擇字號(hào)，但這并不意味著設(shè)計(jì)師可以“任性”了，出于視覺(jué)效果和網(wǎng)站用戶體驗(yàn)考慮，仍然有一些基本的設(shè)計(jì)原則或規(guī)范是需要注意的。

咱先舉個(gè)例子說(shuō)明：

豆瓣是國(guó)內(nèi)一個(gè)非常出名的社區(qū)，在這個(gè)文藝青年聚集的平臺(tái)上，我們從網(wǎng)頁(yè)設(shè)計(jì)就可以感受到一陣文藝清新風(fēng)撲面而來(lái)。

我們從字號(hào)上觀察一下，首頁(yè)不同板塊標(biāo)題采用24號(hào)字體，標(biāo)題下面的分類文字14號(hào)，右側(cè)標(biāo)題15號(hào)，標(biāo)簽文字12號(hào)，首頁(yè)文章標(biāo)題和內(nèi)容簡(jiǎn)介也是12號(hào)字體。

而詳情頁(yè)標(biāo)題25號(hào)，正文13號(hào)。

從視覺(jué)上看，豆瓣網(wǎng)站的整體字號(hào)偏小，雖然看到一些網(wǎng)友吐槽正文內(nèi)容的文字太小，大段文字很容易眼花，而且長(zhǎng)時(shí)間的閱讀會(huì)讓眼睛產(chǎn)生疲勞，不過(guò)大多數(shù)用戶還是比較認(rèn)可這樣的設(shè)計(jì)。

如果正文文字換成百度百科這種14號(hào)字體，就會(huì)顯得有種“傻大個(gè)兒”的感覺(jué)，在豆瓣上不夠精致細(xì)膩。（當(dāng)然我不是說(shuō)百度百科不好，畢竟不同網(wǎng)站面對(duì)不同群體，需要有針對(duì)性。）

也就是說(shuō)，豆瓣網(wǎng)站在可讀性上相對(duì)比較差，但從另一方面來(lái)說(shuō)，這種小字號(hào)讓人有一種整體感和精致感，很好襯托出網(wǎng)頁(yè)的一種“文藝范兒”，非常符合網(wǎng)站所面對(duì)的群體，因此網(wǎng)站整體用戶體驗(yàn)仍然很不錯(cuò)。

這些實(shí)際上都是需要設(shè)計(jì)師們注意的。

接下來(lái)咱再繼續(xù)說(shuō)字號(hào)規(guī)范吧。

在目前網(wǎng)頁(yè)設(shè)計(jì)中，雖然沒(méi)有明文規(guī)定文字的標(biāo)準(zhǔn)字號(hào)，但設(shè)計(jì)師應(yīng)該都知道網(wǎng)頁(yè)上12號(hào)和14號(hào)字體非常常見。這也是由于一些客觀因素的制約：

>?設(shè)計(jì)軟件。

設(shè)計(jì)師使用的設(shè)計(jì)軟件，比如PS等，大多數(shù)是偶數(shù)，這是一種習(xí)慣的延續(xù)。

>?瀏覽器。

在某些瀏覽器上，奇數(shù)字號(hào)會(huì)被自動(dòng)渲染成偶數(shù)，比如IE6。

> 美觀度。

偶數(shù)字號(hào)的文字，比如12號(hào)的“中”字，去掉1像素的間距，填充了像素的實(shí)際寬是11px，文字的中豎線左右是平分的，顯得均衡，具有美感。

>?實(shí)際應(yīng)用。

Windows自帶的點(diǎn)陣宋體從Vista開始只提供12、14、16px三個(gè)大小的點(diǎn)陣，在13、15、17px下，雖然每個(gè)字的空間大了1px，點(diǎn)陣卻沒(méi)變，但視覺(jué)上顯得稀疏，顯示效果不佳。

不過(guò)這些因素都可以酌情考慮。比如豆瓣和知乎等網(wǎng)站采用13號(hào)、15號(hào)也達(dá)到很好的效果，不過(guò)總的來(lái)說(shuō)，偶數(shù)字號(hào)更“安全”。

另外，網(wǎng)頁(yè)設(shè)計(jì)上著名的SmashingMagazine曾調(diào)查了50個(gè)流行的網(wǎng)頁(yè)界面，發(fā)現(xiàn)這些網(wǎng)站通常都是采用標(biāo)題大小18—29px，與此匹配的文章主體文字大小采用12—14px。雖然調(diào)查主要針對(duì)的是英文字體，不過(guò)我們也可以從中估算和對(duì)比出一些中文字號(hào)適用的規(guī)范。

綜合以上種種原因和我們的最佳實(shí)踐經(jīng)驗(yàn)，我們總結(jié)了以下幾條規(guī)范，它們可以讓網(wǎng)頁(yè)設(shè)計(jì)更專業(yè)：

1.文字的字號(hào)盡量選擇12、14、16等偶數(shù)字號(hào)，文字最小不能小于12號(hào)。

2.導(dǎo)航文字及頭部底部文字的字號(hào)：Header導(dǎo)航文字12號(hào)或14號(hào)；Menu導(dǎo)航文字14—18號(hào)；Sidebar文字12號(hào)或14號(hào)，一級(jí)菜單使用14號(hào)、二級(jí)菜單使用12號(hào)，或一級(jí)菜單使用12號(hào)加粗、二級(jí)菜單使用12號(hào)；Footer文字12號(hào)或14號(hào)。

比如，AnyForWeb為樂(lè)扣樂(lè)扣設(shè)計(jì)的中國(guó)區(qū)網(wǎng)上官方商城就完全符合這些規(guī)范。

尤其是在導(dǎo)航上，Header導(dǎo)航12號(hào)，導(dǎo)航16號(hào)，文字大小層級(jí)也按照16—14—12號(hào)依次排列，這里的文字設(shè)計(jì)還用了不同顏色讓層次區(qū)分更加明顯。

通過(guò)文字字號(hào)傳達(dá)出清晰的網(wǎng)站結(jié)構(gòu)，這種視覺(jué)差異讓用戶可以非?？焖僬业较胍纳唐?，而不是花費(fèi)太多時(shí)間用在研究導(dǎo)航上,能有效提升網(wǎng)站用戶體驗(yàn)。

3.正文：大標(biāo)題文字24—32號(hào)；標(biāo)題文字16或18號(hào)；正文文字12號(hào)或14號(hào)?？筛鶕?jù)實(shí)際情況加粗。

上海自然博物館官網(wǎng)是一個(gè)主要以展示為主的網(wǎng)站。

我們可以看到以下網(wǎng)頁(yè)的字號(hào)設(shè)計(jì)基本上全部符合上面的規(guī)范，尤其是下面版塊中的文字字號(hào)搭配，版塊文字18號(hào)、標(biāo)題文字16號(hào)加粗、正文文字14號(hào)，層次分明又有效突出重點(diǎn)，看上去很舒適。

Banner中的大號(hào)文字則屬于特別情況，每張圖上的文字都是根據(jù)圖片中元素進(jìn)行設(shè)計(jì)的，圖文結(jié)合很有整體感，在視覺(jué)上非常吸引人。

4.按鈕文字：比如登錄、注冊(cè)頁(yè)面按鈕或其他按鈕，文字14—16號(hào)，可根據(jù)實(shí)際情況調(diào)整大小或加粗。

比如，英特爾的按鈕字號(hào)設(shè)計(jì)：

5.廣告語(yǔ)及特別情況則需根據(jù)文字的實(shí)際情況設(shè)計(jì)字號(hào)。

好知網(wǎng)是一個(gè)知識(shí)分享社區(qū)，Banner圖里面的文字采用了大號(hào)文字設(shè)計(jì)，在打開網(wǎng)頁(yè)時(shí)第一時(shí)間抓住用戶的眼球，快速傳遞重要的企業(yè)信息或產(chǎn)品價(jià)值。

6.同一層級(jí)的字號(hào)搭配應(yīng)該保持一致。比如，同一層級(jí)的版塊中標(biāo)題文字和內(nèi)容文字大小的一致性。

上面分享的規(guī)范只是我們根據(jù)長(zhǎng)期項(xiàng)目總結(jié)的最佳實(shí)戰(zhàn)經(jīng)驗(yàn)，在實(shí)際網(wǎng)頁(yè)設(shè)計(jì)中，還需要設(shè)計(jì)師們根據(jù)網(wǎng)站特征和具體情況靈活設(shè)計(jì)。

此外，隨著網(wǎng)頁(yè)設(shè)計(jì)開始流行大號(hào)文字設(shè)計(jì)風(fēng)格，一些品牌網(wǎng)站、科技網(wǎng)站、活動(dòng)網(wǎng)站，以及一些網(wǎng)站產(chǎn)品展示欄目的文字字號(hào)給人非常棒的視覺(jué)體驗(yàn)。

在蘋果官網(wǎng)中，產(chǎn)品展示文字以64號(hào)和32號(hào)搭配，文字內(nèi)容簡(jiǎn)短有力，可讀性強(qiáng)，同時(shí)非常具有視覺(jué)沖擊力，突出顯示了品牌特征。

在奔馳的活動(dòng)網(wǎng)站中，文字同樣以不同大小文字搭配的方式展示，這些文字根據(jù)實(shí)際圖片設(shè)計(jì)了適當(dāng)?shù)淖痔?hào)，瀏覽過(guò)程中的動(dòng)畫效果將奔馳的大氣和科技感完美地展現(xiàn)出來(lái)。

這些網(wǎng)站一般采用大圖大號(hào)文字搭配，凸顯品牌傳遞的價(jià)值，強(qiáng)烈的視覺(jué)沖擊力也能給人留下比較深刻的印象，并在瀏覽過(guò)程中實(shí)現(xiàn)好的用戶體驗(yàn)。

原文出處：@AnyForWeb