客製化網站設計的 6 個字型決策：從品牌個性到中英混排

「中文網站字型用什麼好？」——這是 客製化網站設計 訪談中常被問的問題，但客戶通常沒意識到這個問題的影響有多深。

老實說，字型不只是「字長什麼樣子」，是訪客對你品牌第一個非語意的訊息——比 logo 更頻繁出現、比顏色更持續被看見。實務上一個常見現象是：客戶花很多時間挑 logo 顏色，卻把字型決策當成「設計師看著辦」，結果整個網站視覺感覺「沒記憶點」——這通常就是字型選錯了。

本文拆解客製化網站設計階段必須決定的 6 個字型問題，每個決策都會影響網站的品牌感、易讀性、效能與長期維護成本。

決策 1：品牌個性對應的字型風格

字型有「個性」——同樣寫「我們提供專業服務」，不同字型傳達的情緒完全不同：

設計含義：字型決策必須對應到 客製化網站設計強化品牌識別 階段確認的品牌個性。如果品牌定位是「現代科技」卻選了「傳統襯線」，視覺會跟訊息脫節。

跟客戶聊時最常聽到「我想要有質感的字」——這句話太抽象。我會建議先回答兩個問題：(1)「你想被聯想到 Apple 還是書法字帖？」(2)「你的客群會點開 LV 還是 IKEA 的網站？」——回答完這兩題，字型風格大致就定了。

決策 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 級：

為什麼至少 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）
• 長期回報是「獨一無二的品牌記憶」

設計含義：簽約客製化網站時務必確認字型授權成本——如果開發商選了商業字型卻沒明確列入報價，未來年費會找客戶追討。

實務上老闆最常踩的坑是：開發商用了某商業字型，第一年免費送、第二年才告訴客戶「年費 8,000 元」。我會建議：簽約前直接問「網站用的字型有沒有商業授權費？由誰承擔？多久要付一次？」這三題答清楚再簽。延伸閱讀 客製化網頁設計的隱形成本。

決策 6：載入效能優化

中文字型最大問題是「檔案大」——一個完整中文字型 5-15MB，全部載入會嚴重拖累 Core Web Vitals。優化策略：

1. 只載入用到的字重：不要載入 6 級字重，挑 2-3 級即可
2. WOFF2 格式：比 WOFF 小 30%、比 TTF 小 60%
3. font-display: swap：先用系統字渲染、字型載入後再切換（避免 FOIT 白屏）
4. 預載 (preload)：<link rel="preload" as="font" type="font/woff2" crossorigin> 讓重要字型優先載入
5. 中文 subset：用 fonttools 把字型只保留常用 3,000 字（從 5MB 降到 500KB）
6. 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 年、3,000+ 企業實績的 企業形象網站方案 中，字型 Design Token 是標配交付，每個專案都會在 Style Guide 裡列出完整字級階層、中英搭配規則、載入策略。

如果你對自己網站的字型有疑問，或想看實際的 Design Token 範例，歡迎聊聊。

📞 03-366-1000 ｜ 🌐 www.ozchamp.com ｜ 免費諮詢，24hr 內回覆