如果網站上的文本不可讀或用戶根本不感興趣，則設計失敗。文本不僅在網頁上，還需要合理的布局和樣式才能工作。本文與您分享如何使用適當的字體大小改善用戶體驗。

在網站中，文本的大小是用戶體驗的重要部分。隨著網頁設計的趨勢不斷變化，文本大小的設計也在不斷變化。

雖然網頁上的字體大小不受字體等各種客觀因素的影響，但設計師似乎可以自由選擇字體大小，但這并不意味著設計師可以“任性”，視覺效果和網站用戶體驗，還有一些需要注意的基本設計原則或規范。

讓我舉個例子：

豆瓣是中國非常著名的社區。在這個文學青年聚集的平臺上，我們可以從網頁設計中感受到一陣文學新鮮空氣。

我們來看看字體大小。頁面不同部分的標題是第24種字體。標題下面的分類文本是第14個，右邊標題是第15個，標簽文本是第12個，頁面標題和內容介紹也是第12個字體。

詳細信息頁面標題為25，文本為13.

在視覺上，豆瓣網站的整體字體太小。雖然一些用戶的吐文文本太小，但很容易看到大文本，長期閱讀會導致眼睛疲勞，但大多數用戶仍然比較識別這樣的設計。

如果用百度百科全書的第14種字體替換文字，它看起來會有一種“愚蠢的大”感覺，而不是豆瓣上的細膩和細膩。 （當然，我并不是說百度百科不是很好。畢竟，不同的網站面向不同的群體，需要有針對性。）

換句話說，豆瓣網站的可讀性相對較差，但另一方面，這種小字體給人一種整體感和精致感，這是網頁“文學迷”的一個很好的例子。與網站所面臨的群體非常一致，因此網站的整體用戶體驗仍然非常好。

這些實際上是所有設計師需要注意的。

接下來，讓我們繼續說出字體大小規范。

在當前的網頁設計中，盡管文本沒有標準字體，但設計者應該知道網頁上的第12和第14種字體非常常見。這也是由于一些客觀因素：

> ? 設計軟件。設計師使用了設計軟件，比如PS等，其中大多數是偶數，這是習慣的延續。

> ? 瀏覽器。在某些瀏覽器中，奇數會自動呈現為偶數，例如IE6。

> ? 美觀度。即使是字符數，例如12日的“中間”字，也會消除1個像素的間距，填充像素的實際寬度為11px。文本的垂直線均勻分割，平衡且美觀。

> ? 實際應用。Windows的點陣只帶有來自Vista的三個，12個，14個和16個像素的點陣。在13,15和17px處，盡管每個字的空間大1px，但點陣沒有改變。但是，它看起來很稀疏，顯示效果不佳。

但是，可以認為這些因素是適當的。例如，Douban和Zhihuo 網站在13號和15號也取得了不錯的成績，但總的來說，偶數也更“安全”。

此外，著名的網頁設計Smashing Magazine已經調查了50個流行的網頁界面，發現這些網站通常使用的標題大小為18-29px，文章的匹配文字大小為12-14px。雖然調查主要針對英文字體，但我們也可以估算和比較一些適用于漢字的規范。

結合這些不同的原因和我們理想的實踐經驗，我們總結了以下規范，可以使網頁設計更多：

1.文字的字號盡量選擇12、14、16等偶數字號，文字小不能小于12號。

2.導航文字及頭部底部文字的字號：第12號或第14號標題導航文本;菜單導航文字14-18;側欄文本編號12或14，第一級菜單使用第14級，第二級菜單使用第12級，或第一級菜單使用第12級粗調和次級菜單使用第12級;頁腳文本是12或14.

例如，AnyForWeb的Locks and Bucks官方在線商店完全符合這些規范。

特別是在導航中，標題導航No.12，導航No.16和文本大小級別也按照16-14-12的順序排列。這里的文字設計也使用不同的顏色，使圖層區別更加明顯。

清晰的網站結構由文本大小傳達。這種視覺差異允許用戶非常快速地找到所需產品，而不是在研究導航上花費太多時間，這可以有效地改善網站用戶體驗。

3.正文：標題文字24-32;標題文字16或18;正文12或14.可根據實際情況加厚。

上海自然博物館的官方網站是一個面向主要顯示器的網站。

我們可以看到以下頁面的字體大小設計基本符合上述規格，特別是以下章節中的文字大小組合，章節文字18，標題文字16粗體，正文14，層次清晰，有效凸顯關鍵點看起來很舒服。

橫幅中的大文字是一個特例。每張圖片上的文字都是根據圖片中的元素設計的。圖片和文字的結合非常整體，視覺上吸引人。

4.按鈕文字：例如，登錄，注冊頁面按鈕或其他按鈕，文本14-16，可以根據實際情況調整大小或加粗。

例如，英特爾的按鈕字體設計：

5.廣告語及特別情況則需根據文字的實際情況設計字號。

Haozhi.com是一個知識共享社區。橫幅地圖中的文本使用大型文本設計來捕獲用戶在打開網頁時的眼睛，并快速提供重要的公司信息或產品價值。

6.同一層級的字號搭配應該保持一致。例如，標題文本和內容文本大小在該部分的同一級別中的一致性。

上面分享的規范只是我們基于長期項目總結的理想實踐經驗。在實際的網頁設計中，設計師還需要根據網站的特性和具體情況靈活設計。

此外，隨著網頁設計開始普及大型文本設計風格，一些品牌網站，技術網站，活動網站和一些網站產品顯示文字字體給出了很好的視覺體驗。

在Apple官方網站上，產品顯示文本與64和32匹配。文本內容簡短，功能強大，可讀性強。同時，它具有視覺沖擊力，突出了品牌特征。

在梅賽德斯 - 奔馳的活動網站中，文本也以不同大小的文本顯示。這些單詞根據實際圖片設計了適當的字體大小。瀏覽過程中的動畫效果將展示梅賽德斯的氛圍和技術。

這些網站一般采用大文字和大文字匹配，突出品牌傳播的價值，強烈的視覺沖擊也可以留下深刻的印象，并在瀏覽過程中實現良好的用戶體驗。

這篇文章首先在這里分享，當然，還有很多優秀的網站供設計師學習和實踐，然后看看每個人。