網頁字體排版與配色指南：中文字型、文字對比與可讀性怎麼做

很多官網看起來「很有設計感」，實際上卻很難讀：淺灰色的細字放在米白背景上、手機上的內文小到要放大、標題用了花俏的書法字型，結果訪客還沒看懂你在賣什麼就離開了。網頁字體排版與配色，表面上是美感問題，本質上是資訊能不能被順利讀進去的問題。

這篇文章從可讀性的研究出發，整理中文網站在字型選擇、字級行高、色彩對比與字型載入上的具體做法，讓你在跟設計師溝通、或驗收新網站時，有一套可以檢查的標準。

先分清楚：易辨性、可讀性、理解度

Nielsen Norman Group 的 Jakob Nielsen 把「讓使用者讀懂文字」拆成三個層次：

層次	問的問題	主要由誰決定
易辨性（Legibility）	字看不看得清楚、能不能分辨	字型、字級、對比等視覺設計
可讀性（Readability）	句子與用詞的難易度	文案寫作
理解度（Comprehension）	讀完能不能正確理解並採取行動	內容與資訊架構

這篇處理的主要是第一層：易辨性。如果字都看不清楚，後面兩層寫得再好也沒用。文案層面的做法，可以接著閱讀網站文案與 UX Writing。

NN/g 對易辨性的建議很直接：預設字級要夠大、文字與背景要有強烈對比、背景保持單純（避免花紋或照片直接壓字），並避開形狀特殊、模仿手寫或哥德體的字型。

中文字型怎麼選：系統字型 vs. 網路字型

中文網站與英文網站最大的差別，在於字型檔案的大小。英文字型只需要幾百個字元，中文常用字就有數千個，一套完整的中文網路字型可能好幾 MB，直接載入會嚴重拖慢網站。

常見的選擇有兩種：

系統字型：直接使用使用者裝置內建的字型，例如 Windows 的微軟正黑體、Apple 裝置的蘋方。完全不需要下載，速度最快，缺點是不同裝置看到的字型略有差異。
網路字型：例如 Google Fonts 上的 Noto Sans TC、Noto Serif TC。視覺一致，但必須處理載入效能。

Google Fonts 在推出日文支援時的官方部落格說明，他們把中日韓這類大字集字型依字元使用頻率切成許多小片段，搭配 CSS 的 unicode-range，讓瀏覽器只下載頁面實際用到的片段；以日文為例，官方表示這讓使用者下載的位元組比整套字型少了 80%。這也是為什麼中文網站若要使用網路字型，通常建議透過有切片機制的服務，或自行做子集化，而不是把整套字型檔丟上主機。

我們的實務建議是：內文用系統字型，標題或品牌字再考慮網路字型。這樣大部分文字能瞬間顯示，品牌感則交給少量標題來建立。

字型載入：避免文字晚出現與版面跳動

web.dev 的〈Best practices for fonts〉整理了幾個關鍵做法：

使用 WOFF2 格式：壓縮率最好、瀏覽器支援最廣
子集化並搭配 unicode-range：只包含需要的字元；同時確認字型授權允許子集化與自行託管
減少字型數量：每多一種字重就是多一個檔案；系統字型完全不用下載
依優先順序選擇 font-display：swap 讓文字立即以後備字型顯示，但切換時可能跳動；optional 可避免跳動，但網路字型不一定會出現。web.dev 也提到可以混用，例如品牌標題用 swap、內文用 optional
圖示改用 SVG：圖示字型在載入失敗時容易出現亂碼方塊，也較不利無障礙

字型載入策略會直接影響 Core Web Vitals 的 LCP 與 CLS，相關的整體做法可以參考網站速度與圖片優化。

字級、行高與行寬：中文排版的基本尺寸

以下是我們在台灣企業官網常用的起始值，實際仍要依字型與版面微調：

內文字級：桌機約 16–18px，手機不小於 16px；中文筆畫多，太小的字容易糊成一團
行高：中文內文常見 1.7–1.9 倍，比英文略寬鬆，讓筆畫密集的方塊字有呼吸空間
行寬：桌機每行約 30–40 個中文字較舒適，太長的行讀到行尾容易找不回下一行
段落間距：段與段之間要有明顯空白，不要只靠換行
對齊：中文內文以靠左對齊最穩定；左右對齊在窄螢幕上容易出現不自然的字距

