電商知識庫
字體排版 UX 完整指南
90% 顧客忽略卻決定信任的細節
95% 網頁是文字、好排版提升閱讀效率 50%、字體影響轉換 10-20%。本文涵蓋中英字體搭配、字級階層、行高字距、襯線選擇、Google Fonts 應用。
中文常用：思源黑體、微軟正黑體、蘋方
英文常用：Inter、Roboto、Helvetica、Open Sans
原則：
用「黃金比例」1.618 設計（如 16 → 26 → 42）。
中文行高比英文大。
無襯線（Sans-serif）：現代、簡潔、適合螢幕（Inter、思源黑）
襯線（Serif）：古典、優雅、適合長文章（Source Serif、思源宋）
電商用無襯線居多。可混搭：標題襯線 + 內文無襯線。
範例：@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;700&display=swap');
手機字體要求：1. 最小字級 14px（避免縮放）；2. 行高 1.5+（手機讀更需要）；3. 段落間距大（容易看清楚）；4. 避免細字（太細看不見）；5. 連結間距 ≥ 8px（防誤點）。手機用戶 90%+，必須優化。
中文字體檔案大（含上萬字）：1. 用 Font Subsetting 只載常用字；2. WOFF2 格式（壓縮最高）；3. preload 關鍵字體；4. 系統字 fallback（不要長時間白屏）；5. 限制字重數量。優化後字體載入快 50%+。
NT$24,800/年起，享受完整電商解決方案：
95% 網頁是文字、好排版提升閱讀 50%、字體影響轉換 10-20%。
中文思源黑/微軟正黑、英文 Inter/Roboto。分開設定 font-family、中文字體放後。
H1 32-48、H2 24-32、H3 18-24、內文 16-18、小註 12-14。用黃金比例 1.618。
內文行高 1.5-1.7、標題 1.2-1.4；字距 0；每行 50-75 字。中文行高大。
無襯線現代適合螢幕、襯線古典適合長文。電商多用無襯線，可標題襯線混搭。