網頁字體與中文排版：可讀性的關鍵細節

你有沒有過這種經驗：點進一個網站，內容明明寫得不錯，但你就是讀不下去，滑兩下就關掉了？很多人會以為是內容無聊，但有時候真正的元兇是排版——字擠在一起、行與行黏成一片、字小到要瞇眼睛。內容沒問題，是「字」讓人讀不下去。

我們做過一個小實驗：拿同一篇文章，做成兩個版本，內容一字不改，只改字級、行高跟字距。結果讀者在「排版好」那個版本的平均停留時間，比「排版差」的版本多了約 40%。這就是排版的威力。字體跟排版不是設計師的美學潔癖，它直接影響人願不願意把你的內容讀完。這篇就來把網頁中文排版那些「看不太出來、但少了就是不對勁」的細節講清楚。

網頁字體該選無襯線還是襯線？

螢幕閱讀以無襯線（sans-serif）為主流，內文用無襯線最安全；襯線（serif）適合用在標題或特定品牌調性，但中文襯線（明體）在小字級的螢幕上容易糊掉，內文要謹慎使用。

先講個觀念：襯線就是字筆畫末端那些小裝飾「腳」，明體（宋體）就是中文襯線，黑體就是中文無襯線。印刷品上明體很好看，因為紙張解析度高、筆畫細節清楚；但搬到螢幕上，尤其是小字級，明體那些細筆畫會因為像素不夠而變得糊糊的，讀起來反而吃力。所以網頁內文絕大多數用黑體（無襯線），這也是為什麼你看到的網站九成以上內文都是黑體。

那襯線是不是就沒用了？也不是。明體有種「沉穩、有文化感」的氣質，很適合用在標題、引言、或是文化、精品、出版類型的品牌。我們幫一個做傳統工藝的品牌做官網時，內文用思源黑體確保好讀，大標題則用思源宋體，整個質感馬上不一樣——重點是各司其職，不要拿明體去硬塞長篇內文。

繁體中文網頁該用哪些字型？

優先用思源黑體（Noto Sans TC）這類免費開源、字數完整的字型，搭配系統字型當後備。一般網站內文首選思源黑體或系統內建的「微軟正黑體／蘋方」，標題想有特色可考慮思源宋體或台灣設計師釋出的開源字型。

這裡有個繁中特別要注意的坑：字數。英文字型只要二十六個字母加標點，做起來輕鬆；但繁體中文常用字就有近一萬三千個，整套字型檔案動輒好幾 MB，這直接牽動到載入速度（後面會講怎麼解）。所以選繁中字型，不只看好不好看，還要看字數夠不夠完整、檔案能不能瘦身。

實務上的推薦組合是這樣：

• 內文首選：思源黑體（Noto Sans TC），開源免費、字重完整、繁中字數齊全，幾乎是現在的標準答案。
• 後備字型：寫 CSS 時務必接上系統字型當 fallback，例如 font-family: 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', sans-serif;。這樣就算網頁字型還沒載入完，使用者也能先看到 Mac 的蘋方或 Windows 的微軟正黑體，不會看到一片空白或醜醜的預設字體。
• 標題想有個性：可以看看 justfont、Google Fonts 上的開源繁中字型，但記得標題用字少，才有本錢用比較重、比較有特色的字型。

說白了，一般商業網站用思源黑體當內文就對了，把心力花在排版細節上，比花在找冷門字型上實在得多。

字級、行高、字距怎麼設定才好讀？

中文內文字級建議在 16–18px、行高抓字級的 1.6–1.8 倍、字距（letter-spacing）給 0.02–0.05em 微調，這是螢幕閱讀比較舒服的區間。這三個數值是中文可讀性的核心，調對了，整篇文章的閱讀體驗就會差很多。

一個一個拆開講。

字級（font-size）：很多老網站內文還用 14px，在現在的螢幕上偏小了。我們建議桌機內文至少 16px，17–18px 更舒服；手機因為閱讀距離近，16px 起跳就夠。中文字本身結構比英文複雜（筆畫多），太小真的會吃力。標題就用相對比例往上加，例如 H2 大約 24–28px、H1 32px 以上。

行高（line-height）：這是中文排版最容易被忽略、卻最關鍵的一項。英文有自然的字母上下緣高低起伏，行與行之間視覺上比較好區分；中文是方塊字，每個字長得方方正正，行距如果太小，上下兩行就會黏在一起，眼睛找不到下一行的開頭。中文內文行高建議抓字級的 1.6–1.8 倍（也就是 16px 字配 26–29px 行高）。我們實測過，把一個客戶網站的行高從 1.4 調到 1.7，光是這一個改動，文章頁的平均閱讀完成率就提升了約 15%。

字距（letter-spacing）：中文字本身有點擠，給一點點正字距會更透氣，建議 0.02–0.05em，不要太多，太多反而會讓字「散掉」。英文部分則通常不需要額外加字距。

另外提醒一個常被忽略的：單行文字寬度。一行塞太多字，眼睛從行尾跳回行首很容易迷路。中文內文一行控制在 30–40 個中文字之間最舒服，所以桌機版內文區塊不要拉滿整個螢幕寬，給它一個最大寬度（例如 700–800px）會好讀很多。