WCAG 2.2 的成功準則 1.4.12「文字間距」（AA 級）要求：當使用者自行把行高調到字級 1.5 倍、段落間距調到 2 倍、字距與詞距加大時，內容不能因此被裁切或重疊。這代表版面不要用寫死的高度把文字框住，尤其是按鈕與卡片。

配色與對比：好看之前先確保看得到

WCAG 2.2 成功準則 1.4.3「對比（最低）」是最常被引用的標準（AA 級）：

文字類型	最低對比值
一般文字	4.5 : 1
大字（18pt 以上，或 14pt 以上粗體）	3 : 1

W3C 的說明特別提到，1pt 約等於 1.333px，所以「大字」大約是 24px 一般字重或 18.5px 粗體；而且門檻是硬標準，算出來 4.499 : 1 就是不及格。

常見的不合格情境包括：淺灰色說明文字、白字壓在亮色照片上、品牌色是亮黃或淺綠卻拿來當按鈕文字底色。改善方式：

建立色彩系統：主色、輔助色、中性色各有 5–9 個深淺階，事先測好哪些組合可以放文字
照片上的文字：加半透明深色遮罩，或把文字移到照片旁邊
品牌色太淺時：保留品牌色當作大面積裝飾，文字與按鈕改用同色系較深的版本
不要只用顏色傳遞資訊：例如錯誤訊息除了紅色，也要搭配圖示或文字說明

更完整的無障礙要求，可以參考網站無障礙設計（WCAG 2.2）。

驗收清單：新網站上線前檢查這幾項

手機上內文是否不放大也能舒服閱讀
所有文字與背景的對比是否達到 4.5 : 1（大字 3 : 1）
字型種類是否控制在 2 種以內、字重是否只載入實際用到的
網路字型載入時，頁面是否明顯跳動
放大到 200% 或調大行高時，文字是否被裁切
深色模式或照片背景上的文字是否仍清楚

常見問題

中文網站一定要用 Google Fonts 嗎？

不一定。系統字型（如微軟正黑體、蘋方）不需下載、速度最快，適合大部分內文。如果品牌需要統一視覺，可以只在標題使用網路字型，並選擇有切片載入機制的服務，兼顧美感與速度。

灰色字看起來比較高級，可以用在內文嗎？

可以用灰色，但要確保與背景的對比至少 4.5 : 1。很多「高級感」的淺灰字其實不合格，在戶外陽光下或年長者的手機上幾乎看不見。可以用深灰取代淺灰，視覺一樣柔和但清楚得多。

品牌色很淺，按鈕要怎麼設計？

可以保留品牌色作為背景大色塊或插圖點綴，按鈕則改用同色系較深的版本，或改成深色文字配淺色按鈕底。重點是按鈕文字與底色要通過對比標準，同時與周圍元素有明顯區隔。

結語：好讀，才有機會被記住

字體與配色是品牌識別的一部分，但在網站上，它首先必須服務「閱讀」。先用對比標準、字級行高與載入策略把基礎打穩，再談風格與個性，網站才會既好看又好用。想了解官網從規劃到上線的完整流程，可以回到企業官網設計完整指南。

如果你正在規劃改版，或希望網站字型與色彩能和品牌形象一致，網軍行銷的品牌識別設計服務可以協助建立一套適合網頁使用的字型與色彩規範。

參考資料

Nielsen Norman Group，Legibility, Readability, and Comprehension: Making Users Read Your Words：https://www.nngroup.com/articles/legibility-readability-comprehension/
W3C WAI，Understanding Success Criterion 1.4.3: Contrast (Minimum)：https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html
W3C WAI，Understanding Success Criterion 1.4.12: Text Spacing：https://www.w3.org/WAI/WCAG22/Understanding/text-spacing.html
web.dev，Best practices for fonts：https://web.dev/articles/font-best-practices
Google Developers Blog，Google Fonts launches Japanese support：https://developers.googleblog.com/google-fonts-launches-japanese-support/