排版是「隱形的設計」。當一個頁面讓你讀得舒服、自然地從頭看到尾，你通常不會注意到排版的存在；但當字太小、行距太窄、字體太多，你會感到不適，卻很難說清原因。了解排版的基本原則，是讓內容更容易被閱讀、也更容易被信任的第一步。
一、字體分類：你需要知道的五大類
字體不只是「好看不好看」，不同的字體類型有不同的閱讀場景：
| 類型 | 特徵 | 代表字體 | 適用場景 |
|---|---|---|---|
| 有襯線體（Serif） | 筆畫末端有裝飾性短橫線 | Times New Roman、Georgia | 長篇文章、學術報告、印刷品 |
| 無襯線體（Sans-serif） | 筆畫乾淨，無裝飾橫線 | Arial、Helvetica、Noto Sans | 網頁正文、UI 介面、行動裝置 |
| 等寬字體（Monospace） | 每個字符寬度相同 | Courier、Fira Code、JetBrains Mono | 程式碼、終端機輸出、資料對齊 |
| 手寫體（Script） | 模擬手寫筆跡 | Brush Script、Pacifico | 標題、裝飾、品牌 Logo |
| 展示體（Display） | 個性強烈，不適合長篇閱讀 | Impact、Bebas Neue | 大標題、海報、廣告 |
網頁正文最常見的選擇是無襯線體，因為螢幕解析度下有襯線體的細節反而不如印刷清晰，無襯線體在各種尺寸下都有良好的可讀性。
二、中文字體的特殊性
中文排版有幾個英文排版不常遇到的挑戰：
字重選擇
中文字體傳統上只有「細體（Light）」和「粗體（Bold）」兩種字重，近年來 Noto Sans TC、思源黑體等才提供了 100–900 的多字重支援。在選擇中文字體時，要確認該字體是否有所需的字重，否則瀏覽器會強制加粗（偽粗體），導致字體模糊。
繁體與簡體差異
同一個 Unicode 碼位，繁體（zh-Hant）和簡體（zh-Hans）的字形可能不同。在網頁中應設定正確的 lang 屬性（如 lang="zh-Hant"），讓瀏覽器選擇正確的字形變體。否則在作業系統字體庫中，同一個字可能顯示出繁體或簡體字形，造成排版不一致。
標點符號的全形與半形
中文排版通常使用全形標點（，。！？），而非半形標點（,.!?）。全形標點佔一個中文字的寬度，符合中文行文習慣。混用全形和半形標點是常見錯誤，尤其在中英文混排時需要特別注意。
三、行距：最影響可讀性的排版參數
行距（line-height）是排版中對可讀性影響最大的單一參數。太窄讓眼睛跟丟行，太寬讓段落感消失：
- 正文建議：1.5–1.8（相對於字體大小的倍數）。中文因為字符密度高，通常需要比英文更大的行距（1.7–1.8）
- 標題建議：1.1–1.3。標題字體較大，視覺分量重，行距過大反而破壞標題的整體感
- 程式碼塊：1.5 左右。程式碼需要保持結構感，行距過大會讓邏輯結構變得鬆散
CSS 中，行距用 line-height 設定，建議使用無單位的倍數（如 line-height: 1.7）而非固定像素（如 line-height: 28px），這樣能隨字體大小自動縮放，避免在不同字體大小下行距比例失調。
四、字距與字體大小
字體大小
網頁正文的最低可讀字體大小是 16px，這也是多數瀏覽器的預設值。行動裝置閱讀距離更近，16px 通常已足夠；桌機版長篇文章可考慮 17–18px。避免將正文縮小到 14px 以下——使用者可能不會抱怨，但他們會更快離開頁面。
字距（letter-spacing）
中文正文通常不需要額外的字距設定，字符本身已有適當間距。英文大寫字母或標題的字距可微調（+0.05em 到 +0.1em），增加呼吸感。切忌在中文正文上加大字距——這會讓文字看起來鬆散，且不符合中文排版慣例。
五、中英文混排的規則
中英文混排是台灣網頁最常見的排版挑戰。幾個基本規則：
- 中英文之間加半形空格：如「使用 CSS 設定樣式」，在「使用」和「CSS」之間加空格，增加視覺呼吸感
- 數字和單位之間加空格：如「1.7 倍行距」，不是「1.7倍行距」
- 中文標點和英文字母不混用：中文句子用中文標點，英文句子用英文標點，不要在中文句子裡夾雜半形逗號
- 字體宣告順序影響顯示：在 CSS
font-family中，應先宣告中文字體，再宣告英文字體，讓中文字符使用中文字型、英文字符 fallback 到英文字型
六、文字對比度：排版的無障礙底線
文字顏色和背景顏色之間的對比度，直接影響視力不佳的使用者、在強光下使用手機的人，以及老年族群的閱讀體驗。WCAG（無障礙內容指引）制定了明確的標準：
- AA 級（一般標準）：正文文字對比度至少 4.5:1；大字體（18px 以上或粗體 14px 以上）至少 3:1
- AAA 級（最高標準）：正文文字對比度至少 7:1；大字體至少 4.5:1
常見的低對比問題：灰色文字（如 #999）放在白色背景上——對比度約 2.85:1，遠低於 AA 標準，但設計師在高對比螢幕上可能看起來還好。
七、字體配對：讓標題與正文產生層次感
一個頁面通常需要 2 種字體：標題字體（視覺引導）和正文字體（閱讀舒適）。幾個常見的配對策略：
- 有襯線標題 + 無襯線正文：傳統報刊風格，帶有知性感。適合部落格、新聞網站
- 展示體標題 + 無襯線正文：個性鮮明，適合品牌官網、活動頁面
- 同系列不同字重：最安全的選擇，如 Noto Sans TC Bold 作為標題、Regular 作為正文，風格統一，不易出錯
避免在同一頁面使用超過 3 種字體——每增加一種字體都需要額外的載入時間，且容易讓版面顯得雜亂。
八、網頁字體載入效能
中文字體是效能殺手：一個完整的中文字體檔案通常超過 5MB，遠大於英文字體（通常只有 50–200KB）。幾個改善策略：
- 使用 Google Fonts 的子集化（subsetting）：只載入頁面實際使用的字符，而非整個字體檔案
- font-display: swap：讓頁面在字體載入完成前先顯示系統字體，避免空白閃爍（FOIT）
- 優先使用系統字體：在不需要特定品牌字體的場合，使用系統預設字體（如
-apple-system, BlinkMacSystemFont, "Segoe UI"）可以完全避免字體載入延遲
總結
- 網頁正文優先選用無襯線字體，中文行距建議 1.7–1.8 倍
- 正文字體最小 16px，避免縮小到使用者難以閱讀的尺寸
- 中英文之間加空格，中文使用全形標點，維持版面一致性
- 文字對比度至少達到 WCAG AA 標準（4.5:1）
- 一個頁面最多使用 3 種字體，優先考慮系統字體以提升載入速度