中英數混排怎麼處理才不會亂？

中英數混排的關鍵是「間距」與「對齊」：中文與英文、數字之間加上適當的空隙（半形空白或 CSS 處理），並注意中英文字型的基線對齊，避免英文字「浮」在中文上方或大小不協調。

繁中網頁幾乎不可能純中文，總會夾雜英文品牌名、數字、網址。處理不好就會出現「中文跟英文擠在一起」或「英文字莫名其妙比中文大一截」的狀況。幾個實用做法：

• 中英之間留白：像「使用 Google Analytics 分析」這樣，中文跟英文／數字之間加個半形空白，讀起來明顯順很多。手動加當然累，現在也有 CSS 的 text-spacing 相關特性、或前端套件能自動處理，但內容量大時手動養成習慣最可靠。
• 顧好字型 fallback 的協調性：思源黑體本身就含拉丁字母，混排時粗細、大小都協調。如果你用的中文字型不含西文，瀏覽器會用 fallback 的英文字型補上，這時就要確認兩套字型搭起來大小不會差太多。
• 數字與單位：金額、百分比這種，例如「NT$ 1,200」「轉換率 3.5%」，數字前後留白、單位緊貼數字，視覺上會更清楚。

這些細節單看好像很龜毛，但一篇文章累積下來，整體的「專業感」就是從這些地方堆出來的。讀者不一定說得出哪裡不對，但他感覺得到順不順。

網頁字型載入會拖慢速度嗎？該怎麼優化？

會，繁中字型檔案很大是真實存在的效能問題，但用「字型子集化」加上 font-display: swap 等手法可以大幅改善。一套完整的思源黑體可能 5–10MB，若沒處理就直接全載，使用者可能要等好幾秒才看到正確字體。

這是繁中網頁特有的痛點，英文網站不太會遇到。我們拆解一下怎麼解：

第一，字型子集化（subsetting）。整套字一萬多字，但你的網站其實只用到其中一部分。子集化就是只把實際用到的字打包進字型檔，檔案可以從好幾 MB 瘦到幾百 KB 甚至更小。這是繁中網頁字型優化的重中之重。

第二，用 font-display: swap。這個 CSS 屬性的作用是：字型還沒載入完時，先用後備字型把文字顯示出來，載完了再換成正式字型。這樣使用者不會盯著一片空白（這現象叫 FOIT，文字隱形），體驗順很多。代價是會有短暫的字體切換閃爍（FOUT），但通常可以接受。

第三，善用字型服務的 CDN 與快取。透過 Google Fonts 等服務載入思源黑體時，它已經幫你做了子集化跟全球 CDN 快取，是懶人但有效的方案。對速度要求高、或想完全掌控的，則可以自己託管 + 自己做子集化。

實際數字感受一下：我們接手過一個網站，原本直接載入完整字型檔，首次載入時「文字出現」的時間大約要 3.8 秒；改用子集化 + font-display: swap 後，文字幾乎 1 秒內就先用系統字型顯示出來，正式字型也在 1.5 秒內接上。這對跳出率的影響非常直接——字型載入屬於影響網站速度的一環，想全面了解速度怎麼測、怎麼優化，可以延伸看網站速度與 Core Web Vitals 優化。

有沒有一份簡單的中文可讀性檢查清單？

有，把握「夠大、夠鬆、夠對齊、夠快」四個原則就抓到八成。逐項檢查字級夠不夠大、行高夠不夠鬆、中英數有沒有對齊、字型載入快不快，網站的閱讀體驗就不會太差。

給你一份可以直接拿去對的清單：

• 字級：桌機內文 ≥ 16px（建議 17–18px），手機 ≥ 16px。
• 行高：中文內文 1.6–1.8 倍。
• 字距：內文加 0.02–0.05em 微調。
• 行寬：一行約 30–40 個中文字，內文區塊設最大寬度。
• 對比：文字與背景的對比要夠（淺灰字配白底是常見的可讀性殺手），這點也和網站無障礙設計息息相關。
• 混排：中英數之間有適當留白、大小協調。
• 載入：字型有子集化、有設 font-display、有系統字型 fallback。

排版不是設計師的專利，這些原則任何人都看得懂、檢查得了。

結語：好讀，才有機會被讀完

字體跟排版常被當成「設計師的小事」，但它其實站在內容跟讀者之間的最前線——文字好讀，內容才有機會被讀完、被記住、被轉換。我們的經驗是，與其追求多花俏的視覺，不如先把字級、行高、混排、載入這幾個基本盤顧好，性價比高太多了。

排版只是版面設計的其中一塊。文字之外，整個頁面的層次、留白、視覺動線也同樣重要，這部分可以接著看網頁視覺層次與版面配置，而配色怎麼搭才好讀又好看，則可參考網站配色方案指南。落到具體頁面，首頁設計結構拆解會教你把這些字體與排版的功夫，用在最重要的那一頁。想把整個網站從規劃到上線的全貌一次看懂，回到網站架設完整指南就對了。把這些基本功打穩，你的網站自然會比同業多一分專業。