如果網(wǎng)站上的文字無法閱讀或者用戶根本沒有興趣溺拱，這個設計就是失敗的逃贝。而文字并不是僅僅放在網(wǎng)頁上就可以了，還需要合理的布局和樣式搭配才能起作用迫摔，本文和大家分享如何用合適字號提升用戶體驗沐扳。
在一個網(wǎng)站中，文字的大小是用戶體驗的一個重要部分句占。隨著網(wǎng)頁設計潮流的不斷變化迫皱，文字大小上的設計也在不斷改變。
雖然網(wǎng)頁上字號不像字體那樣受到多種客觀因素制約辖众，看起來似乎設計師可以自由選擇字號，但這并不意味著設計師可以“任性”了和敬，出于視覺效果和網(wǎng)站用戶體驗考慮凹炸，仍然有一些基本的設計原則或規(guī)范是需要注意的。
咱先舉個例子說明：
豆瓣是國內一個非常出名的社區(qū)昼弟，在這個文藝青年聚集的平臺上啤它，我們從網(wǎng)頁設計就可以感受到一陣文藝清新風撲面而來。
我們從字號上觀察一下，首頁不同板塊標題采用24號字體变骡，標題下面的分類文字14號离赫，右側標題15號，標簽文字12號塌碌，首頁文章標題和內容簡介也是12號字體渊胸。
而詳情頁標題25號，正文13號台妆。
從視覺上看翎猛，豆瓣網(wǎng)站的整體字號偏小，雖然看到一些網(wǎng)友吐槽正文內容的文字太小接剩，大段文字很容易眼花切厘，而且長時間的閱讀會讓眼睛產(chǎn)生疲勞，不過大多數(shù)用戶還是比較認可這樣的設計懊缺。
如果正文文字換成百度百科這種14號字體疫稿，就會顯得有種“傻大個兒”的感覺，在豆瓣上不夠精致細膩鹃两。（當然我不是說百度百科不好遗座，畢竟不同網(wǎng)站面對不同群體，需要有針對性怔毛。）
也就是說员萍，豆瓣網(wǎng)站在可讀性上相對比較差，但從另一方面來說拣度，這種小字號讓人有一種整體感和精致感碎绎，很好襯托出網(wǎng)頁的一種“文藝范兒”，非常符合網(wǎng)站所面對的群體抗果，因此網(wǎng)站整體用戶體驗仍然很不錯筋帖。
這些實際上都是需要設計師們注意的。
接下來咱再繼續(xù)說字號規(guī)范吧冤馏。
在目前網(wǎng)頁設計中日麸，雖然沒有明文規(guī)定文字的標準字號，但設計師應該都知道網(wǎng)頁上12號和14號字體非常常見逮光。這也是由于一些客觀因素的制約：
> ?設計軟件代箭。設計師使用的設計軟件，比如PS等涕刚，大多數(shù)是偶數(shù)嗡综，這是一種習慣的延續(xù)。
> ?瀏覽器杜漠。在某些瀏覽器上极景，奇數(shù)字號會被自動渲染成偶數(shù)察净，比如IE6袱蜡。
> ?美觀度胎撇。偶數(shù)字號的文字，比如12號的“中”字搞隐，去掉1像素的間距晨缴，填充了像素的實際寬是11px译秦，文字的中豎線左右是平分的，顯得均衡喜庞，具有美感诀浪。
> ?實際應用。Windows自帶的點陣宋體從Vista開始只提供12延都、14雷猪、16px三個大小的點陣，在13晰房、15求摇、17px下，雖然每個字的空間大了1px殊者，點陣卻沒變与境，但視覺上顯得稀疏，顯示效果不佳猖吴。
不過這些因素都可以酌情考慮摔刁。比如豆瓣和知乎等網(wǎng)站采用13號、15號也達到很好的效果海蔽，不過總的來說共屈，偶數(shù)字號更“安全”。
另外党窜，網(wǎng)頁設計上著名的Smashing?Magazine曾調查了50個流行的網(wǎng)頁界面拗引，發(fā)現(xiàn)這些網(wǎng)站通常都是采用標題大小18—29px，與此匹配的文章主體文字大小采用12—14px幌衣。雖然調查主要針對的是英文字體矾削，不過我們也可以從中估算和對比出一些中文字號適用的規(guī)范。
綜合以上種種原因和我們的最佳實踐經(jīng)驗豁护，我們總結了以下幾條規(guī)范哼凯，它們可以讓網(wǎng)頁設計更專業(yè)：
1.文字的字號盡量選擇12、14楚里、16等偶數(shù)字號挡逼，文字最小不能小于12號。
2.導航文字及頭部底部文字的字號：Header導航文字12號或14號腻豌；Menu導航文字14—18號家坎；Sidebar文字12號或14號，一級菜單使用14號吝梅、二級菜單使用12號虱疏，或一級菜單使用12號加粗、二級菜單使用12號苏携；Footer文字12號或14號做瞪。
比如，AnyForWeb為樂扣樂扣設計的中國區(qū)網(wǎng)上官方商城就完全符合這些規(guī)范右冻。
尤其是在導航上装蓬，Header導航12號，導航16號纱扭，文字大小層級也按照16—14—12號依次排列牍帚，這里的文字設計還用了不同顏色讓層次區(qū)分更加明顯。
通過文字字號傳達出清晰的網(wǎng)站結構乳蛾，這種視覺差異讓用戶可以非嘲蹈希快速找到想要的商品，而不是花費太多時間用在研究導航上,能有效提升網(wǎng)站用戶體驗肃叶。
3.正文：大標題文字24—32號蹂随；標題文字16或18號；正文文字12號或14號因惭≡浪可根據(jù)實際情況加粗。
上海自然博物館官網(wǎng)是一個主要以展示為主的網(wǎng)站蹦魔。
我們可以看到以下網(wǎng)頁的字號設計基本上全部符合上面的規(guī)范激率，尤其是下面版塊中的文字字號搭配，版塊文字18號版姑、標題文字16號加粗柱搜、正文文字14號，層次分明又有效突出重點剥险，看上去很舒適聪蘸。
Banner中的大號文字則屬于特別情況，每張圖上的文字都是根據(jù)圖片中元素進行設計的表制，圖文結合很有整體感健爬，在視覺上非常吸引人。
4.按鈕文字：比如登錄么介、注冊頁面按鈕或其他按鈕娜遵，文字14—16號，可根據(jù)實際情況調整大小或加粗壤短。
比如设拟，英特爾的按鈕字號設計：
5.廣告語及特別情況則需根據(jù)文字的實際情況設計字號慨仿。
好知網(wǎng)是一個知識分享社區(qū)，Banner圖里面的文字采用了大號文字設計纳胧，在打開網(wǎng)頁時第一時間抓住用戶的眼球镰吆，快速傳遞重要的企業(yè)信息或產(chǎn)品價值。
6.同一層級的字號搭配應該保持一致跑慕。比如万皿，同一層級的版塊中標題文字和內容文字大小的一致性。
上面分享的規(guī)范只是我們根據(jù)長期項目總結的最佳實戰(zhàn)經(jīng)驗核行，在實際網(wǎng)頁設計中牢硅，還需要設計師們根據(jù)網(wǎng)站特征和具體情況靈活設計。
此外芝雪，隨著網(wǎng)頁設計開始流行大號文字設計風格减余，一些品牌網(wǎng)站、科技網(wǎng)站绵脯、活動網(wǎng)站佳励，以及一些網(wǎng)站產(chǎn)品展示欄目的文字字號給人非常棒的視覺體驗。
在蘋果官網(wǎng)中蛆挫，產(chǎn)品展示文字以64號和32號搭配赃承，文字內容簡短有力，可讀性強悴侵，同時非常具有視覺沖擊力瞧剖，突出顯示了品牌特征。
在奔馳的活動網(wǎng)站中可免，文字同樣以不同大小文字搭配的方式展示抓于，這些文字根據(jù)實際圖片設計了適當?shù)淖痔枺瑸g覽過程中的動畫效果將奔馳的大氣和科技感完美地展現(xiàn)出來浇借。
這些網(wǎng)站一般采用大圖大號文字搭配捉撮，凸顯品牌傳遞的價值，強烈的視覺沖擊力也能給人留下比較深刻的印象妇垢，并在瀏覽過程中實現(xiàn)好的用戶體驗巾遭。
本文先分享到這里，當然咯闯估，還有很多的優(yōu)秀網(wǎng)站可以讓設計師們去學習實踐灼舍，接下來就看大家的了。
