字型選擇心法：作品集網站的字型策略

本站用 Plus Jakarta Sans 配 Noto Sans TC，加上 JetBrains Mono 做等寬。為什麼是這幾個？換成 Inter 或 Geist 會差在哪？這篇講字型選擇背後的邏輯。

為什麼不用 Inter

Inter 是現在最熱門的網頁字型之一 — 中性、可讀性高、規格完整。但對「作品集」網站，Inter 的問題是太常見了。打開任何 Stripe-style 的 SaaS 站都是 Inter。

作品集的核心訴求是「展現個性」。用最常見的字型等於放棄這個訴求。

Plus Jakarta Sans 的特質

• 幾何感更強：圓潤但不軟，有「設計感」
• x-height 適中：小字也清楚
• 義大利文 a g 漂亮：是這套字型的明星 glyph
• 免費可商用：SIL Open Font License
• Google Fonts 提供：CDN 分發、無需自架

中文配 Noto Sans TC

中英混排是台灣設計師的日常難題。我的選法：

• 主字型寫英文在前：'Plus Jakarta Sans', 'Noto Sans TC' — 英文字元優先用 Plus Jakarta Sans，中文 fallback 到 Noto
• 避免混用太多中文字型：思源黑體、Noto Sans TC、台北黑體、繁星黑體都用，全站感覺亂
• Noto Sans TC 的優勢：覆蓋 CJK 字符極全（包括罕見字），Google 維護，渲染穩定

字重 (Weight) 的層次

本站只用 4 種字重：

不用 300 (Light)：太細的字小尺寸難讀。不用 900 (Black)：太重視覺壓迫。

letter-spacing 的微調

不同尺寸的字元間距該不同：

h1 { letter-spacing: -0.02em; }   /* 大字緊一點 */
h2 { letter-spacing: -0.01em; }
body { letter-spacing: 0; }       /* 內文不調 */
.uppercase-tag {
  letter-spacing: 0.18em;          /* 全大寫一定要鬆 */
  text-transform: uppercase;
}

line-height 的選擇

本站的 line-height：

• 標題：1.18（緊湊，不浪費垂直空間）
• 內文：1.78（寬鬆，舒適閱讀）
• code：1.7（接近內文）
• uppercase tag：normal（短字串不需要）

等寬字型的角色

JetBrains Mono 用在：

• 程式碼區塊
• meta 資訊（發表日期、閱讀時間）
• navigation 中的特殊標記
• category tag

等寬字型在非程式碼場景的角色是「視覺對比」 — 跟主字型形成節奏，給讀者「這是技術元素」的提示。

Playfair Display 做點綴

本站 blockquote 用 Playfair Display Italic — 一個傳統的襯線體斜體。理由：

• 跟 sans-serif 主字型形成對比
• 引用感、文學感
• 限定特殊用途，不破壞整體一致性

字型載入優化

Google Fonts 預設載入會造成 FOIT（Flash of Invisible Text）。優化：

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="...&display=swap" rel="stylesheet" />

關鍵是 display=swap — 字型還沒載入完用 fallback 顯示，載入後 swap 過去。比 FOIT 體驗好。

fallback 字型的選擇

--font-sans: 'Plus Jakarta Sans', 'Noto Sans TC',
             system-ui, -apple-system, sans-serif;

• system-ui：用作業系統預設字型（macOS = SF Pro, Windows = Segoe UI）
• -apple-system：Safari 專用
• sans-serif：最後保底

結語

字型是設計裡最容易被忽略但影響最深的決定。一個合適的字型組合可以讓網站從「看起來還可以」變成「啊這設計有想過」。本站的選擇不是最好的，但是經過 5 個替代方案測試後最適合「Hao0321 Studio」這個品牌個性的。

如果你也在挑字型，建議多試幾個，別只看 Inter。