排版是信息傳遞的骨架，亦是視覺體驗的靈魂。好的網頁排版兼顧可讀性、可掃視性、品牌辨識度、跨設備適配性。本文系統梳理六大核心模塊：

一、層級結構：閱讀的導航系統

清晰的層級給用戶閱讀入口與信息權重地圖。H1-H6 語義化使用，視覺權重階梯分明（字號、粗細、顏色、留白）。缺乏層級 = 牆頭草，用戶無從下眼。

二、間距系統：呼吸感的數學

三大核心概念不可混淆：

• 行距/Leading (line-height)： 行與行之間距離。建議 1.5-1.8 倍字號，中文閱讀舒適區。過小擁擠，過大斷裂。
• 字偶距/Kerning： 特定字符對之間微調（如「AV」「LT」），追求視覺光學平衡。CSS font-kerning: normal、letter-spacing 微調。
• 字距/Tracking (letter-spacing)： 整段文本字符間統一增減。標題常用正值增呼吸感，正文極慎用。

間距鐵律： 建立系統化間距刻度（如 4px 基準：4/8/12/16/24/32/48/64），全站統一節奏，拒絕魔法數字。

三、色彩與調色板：不只是文字顏色

排版色彩 = 全站色彩系統。文本顏色需與背景、圖片、UI 組件協調，對比度達 WCAG AA 級 (4.5:1) 以上。宏觀排版——大號標語/標題作為視覺錨點，長度 1-4 詞，極致簡潔精準。

四、字體配對：雙字體制的藝術

• 標題字體（展示性強、識別度高）+ 正文字體（閱讀舒適、字符全）= 經典雙字體制。
• 避免 3+ 字體並用，易造成視覺混亂與性能負擔。
• 推薦資源：Douglass Bonneville《字體配對指南》數千組經典組合。

五、字號/粗細對比：辨識度的生命線

• 字號跳躍要有明顯階梯（如 1.25-1.5 倍數關係）。
• 粗細區分：Regular (400) vs Medium (500) vs Bold (700)，避免相近粗細並用。
• 禁忌： 背景圖與文字顏色接近/衝突，導致文字淹沒。必須加半透明遮罩、描邊、陰影或調整圖片亮度。

六、字體替換技術演進：從妥協到自由

方案	原理	優點	缺點/現狀
@font-face	CSS 直接引用字體文件	原生、無 JS 依賴、控制力強	瀏覽器渲染差異、字體授權/體積/格式(woff2)管理複雜
Google Fonts	CDN 托管開源字體，API 調用	免費、簡單、可靠、支援 subset/preload	優質中文字體極少，英文為主
Typekit (Adobe Fonts)	訂閱制專業字體庫	海量優質商用字體、完善授權、支援中文	按年付費、PV/字體數限制、國內訪問不穩定
Font Squirrel	免費商用字體下載 + @font-face 生成器	完全免費、可自建、中文資源相對豐富	需自行托管、優化格式、管理緩存
Variable Fonts	單文件包含多軸變化(粗細/寬度/斜度)	極大減少字體請求/體積、動態排版新可能	瀏覽器支援良好(現代瀏覽器)、中文變體字體仍稀缺

現代排版最佳實踐清單

1. 建立設計系統排版規範：字體族、字號階梯、行高、字重、間距刻度、色彩語義、斷點響應規則。
2. 採用 CSS Custom Properties 管理排版 Token，實現主題切換、暗黑模式、響應式縮放一鍵生效。
3. 移動優先 定義基礎排版，桌面端通過媒體查詢放大節奏。
4. 關鍵字體 preload + font-display: swap，消除 FOUT/FOIT 閃爍。
5. 中文排版特有優化：text-orientation、writing-mode、標點擠壓、懸掛標點、字間縮排。
6. 無障礙：語義化標籤、足夠對比度、可縮放文字不破壞佈局、焦點可見。

排版細節成就卓越體驗。每一個字號選擇、每一處留白呼吸、每一對字體搭配，都是對用戶閱讀時間的尊重。