如果網站上的文字無法閲讀或者多用户根本沒有興趣，這個設計就是失敗的。而文字並不是僅僅放在網頁上就可以了，還需要合理的佈局和樣式搭配才能起作用，本文和大家分享如何用合適字號提升多用户體驗。
在一個網站中，文字的大小是多用户體驗的一個重要部分。隨着網頁設計潮流的不斷變化，文字大小上的設計也在不斷改變。
雖然網頁上字號不像字型那樣受到多種客觀因素制約，看起來似乎設計師可以自由選擇字號，但這並不意味着設計師可以 “任性” 了，出於視覺效果和網站多用户體驗考慮，仍然有一些基本的設計原則或規範是需要注意的。
咱先舉個例子説明：
豆瓣是國內一個非常出名的社羣，在這個文藝青年聚集的平台上，我們從網頁設計就可以感受到一陣文藝清新風撲面而來。
我們從字號上觀察一下，頁不同板塊標題採用 24 號字型，標題下面的分類文字 14 號，右側標題 15 號，標籤文字 12 號，頁文章標題和內容簡介也是 12 號字型。
而詳情頁標題 25 號，正文 13 號。
從視覺上看，豆瓣網站的整體字號偏小，雖然看到一些網友吐槽正文內容的文字太小，大段文字很容易眼花，而且長時間的閲讀會讓眼睛產生疲勞，不過大多數多用户還是比較認可這樣的設計。
如果正文文字換成百度百科這種 14 號字型，就會顯得有種 “傻大個兒” 的感覺，在豆瓣上不夠精緻細膩。（當然我不是説百度百科不好，畢竟不同網站面對不同羣體，需要有針對性。）
也就是説，豆瓣網站在可讀性上相對比較差，但從另一方面來説，這種小字號讓人有一種整體感和精緻感，很好襯托出網頁的一種 “文藝範兒”，非常符合網站所面對的羣體，因此網站整體多用户體驗仍然很不錯。
這些實際上都是需要設計師們注意的。
接下來咱再繼續説字號規範吧。
在目前網頁設計中，雖然沒有明文規定文字的標準字號，但設計師應該都知道網頁上 12 號和 14 號字型非常常見。這也是由於一些客觀因素的制約：
> 設計軟件。設計師使用的設計軟件，比如 PS 等，大多數是偶數，這是一種習慣的延續。
> 瀏覽器。 在某些瀏覽器上，奇數字號會被自動渲染成偶數，比如 IE6 。
> 美觀度。 偶數字號的文字，比如 12 號的 “中” 字，去掉 1 畫素的間距，填充了畫素的實際寬是 11px，文字的中豎線左右是平分的，顯得均衡，具有美感。
> 實際應用。 Windows 自帶的點陣宋體從 Vista 開始只提供 12 、 14 、 16px 三個大小的點陣，在 13 、 15 、 17px 下，雖然每個字的空間大了 1px，點陣卻沒變，但視覺上顯得稀疏，顯示效果不佳。
不過這些因素都可以酌情考慮。比如豆瓣和知乎等網站採用 13 號、 15 號也達到很好的效果，不過總的來説，偶數字號更 “安全” 。
另外，網頁設計上着名的 Smashing Magazine 曾調查了 50 個流行的網頁介面，發現這些網站通常都是採用標題大小 18—29px，與此匹配的文章主體文字大小採用 12—14px 。雖然調查主要針對的是英文字型，不過我們也可以從中估算和對比出一些中文字號適用的規範。
綜合以上種種原因和我們的理想實踐經驗，我們總結了以下幾條規範，它們可以讓網頁設計更：
1. 文字的字號儘量選擇 12 、 14 、 16 等偶數字號，文字小不能小於 12 號。
2. 導航文字及頭部底部文字的字號：Header 導航文字 12 號或 14 號；Menu 導航文字 14—18 號；Sidebar 文字 12 號或 14 號，一級選單使用 14 號、二級選單使用 12 號，或一級選單使用 12 號加粗、二級選單使用 12 號；Footer 文字 12 號或 14 號。
比如，AnyForWeb 為樂扣樂扣設計的區網上官方商城就完全符合這些規範。
尤其是在導航上，Header 導航 12 號，導航 16 號，文字大小層級也按照 16—14—12 號依次排列，這裏的文字設計還用了不同顏色讓層次區分更加明顯。
通過文字字號傳達出清晰的網站結構，這種視覺差異讓多用户可以非常快速找到想要的商品，而不是花費太多時間用在研究導航上, 能有效提升網站多用户體驗。
3. 正文：大標題文字 24—32 號；標題文字 16 或 18 號；正文文字 12 號或 14 號。可根據實際情況加粗。
上海自然博物館官網是一個主要以展示為主的網站。
我們可以看到以下網頁的字號設計基本上全部符合上面的規範，尤其是下面版塊中的文字字號搭配，版塊文字 18 號、標題文字 16 號加粗、正文文字 14 號，層次分明又有效突出重點，看上去很舒適。
Banner 中的大號文字則屬於特別情況，每張圖上的文字都是根據圖片中元素進行設計的，圖文結合很有整體感，在視覺上非常吸引人。
4. 按鈕文字：比如登入、註冊頁面按鈕或其他按鈕，文字 14—16 號，可根據實際情況調整大小或加粗。
比如，英特爾的按鈕字號設計：
5. 廣告語及特別情況則需根據文字的實際情況設計字號。
好知網是一個知識分享社羣，Banner 圖裏面的文字採用了大號文字設計，在開啓網頁時時間抓住多用户的眼球，快速傳遞重要的企業資訊或產品價值。
6. 同一層級的字號搭配應該保持一致。比如，同一層級的版塊中標題文字和內容文字大小的一致性。
上面分享的規範只是我們根據長期專案總結的理想實戰經驗，在實際網頁設計中，還需要設計師們根據網站特徵和具體情況靈活設計。
此外，隨着網頁設計開始流行大號文字設計風格，一些品牌網站、科技網站、活動網站，以及一些網站產品展示欄目的文字字號給人非常棒的視覺體驗。
在蘋果官網中，產品展示文字以 64 號和 32 號搭配，文字內容簡短有力，可讀性強，同時非常具有視覺衝擊力，突出顯示了品牌特徵。
在賓士的活動網站中，文字同樣以不同大小文字搭配的方式展示，這些文字根據實際圖片設計了適當的字號，瀏覽過程中的動畫效果將賓士的大氣和科技感地展現出來。
這些網站一般採用大圖大號文字搭配，凸顯品牌傳遞的價值，強烈的視覺衝擊力也能給人留下比較深刻的印象，並在瀏覽過程中實現好的多用户體驗。
本文先分享到這裏，當然咯，還有很多的優秀網站可以讓設計師們去學習實踐，接下來就看大家的了。