為什麼字型比你想的更重要？
字型是你「用嘴巴說話之前，你的樣子」。
同一句話，用不同字型呈現，給人的感覺可以完全不同：
- 思源黑體（細）：現代、科技、俐落
- 思源明體（細）：典雅、文藝、質感
- 圓體（各種）：親切、可愛、輕鬆
- 手寫字型：個人、手作、溫暖
字型選擇錯了，就算其他設計做得多好，整體品牌感都會走偏。
繁體中文字型的挑戰
和英文不同，繁體中文字型面臨幾個特殊挑戰：
① 字數龐大，字型檔案大
一個中文字型動輒 10–30MB，和幾百 KB 的英文字型完全不同。如果直接在網頁上使用，載入速度會嚴重受影響。
解法：使用 Google Fonts 或 CDN 提供的字型（只載入你用到的字集），或使用可变字体 + subset 技術。
② 選擇相對少
高質量的繁體中文免費字型數量，遠少於英文。付費中文字型又常常限制網頁使用授權。
優質免費繁體中文網頁字型推薦
黑體類（現代、閱讀性強）
思源黑體（Noto Sans TC）
Google 和 Adobe 聯合開發，繁體中文字型中覆蓋率和可讀性最廣的免費字型。
多個字重（Thin / Light / Regular / Medium / Bold / Black），任何設計風格都能找到適合的組合。
適合的品牌： 科技、設計、商務、現代服務業
引入方式（Google Fonts）：
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500;700&display=swap');
明體類（優雅、質感）
思源明體（Noto Serif TC）
對應思源黑體的明體版本，帶有筆畫的起落感，給人沉穩、優雅的質感。
適合的品牌： 精品、美食、文化、傳統行業、高端服務
圓體 / 柔和黑體
瀨戶字體（Seto Font） 或各種開源圓體
帶有微圓角的黑體，看起來比傳統黑體更友善、輕鬆。
適合的品牌： 親子、飲食、美容、生活風格
如何搭配英文字型
大多數台灣品牌的官網是中英混排的（例如：導覽列可能有英文，品牌名稱常包含英文）。
中英字型搭配的原則：
同調性搭配：
- 中文選無襯線（黑體）→ 英文選無衡線（如 Inter、DM Sans）
- 中文選有衬线（明體）→ 英文選有衬线（如 Playfair Display、Lora）
讓字型系統有層次感：
通常建議 2–3 種字型就夠了：
- 英文標題字型（有個性，用於大標題）
- 中文正文字型（可讀性強，用於內文）
- 數字/輔助字型（選配，用於價格、統計數字等）
超過 3 種字型的頁面，通常顯得混亂而不專業。
字型排版的基礎設定
行距（Line Height）
中文內文的建議行距：1.7–2.0
英文內文：1.5–1.7
行距太小讀起來擁擠，太大讀起來鬆散。
字型大小
桌機版：
- 大標題（H1）：36–64px
- 次標題（H2）：24–36px
- 內文：16–18px（注意：不少台灣網站的內文字太小）
手機版：
- 最小不低於 14px（實際建議 16px）
- 小於 16px 的字，iOS 會自動縮放，可能破壞版面
最大寬度（Max Width）
內文段落的最大寬度建議不超過 70 個字元（約 680px）。
一行字太長，讀者讀到行尾再回到下一行的起點，視線移動距離太大，容易疲勞、走錯行。
載入效能優化
在台灣，網頁字型的載入效能是常被忽視的速度殺手。
幾個實用的優化方式：
- 使用
font-display: swap，讓文字在字型載入前先以系統字型顯示，不阻擋渲染 - 只引入你用到的字重，不要引入全部 9 個字重
- 考慮使用
preconnect到 fonts.googleapis.com 加速預載