現代網頁可讀字體的實務指南

為什麼多數網站比應有的更難閱讀

2026 年的普通網站，通常會搭載自訂字型家族、精心挑選的品牌色，以及把間距細訂到像素層級的設計系統。然而正文文字——多數訪客真正前來閱讀的內容——卻常常以 14px、低對比的灰色呈現，並使用適合標題而非段落的字體。

這不是對設計師的抱怨。這是在提醒：可讀性是不同於視覺設計的一門紀律，而兩者並不總是一致。在 hero section 中看起來俐落的字體，放到段落長度時可能令人疲乏。拍照效果很好的色彩組合，可能無法通過對比檢查。在 27 吋螢幕上運作良好的版面，到了行動裝置上可能會塌縮成狹窄欄位。

好消息是：可讀的字體排印不需要字體排印學位。它需要的是關注少數幾個影響不成比例地大的變數。

字體大小：比你想的更大

網頁上最常見的可讀性錯誤，是正文文字太小。設計師常把正文設定為 14px 或 15px，因為在桌面尺寸下「看起來乾淨」，然後忘了有相當比例的讀者是在手機上閱讀，而且經常處於不理想的光線環境。

2026 年正文文字的實用基準：

• 桌面： 最小 18px，建議 20px
• 行動裝置： 最小 16px，建議 18px

如果你習慣較小的字，這些數字會感覺偏大，但它們反映的是人們實際在螢幕上閱讀的方式。較大的文字能減少眼睛疲勞、提升理解度，也讓尚未調整瀏覽器設定的輕度視力受損讀者更容易取用你的內容。

如果你的設計系統規定使用更小的字，請在陽光下用手機測試。如果你需要瞇眼，它就太小了。

行高：給文字呼吸的空間

行高（leading）是文字行與行之間的垂直空間。太緊，文字行會糊在一起；太鬆，眼睛會失去行與行之間的連貫。

對正文文字而言，1.5 到 1.7 的行高適用於多數字體。標題可以更緊一些（1.1 到 1.3），但正文需要呼吸空間。

CSS 如下：

body {
  font-size: 18px;
  line-height: 1.6;
}

這是最容易改善可讀性的做法之一。如果你的正文文字目前是 line-height: 1.2，或使用固定像素值，今天就該改掉。

行長：比你想的更短

正文文字的最佳行長是每行 45 到 75 個字元，約 8 到 12 個字。超過 90 個字元的行，會讓眼睛很難追蹤回下一行的起點。少於 40 個字元的行，則會造成斷裂、破碎的閱讀體驗。

多數網站的問題，是讓文字橫跨整個 viewport，尤其是在桌面上。1920px 寬的螢幕可以容納每行 150 個以上字元，讀起來非常吃力。

解法是在文字容器上設定 max-width：

.prose {
  max-width: 65ch; /* 65 characters */
  margin-inline: auto;
}

ch 單位被低估了，但非常適合這件事：它會隨字體大小縮放，並大致對應到字元寬度。

對比：不只是白底黑字那麼簡單

WCAG 2.1 規定，正文文字的最低對比比例為 4.5:1（AA 等級），而增強可及性為 7:1（AAA 等級）。多數網站在紙面上符合要求，但實際上失敗，因為它們在白色背景上使用淺灰文字。

常見問題包括：

• #666666 on #FFFFFF (4.54:1, barely passes)
• #777777 on #FFFFFF (4.47:1, fails)
• Any shade lighter than #767676 on white (fails)

如果你的設計系統把「text-secondary」指定為淺灰色，請測試它。WebAIM contrast checker 是最快的驗證方式。

深色模式會讓這件事更複雜。純黑背景上的純白文字會造成 halation（發光效果），比起深灰背景上的微偏白文字更難閱讀。較好的做法如下：

@media (prefers-color-scheme: dark) {
  body {
    background: #1a1a1a;
    color: #e4e4e4;
  }
}

字體選擇：預設字型比你想的更好

自訂網頁字型無所不在，但它們有取捨。它們會增加延遲、提高頁面重量，而且如果沒有仔細載入，可能會阻塞渲染。對正文文字而言，系統字型往往是更好的選擇。

2026 年一組穩健的系統字型堆疊：

body {
  font-family: system-ui, -apple-system, 'Segoe UI', 
               Roboto, Helvetica, Arial, sans-serif;
}

這會在 macOS/iOS 上使用 San Francisco、在 Windows 上使用 Segoe UI、在 Android 上使用 Roboto——它們都是可讀性高、由專業設計的字體，且能立即載入。

如果你確實要為正文文字使用自訂字型，請選擇為長篇閱讀設計的字體，而不是展示用途的字體。避免：

• 在正文中使用超細或超粗字重
• 使用窄體或寬體變體
• 使用 x-height（小寫字母高度）偏低的字型

在定案前，請以段落長度測試你選擇的字體。

響應式字體排印：流動的字級比例

固定字體大小無法在不同裝置間良好縮放。在桌面上舒適的 20px 正文字體，到了行動裝置上可能顯得過大。

流動字體排印使用 clamp()，讓字體大小在最小值與最大值之間平滑縮放：

body {
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
}

這會從小螢幕上的 16px 縮放到大螢幕上的 20px，中間平滑插值。它比 media query 斷點更精細，也能適應任何 viewport 寬度。

若要建立完整的字級比例（標題、正文、小字），像 Utopia 這類工具可以依據你的限制生成流動比例。

段落間距與文字對齊

兩個重要的小細節：

1. 段落間距： 在段落之間加入空間（margin-block-end: 1em），或使用首行縮排（text-indent: 1.5em），但不要兩者同時使用。多數網頁內容使用間距。

1. 文字對齊： 靠左對齊（或 RTL 語言靠右對齊）幾乎總是比左右對齊更易讀；除非啟用斷字，否則左右對齊會造成不均勻的字距。置中的正文文字很難閱讀，應保留給短段落使用。

在實務中測試可讀性

可讀性並非完全客觀，但你可以測試它：

• 在不同光線條件下，用手機閱讀自己的內容
• 執行 Lighthouse accessibility audit，找出對比與字體大小問題（可參考如何在不驚慌的情況下閱讀 Lighthouse report）
• 請一位 50 歲以上的人在不調整設定的情況下閱讀頁面
• 檢查文字密集頁面的 bounce rate 分析資料——如果人們很快離開，可讀性可能是因素之一

如果你的內容很難閱讀，人們就不會讀。事情就是這麼簡單。

實務上會長什麼樣子

2026 年一套可讀的正文文字樣式可能如下：

.prose {
  font-family: system-ui, sans-serif;
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.25rem);
  line-height: 1.6;
  color: #1a1a1a;
  max-width: 65ch;
  margin-inline: auto;
}

.prose p {
  margin-block-end: 1.25em;
}

@media (prefers-color-scheme: dark) {
  .prose {
    background: #1a1a1a;
    color: #e4e4e4;
  }
}

這大約用十幾行 CSS，就涵蓋了字體大小、行高、行長、對比與響應式縮放。它不刺激，但有效。

何時打破規則

這些指引適用於正文文字——人們為了取得資訊而閱讀的段落。標題、圖說、UI 標籤與行銷文案有不同限制，可以彈性調整這些規則。

但如果有人來到你的網站，是為了閱讀一篇文章、一頁文件或一段產品描述，可讀的字體排印就不是選配，而是基本期待。