為網頁專案挑選、搭配及實作字型。當使用者提及「字型搭配」、「該用哪種字型」、「行高」、「響應式排版」、「網頁字型載入」、「字型層級」、「可變字型」、「FOUT/FOIT」、「字級比例」或「文字難以閱讀」時觸發。亦適用於在系統字型與網頁字型之間做選擇、最佳化字型載入效能，或設計易讀的長篇文章內容。涵蓋可讀性評估、CSS 實作及效能最佳化。如需整體 UI 設計系統，請參閱 refactoring-ui。如需戲劇化的字型體驗，請參閱 top-design。
網頁排版
挑選、搭配及實作網頁字型的實用指南。最好的排版是隱形的——讓讀者沉浸於內容，而非注意排版本身。
核心原則
排版是內容的聲音。 你選擇的字型在讀者閱讀任何文字之前就已設定基調——法律網站不該顯得俏皮，兒童應用程式不該顯得商業化。遵循「清澈酒杯」原則：排版應像晶瑩剔透的酒杯，將焦點保持在酒（內容）上，而非杯子（字型）。
評分
目標：10/10。 分數 = 滿足 10 項快速診斷中多少項。區間：9-10 = 內文 16px 以上、行長低於 75 字元、行高 1.4 以上、層級對比清晰、字型總載量低於 200KB、設定替代字型、經得起 200% 縮放；5-6 = 可讀但缺少行長控制、替代字型或縮放彈性；<=3 = 內文小於 16px、無行長限制、FOIT 或層級難以閱讀。務必說明目前分數及哪些診斷項目未通過。
兩種字型情境
所有排版都屬於兩類：
| 情境 | 目的 | 優先事項 |
|---|---|---|
| 瞬間字型 | 標題、按鈕、導覽、標誌 | 個性、衝擊力、辨識度 |
| 長伴字型 | 內文、文章、文件 | 可讀性、舒適度、耐久性 |
主力字型擅長「長伴字型」——在不同尺寸、粗細及情境中都能勝任，且不引人注意。範例：Georgia、Source Sans、Freight Text、FF Meta。
排版框架
1. 我們如何閱讀
核心概念： 理解閱讀機制是每個排版決策的基礎。眼睛並非平滑掃描——而是以跳躍方式進行。
為何有效： 對抗這些機制會產生摩擦，驅離讀者；順應它們則能讓讀者更快吸收內容，減少疲勞。
關鍵見解：
- 跳視 — 眼睛以 7-9 個字元為單位跳躍；行長與字距直接影響跳視效率
- 凝視 — 眼睛短暫停留以吸收內容；密集或間距不佳的文字會減慢閱讀
- 字詞形狀（bouma） — 熟練讀者辨識的是字詞輪廓，而非個別字母
- 易辨性 vs. 可讀性 — 易辨性指字母能否被區分（字型問題）；可讀性指文字能否長時間舒適閱讀（排版問題：尺寸、間距、行長）。易辨的字型仍可能因排版不佳而難以閱讀
產品應用：
| 情境 | 應用 | 範例 |
|---|---|---|
| 長篇內容 | 最佳化持續舒適度 | 內文 16-18px、行高 1.5-1.7、行長 45-75 字元 |
| 儀表板 UI | 最佳化快速掃描 | 明確的粗細層級、資料群組間的空白 |
| 行動閱讀 | 考量距離與光線 | 較大內文（17-18px）、更高對比 |
程式碼範例：
.prose {
font-size: 1.125rem; /* 18px */
line-height: 1.6;
max-width: 65ch; /* ~45-75 字元 */
}
參閱：references/typeface-anatomy.md 當你需要命名字母部件（x-height、counter、aperture）或將字型歸類以證明選擇時。
2. 評估字型
核心概念： 字型必須通過技術、結構及實用性檢查，才能納入專案。漂亮的樣本在螢幕上可能失敗。
為何有效： 螢幕渲染、可變頻寬及多樣裝置帶來了印刷從未面對的限制。嚴謹的評估可避免專案中途昂貴的字型更換。
關鍵見解：
- 技術品質 — 一致的筆畫粗細、文字區塊均勻的視覺顏色、良好的字距配對（AV、To、Ty）、完整的字元集、多種粗細（至少：標準、粗體、斜體）
- 結構評估 — 充足的 x-height（更好的螢幕可讀性）、開放的 counter 與 aperture（a、e、c）、區分明顯的字母（Il1、O0、rn vs. m）
- 實用需求 — 在目標螢幕上以實際使用尺寸測試、檢查檔案大小、確認授權
- 真實內容測試 — Lorem ipsum 會隱藏字元頻率、字詞長度及段落節奏的問題
產品應用：
| 情境 | 應用 | 範例 |
|---|---|---|
| 內文選擇 | 優先考量 x-height、開放 counter、均勻顏色 | Source Serif Pro 優於 Didot 用於長篇閱讀 |
| UI/系統文字 | 優先考量小尺寸易辨性及粗細範圍 | Inter 或 SF Pro 用於介面元素 |
| 多語言產品 | 確認目標語言的字符覆蓋率 | Noto Sans 用於廣泛的 Unicode 支援 |
程式碼範例：
/* 在每個實際使用尺寸進行壓力測試 */
body { font-size: 16px; }
.caption { font-size: 0.75rem; }
h1 { font-size: 3rem; }
道德界線： 在出貨前務必確認網頁授權——桌面/印刷授權通常不涵蓋網頁嵌入，未經授權使用會產生實際法律責任。
參閱：references/evaluating-typefaces.md 當審查候選字型時——完整品質檢查清單、紅旗表格及需檢查的結構標準。
3. 選擇字型
核心概念： 從目的出發，而非美學。內容的語氣、閱讀情境及持續時間應驅動選擇——而非個人偏好或潮流。
為何有效： 以目的為導向的選擇感覺理所當然而非隨意，且能通過利害關係人審查，因為可以用理由而非品味來證明。
關鍵見解：
- 先定義任務 — 內文、標題及 UI 元素可能需要不同字型
- 語氣與內容匹配 — 財務報告需要不同於烘焙菜單的語氣
- 檢查字型家族 — 確認所需粗細、斜體及樣式都存在再決定
- 安全起點 — 內文襯線：Georgia、Source Serif Pro、Charter；內文無襯線：系統字型、Source Sans Pro、Inter、IBM Plex Sans
產品應用：
| 情境 | 應用 | 範例 |
|---|---|---|
| 內容密集型網站 | 主力襯線或無襯線用於持續閱讀 | Source Serif Pro 或 Charter 用於文章 |
| SaaS 儀表板 | 乾淨的無襯線搭配強烈表格數字 | Inter 或 IBM Plex Sans 用於資料豐富的 UI |
| 無障礙優先 | 專為最大易辨性設計的字型 | Atkinson Hyperlegible 用於視障使用者 |
程式碼範例：
/* 網頁字型搭配系統替代字型堆疊 */
body {
font-family: 'Source Sans Pro', -apple-system,
BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
參閱：references/evaluating-typefaces.md 當縮小候選名單或權衡免費與付費字型時——並排比較方法及品質選項清單。
4. 搭配字型
核心概念： 成功的搭配創造明確對比——字型應明顯不同，而非令人困惑地相似。最多一到兩種字型。
為何有效： 清晰的結構對比（襯線 + 無襯線、細 + 粗、人文主義 + 幾何）賦予每種字型明確角色。過於相似的字型會產生無目的的張力——讀者感覺「不對勁」卻不知原因。
關鍵見解：
- 對比類型 — 結構（襯線 + 無襯線）、粗細（細 + 標準）、時代（人文主義 + 幾何）、寬度（窄 + 正常）
- 同設計師策略 — 同一設計師的字型常共享和諧的 DNA（FF Meta + FF Meta Serif）
- 超級家族 — 設計為一起使用的家族消除猜測（Roboto + Roboto Slab）
- 搭配失敗 — 兩個幾乎相同的字型、兩者爭奪注意力、一個字型壓倒另一個
產品應用：
| 情境 | 應用 | 範例 |
|---|---|---|
| 編輯型網站 | 襯線標題 + 無襯線內文 | Playfair Display + Source Sans Pro |
| 文件 | 等寬程式碼 + 同家族無襯線散文 | IBM Plex Mono + IBM Plex Sans |
| 極簡品牌 | 單一家族搭配粗細變化 | Inter 以不同粗細及尺寸呈現 |
程式碼範例：
/* 經典襯線 + 無襯線搭配 */
h1, h2, h3 { font-family: 'Playfair Display', Georgia, serif; }
body { font-family: 'Source Sans Pro', -apple-system, sans-serif; }
參閱：references/pairing-strategies.md 當挑選第二種字型時——經過驗證的組合、對比類型表格及同設計師/超級家族捷徑。
5. 排版度量
核心概念： 三項度量——字級、行長及行高——構成舒適閱讀的基礎。把這些設定正確比選擇字型更重要。
為何有效： 這些度量控制眼睛如何橫向及縱向追蹤文字：最佳行長符合跳視模式、足夠行高防止眼睛在回掃時跳到錯誤行、足夠尺寸使字母在螢幕上可辨識。
關鍵見解：
- 內文尺寸 — 最小 16px；閱讀密集型網站建議更大（18px）；行動使用者拿手機的距離比設計師假設的更遠
- 行長（measure） — 理想 45-75 字元，最佳 66；使用
ch單位或max-width限制 - 行高 — 內文 1.4-1.8；行長越長需要越大；標題需要更緊（1.1-1.25）
- 標題比例 — 層級間一致的比例（1.2-1.5）創造層次而不極端
產品應用：
| 情境 | 應用 | 範例 |
|---|---|---|
| 部落格/文章 | 65ch 最大寬度、1.6 行高 | .prose { max-width: 65ch; line-height: 1.6; } |
| 儀表板 | 較緊行高用於密集資料 | 表格儲存格與標籤使用 line-height: 1.3; |
| 登陸頁面 | 寬鬆尺寸便於掃視 | font-size: 1.25rem; line-height: 1.7; |
程式碼範例：
.prose {
font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
line-height: 1.6;
max-width: 65ch;
}
/* 依情境設定行高 */
h1, h2 { line-height: 1.1; } /* 標題：1.1-1.25 */
.ui-text { line-height: 1.35; } /* UI：1.3-1.4 */
.body-text { line-height: 1.6; } /* 內文：1.5-1.7 */
參閱：references/responsive-typography.md 當撰寫 clamp() 公式時——如何推導最小值/偏好值/最大值及基於視口的度量策略。
6. 建立字型層級
核心概念： 層級告訴讀者什麼最重要。透過尺寸、粗細及顏色的受控變化來創造區別——但不要同時拉動所有三個槓桿。
為何有效： 層級間刻意且一致的差異讓讀者一眼掌握頁面結構；沒有層級則所有元素互相競爭，無一勝出。
關鍵見解：
- 三個槓桿 — 尺寸、粗細、顏色；相鄰層級間變化一或兩個，絕不三個全變
- 瞇眼測試 — 瞇眼看頁面仍應能看出層級
- 一致的比例 — 標題層級間使用模組化比例（1.2-1.5）創造節奏；任意尺寸則製造雜訊
- 不要跳級 — 從 H1 跳到 H3 會破壞讀者的心智模型
產品應用：
| 情境 | 應用 | 範例 |
|---|---|---|
| 內容頁面 | 4-5 層級使用尺寸 + 粗細 | H1 2.5rem/700、H2 1.75rem/600、內文 1rem/400 |
| 儀表板 | 資料與標籤使用粗細 + 顏色 | 粗體 #111 數值、標準 #666 標籤 |
| 表單 UI | 標籤使用輕微粗細變化 | 標籤：600 粗細、輸入框：400 粗細 |
程式碼範例：
h1 { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); font-weight: 700; color: #111; }
h2 { font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); font-weight: 600; color: #111; }
body { font-size: 1rem; font-weight: 400; color: #333; }
.secondary { font-size: 0.875rem; color: #666; }
/* 標題：上方間距大於下方 */
h1, h2, h3 { margin: 1.5em 0 0.5em; line-height: 1.2; }
道德界線： 不要將費用、免責聲明或退出選項埋藏在小型或低對比字型中，以貶低使用者需要看到的資訊——隱藏重要資訊的層級是將排版武器化來對付讀者。
參閱：references/css-implementation.md 當實作 CSS 時——完整層級模式、@font-face 載入、font-variation-settings 軸及使用 pyftsubset 進行子集化。
7. 響應式排版與網頁字型效能
核心概念： 字型必須適應螢幕，且網頁字型必須高效載入。使用 clamp() 的流體排版消除斷點跳躍；策略性字型載入防止版面位移及緩慢渲染。
為何有效： 固定字級無法同時服務 320px 手機與 1440px 桌面。網頁字型預設會阻擋渲染——未最佳化的載入會導致 Flash of Invisible Text（FOIT）或 Flash of Unstyled Text（FOUT）。
關鍵見解：
- 流體排版 —
clamp(min, preferred, max)在視口間平滑縮放，無需為字型使用媒體查詢 - 斷點調整 — 行動裝置需要稍大的內文（17-18px）及更緊的標題比例；桌面可放大展示尺寸同時保持行長限制
- 載入策略 —
font-display: swap立即顯示替代文字；預載關鍵字型；子集化至所需字元 - 效能預算 — 字型總載量低於 200KB；優先使用 WOFF2；一個可變字型可取代 4-6 個靜態粗細檔案
產品應用：
| 情境 | 應用 | 範例 |
|---|---|---|
| 內容網站 | 使用 clamp() 的流體尺寸 | font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem) |
| 電子商務 | 預載主要字型，延遲載入次要粗細 | <link rel="preload" href="font.woff2" as="font"> |
| 全球產品 | 依語言子集化以減少載量 | 英文使用拉丁子集，亞洲頁面使用 CJK 子集 |
程式碼範例：
h1 { font-size: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
@font-face {
font-family: 'Custom Font';
src: url('/fonts/custom.woff2') format('woff2');
font-display: swap;
unicode-range: U+0000-00FF; /* 拉丁子集 */
}
/* 在 <head> 中：<link rel="preload" href="/fonts/custom.woff2" as="font" type="font/woff2" crossorigin> */
道德界線： 不要為了最佳化而犧牲使用者——子集化若刪除非英語讀者所需的字元，或移除強調所需的斜體/粗體，就是以包容性換取速度。
常見錯誤
| 錯誤 | 為何失敗 | 修正 |
|---|---|---|
| 文字感覺擁擠 | 行高過緊使讀者疲勞 | 增加行高至 1.6+；加入段落間距 |
| 行太長 | 超過 75 字元時眼睛失去回掃位置 | 文字容器設定 max-width: 65ch |
| 標題看起來脫節 | 上方過多間距破壞與內容的關聯 | 減少標題上方間距；保持下方間距 |
| 文字看起來模糊 | 字型平滑或子像素渲染問題 | 檢查字型平滑；嘗試不同粗細；增加尺寸 |
| 字型載入緩慢 | 未最佳化的檔案阻擋渲染 | 子集化；font-display: swap；預載關鍵字型 |
| 內文太小 | 手機拿得比預期遠；對年長者眼睛造成負擔 | 增加至 18px；以實際距離測試 |
| 層級不明確 | 層級間對比不足 | 增加尺寸/粗細差異 |
| 字型衝突 | 搭配缺乏明確對比產生張力 | 使用單一家族，或確保結構對比（襯線 + 無襯線） |
| 使用 Lorem ipsum 測試 | 假文字隱藏節奏與頻率問題 | 使用真實且具代表性的內容測試 |
快速診斷
| 問題 | 若否 | 行動 |
|---|---|---|
| 內文是否 16px 或更大？ | 太小，無法舒適閱讀 | 至少 16px；閱讀密集型頁面建議 18px |
| 行長是否低於 75 字元？ | 眼睛在回掃時失去位置 | 散文容器設定 max-width: 65ch |
| 內文行高是否 1.4 以上？ | 行距擁擠，閱讀變慢 | 增加至 1.5-1.7 |
| 字型層級間是否有清晰對比？ | 層級不明顯，掃視失敗 | 增加尺寸或粗細差異 |
| 是否在實際尺寸及真實螢幕上測試？ | 生產環境出現渲染意外 | 在目標裝置上測試每個使用尺寸 |
| 字型總載量是否低於 200KB？ | 載入緩慢影響 UX 與 SEO | 子集化、WOFF2、考慮可變字型 |
| 是否指定了替代字型？ | FOIT 導致文字空白 | 每個 font-family 加入系統替代字型 |
| 頁面在 200% 縮放下是否正常？ | 對低視力使用者造成無障礙問題 | 修正 200% 下的溢出與截斷 |
| 標題是否沒有孤兒詞？ | 結尾單詞看起來不完整 | 使用 text-wrap: balance 或手動斷行 |
| 連結是否視覺上可區分？ | 使用者找不到互動元素 | 使用顏色及/或底線區別 |
延伸閱讀
- 《On Web Typography》 by Jason Santa Maria（A Book Apart，2014）
關於作者
Jason Santa Maria 是一位平面設計師與教育家，曾任 Typekit（現 Adobe Fonts）創意總監，並共同創立 A Book Apart。他在紐約視覺藝術學院任教，《On Web Typography》濃縮了他連結傳統排版工藝與螢幕設計現實的橋樑。
