● 移動網頁字體設計規范

1.1 正文字體應該在16px左右

在選擇默認移動字體大小時，16px左右清晰易讀，可以應用于大多數段落、標簽、菜單和列表設置的大小。在保持自然距離時，手機上的正文與印刷好的書本文字一樣可讀。

如果頁面交互比較復雜、字體本身已經易于閱讀但占據過多空間，請考慮縮小尺寸。

如果你覺得在頁面上字體的大小存在主觀性，不妨看看下一個更嚴謹的指南。

1.2 文本輸入大小至少應為16px

移動設備上查看的網站或應用程序，應使用至少16px的字體大小。如果文本輸入的字體小于該值，iOS瀏覽器會放大文本輸入的左側，遮擋右側并迫使用戶在使用文本框后手動縮小。

1.3 次要文本應該比段落文本小2號左右

對于次要文本，例如較小的標簽、標題等，可以使用小幾個號的尺寸，例如13px或14px。只減小一種字體大小，會很容易與普通文本混淆。此外，當文本不太重要時，對其進行樣式設置可以清楚地傳達次要的重要性。例如，次要文本經常使用較淺的灰色字體。

1.4 在設備上查看字體大小

在筆記本電腦屏幕上設計移動應用程序的感覺與手機拿在手上看時的感覺完全不同，因此選擇移動字體大小的黃金準則是在實際設備上查看。

1.5 熟悉Material Design和iOS標準

Material Design的默認字體為16px的Roboto，輔助字體大小為14px。

iOS的默認字體大小為17px的SF Pro，輔助字體大小為15px。

Pixso資源社區內置海量國內外大廠的設計系統及組件庫，包括TDesign、Arco Design、Ant Design、Material design等優秀設計規范，所有文本樣式均可一鍵調用，不僅可以一鍵保存為資源，還可搭配起來重復添加為組件資源共享到團隊，實現快速復用。

● 桌面網頁字體設計規范

在為桌面網站或Web應用程序選擇基本尺寸時，可以將大多數設計分解為以下兩種類型之一：

2.1 大量文本頁面

對于文字較多的頁面，需要更大的字體。網站的文本應該像一本制作精良的書籍一樣可讀。如果人們長時間閱讀，大尺寸的字體可以減輕眼睛的疲勞。

如下圖所示，每種字體都是不同的：

? 16px – 文本密集頁面的絕對最小值。

? 18px - 更易于閱讀的字體大小。

? 20px+ - 一開始可能會覺得很大，但用作大標題更醒目。

2.2 交互復雜頁面

對于交互復雜的頁面，較小的文本大小是完全可以接受的。事實上，根據用戶一次接收的數據量，即使是18px的文本也會大得令人不舒服。在查看電子郵件收件箱、查看顯示數據等任何需要掃描閱讀的應用程序時，很難找到持續的18px文本段落。相反，14px-16px是常態。

但頁面不會只有一種字體大小，次要的內容可能會更小，更重要的內容可能會更大，如標題和副標題等。不同尺寸的字體混在一起如同大雜燴，需要設計師精心排版。

對于任何交互復雜的頁面，字體大小由自上而下的規則驅動，而不是每段文本的特定需求和之間的相互作用。如2021年日歷&計劃表模板所示：

? 節日名稱

采用10px中等大小，考慮到他們需要在只有1440px寬的屏幕上放置 7 列，而且許多事件都很短。這是一個理想的字體大小選擇，時間名稱的字體較小的話易讀性會受到影響，較大則會被表格頻繁地被切斷。設計是一門權衡的藝術，設計師要根據具體場合做出取舍。

? 分類標簽

“Work”、“Life”等的字體大小為：8px。

? 日期

日期為24px。日期作為日歷的重點，采用了較大的尺寸。

在設計交互復雜的桌面網站時，需要根據具體情況修改文本樣式。其次，要保持字體整體視覺的一致性。

2.3 盡可能少的字體尺寸

同一個頁面的字體尺寸數量應不多于四種。如果使用過多的字體尺寸，頁面會看起來很繁雜。

? 標題字體大小

標題是頁面上最大的字體。如果有標題和章節標題，可以使用兩種不同的字體大小。

? 默認字體大小

這是頁面上最常見的字體大小，應該用于所有正文文本以及大多數控件，如文本框、下拉列表、按鈕和菜單。初學者在這里容易犯的錯誤是對同種層級的正文使用多種字體大小。

? 次要字體大小

通常比默認字體小2px左右，常用于網站不太重要的細節，如支持信息、統計數據和字幕等。

? 標簽/按鈕字體大小

為了使信息層次分明，需要一種比二級字體更柔和的三級字體。當為標簽或按鈕使用大寫字母時，由于大寫字母的視覺重量增加，文本應該使用稍小的尺寸。所以這第四種字體大小有點像通配符。