元伸科技
「中文網站字型用什麼好？」——這是 客製化網站設計 訪談中常被問的問題，但客戶通常沒意識到這個問題的影響有多深。字型不只是「字長什麼樣子」，是訪客對你品牌第一個非語意的訊息——比 logo 更頻繁出現、比顏色更持續被看見。本文拆解客製化網站設計階段必須決定的 6 個字型問題，每個決策都會影響網站的品牌感、易讀性、效能與長期維護成本。
決策 1：品牌個性對應的字型風格
字型有「個性」——同樣寫「我們提供專業服務」，不同字型傳達的情緒完全不同：
| 品牌個性 | 推薦字型風格 | 中文範例 | 英文範例 |
|---|---|---|---|
| 穩重 / 傳統 / 權威 | 襯線體（Serif） | 思源宋體、源樣明體 | Playfair Display、Merriweather |
| 現代 / 簡潔 / 科技 | 無襯線體（Sans-serif） | 思源黑體、Noto Sans TC | Inter、Manrope、Geist |
| 親切 / 溫暖 / 友善 | 圓體（Rounded） | 標楷圓體、jf 圓體 | Quicksand、Comfortaa |
| 創意 / 時尚 / 個性 | 展示字型（Display） | 設計師原創字型 | Tan Pearl、Recoleta |
| 工業 / 力量 / 動感 | 粗黑體（Black） | 思源黑體 Black | Anton、Bebas Neue |
設計含義：字型決策必須對應到 客製化網站設計強化品牌識別 階段確認的品牌個性。如果品牌定位是「現代科技」卻選了「傳統襯線」，視覺會跟訊息脫節。
決策 2：中英搭配（雙字型家族）
中文網站幾乎都會混排英文（公司名、產品名、英文介紹）。客製化網站設計時要選**「2 個字型家族」**：
- 中文家族：思源黑體（Noto Sans TC）、源樣明體、jf 系列等
- 英文家族：Inter、Manrope、Geist、Roboto 等
- 規則：兩個字型的「字重感」「視覺重量」要相近（如思源黑體 Regular ↔ Inter Regular）
中英混排的視覺優化：
- 中英之間統一加 0.25em 視覺空隙（CSS 用
letter-spacing在中英邊界微調） - 英文字級稍大 1-2px（中文字密度高，視覺上看起來比同字級英文小）
- 數字優先用英文字（
font-variant-numeric: tabular-nums等寬數字利於排比）
延伸閱讀 中英混排對 AI 解析的影響。
決策 3：字重階層（至少 4 級）
字重（font-weight）是建立視覺層次的關鍵。多數網站只用 2 個字重（regular 400 + bold 700）就完事，但這對複雜頁面不夠用。專業客製化建議至少 4 級：
| 字重 | 數值 | 用途 |
|---|---|---|
| Light | 300 | 大字標題（display）的優雅感 |
| Regular | 400 | 內文（body）標準字重 |
| Medium | 500 | 強調文字、按鈕標籤 |
| Bold | 700 | H1-H3 主標題、CTA 按鈕 |
| Extra Bold | 800-900 | 特殊強調（少用） |
為什麼至少 4 級：頁面元素需要不同強度的同色（視覺優先順序）——大標需要 Bold、小標 Medium、內文 Regular、輔助文字 Light，少了字重區分視覺就扁平。
載入注意事項：每個字重都要單獨載入，越多字重檔案越大。建議實際只用 2-3 級就夠（如 400 + 500 + 700），不要為了「以防萬一」載入 6 級全字重。
決策 4：行高與字距（中英差異化）
中文與英文的閱讀節奏不同，行高（line-height）與字距（letter-spacing）要分別調：
中文設定：
- 行高：1.7-2.0（中文字密度高，行高要寬鬆才好讀）
- 字距：0（中文方塊字本身有間隔，不需加 letter-spacing）
英文設定：
- 行高：1.4-1.6（英文有上下伸出 stem，行高可緊一些）
- 字距：標題 -0.02em（緊湊有設計感）、內文 0、caption 0.05em（鬆散好讀）
設計含義：客製化網站建議用 CSS 變數定義「行高系統」（--lh-tight: 1.4 / --lh-normal: 1.7 / --lh-loose: 2.0），不同情境套用對應變數。
決策 5：商用授權的選擇
字型授權是最容易被忽略卻可能踩雷的地方。3 種主要選項：
A. 免費商用（推薦中小企業）：
- Google Fonts：1500+ 種字型、CDN 載入快、商用免費
- 思源系列（Noto Sans TC、源樣明體）：Adobe + Google 開源、品質高
- jf open 字型：台灣設計師作品、有獨特感
- 優點：成本零、免授權糾紛
- 缺點：與其他網站撞字（特別是 Noto Sans TC 用太普及）
B. 商業授權（推薦中大型企業）：
- 蒙納字型：年費 5,000-30,000 / 字型
- 文鼎字型：類似價位
- 華康字型：類似價位
- 優點：品牌獨特性高、設計感強
- 缺點：年費持續支出、授權範圍要看清（單站？多站？子網域？）
C. 客製字型（高階品牌）：
- 找字型設計師訂製專屬品牌字（30-200 萬一次性）
- 適合大型品牌（蘋果的 SF、Google 的 Product Sans）
- 長期回報是「獨一無二的品牌記憶」
設計含義：簽約客製化網站時務必確認字型授權成本——如果開發商選了商業字型卻沒明確列入報價，未來年費會找客戶追討。延伸閱讀 客製化網頁設計的隱形成本。
決策 6：載入效能優化
中文字型最大問題是「檔案大」——一個完整中文字型 5-15MB，全部載入會嚴重拖累 Core Web Vitals。優化策略：
- 只載入用到的字重：不要載入 6 級字重，挑 2-3 級即可
- WOFF2 格式：比 WOFF 小 30%、比 TTF 小 60%
font-display: swap：先用系統字渲染、字型載入後再切換（避免 FOIT 白屏）- 預載 (preload)：
<link rel="preload" as="font" type="font/woff2" crossorigin>讓重要字型優先載入 - 中文 subset：用 fonttools 把字型只保留常用 3,000 字（從 5MB 降到 500KB）
- Variable Font：單一檔案包含多個字重（思源黑體有 Variable 版）
進階做法：把首屏關鍵字（首頁 Hero 的標題）用 SVG 化，避免依賴字型載入。
字型決策的 Design Token 化
把 6 個決策的結果整合到 Design Token 系統：
:root {
/* 字型家族 */
--font-zh: 'Noto Sans TC', sans-serif;
--font-en: 'Inter', system-ui, sans-serif;
--font-display: 'Playfair Display', serif;
/* 字級（clamp 響應式）*/
--fs-display: clamp(2.5rem, 5vw, 4.5rem);
--fs-h1: clamp(2rem, 4vw, 3rem);
--fs-body: clamp(0.95rem, 1.2vw, 1.125rem);
/* 字重 */
--fw-light: 300;
--fw-regular: 400;
--fw-medium: 500;
--fw-bold: 700;
/* 行高 */
--lh-tight: 1.4;
--lh-normal: 1.7;
--lh-loose: 2.0;
}
未來品牌調整時，改 Token 變數全站同步——例如想換中文字型，只改 --font-zh 一行，幾百個 H1、H2、body 全部更新。
結語：字型是「每秒都被看到的品牌訊息」
最常見的字型決策災難不是「選錯字型」，而是「沒人想清楚字型該傳達什麼」。客戶說「不要那種文藝風」「我想要有質感」——這些抽象需求需要在 6 個決策中具體化為可執行選擇。
簽約客製化網站設計時，把字型納入交付規格：
- 標題 / 內文字型家族選擇？對應的品牌個性是什麼？
- 中英搭配是否定案？字重感是否相近？
- 字級系統是否用 clamp() 響應式？
- 商業授權成本是否明確列入報價？
- 載入效能是否承諾達標 Core Web Vitals？
- 是否會交付 Design Token 讓未來易於切換？
如果你正在規劃 客製化網站設計，建議在 Mockup 階段就把字型決策對焦——這比上線後想換字型的成本低 5-10 倍。元伸科技 24 年的 企業形象網站方案 中，字型 Design Token 是標配交付，每個專案都會在 Style Guide 裡列出完整字級階層、中英搭配規則、載入策略。
