字型傳遞的不只是「好看」
在你的網站上，每一種字型都在向用戶傳遞品牌個性——在他們讀任何文字之前，字型形狀本身就已經在溝通了。
細且帶有弧度的字型：優雅、精緻
粗且幾何化的字型：現代、有力量
有手寫感的字型：親近、個性化
等寬字型（Monospace）：技術性、精確
字型選擇不是「我喜歡哪個」，而是「哪個最準確地傳遞我的品牌個性」。
字型分類基礎
Serif（有襯線）
在筆劃末端有小裝飾的字型。傳遞傳統、信任、權威感。在長篇閱讀（印刷品）中可讀性好。
代表字型：Georgia、Playfair Display、Merriweather、Lora
網頁使用場景：法律、金融、媒體、有歷史感的品牌；長篇文章的內文
Sans-serif（無襯線）
沒有末端裝飾，筆劃均勻。傳遞現代、乾淨、科技感。在螢幕閱讀上更清晰。
代表字型：Inter、Helvetica、Roboto、Manrope、Geist
網頁使用場景：科技、設計、現代服務業；UI 標籤、導覽等功能性文字
Display / Decorative
設計感強烈的展示字型，適合大標題，不適合長段落。
代表字型：Clash Display、Space Grotesk、Cabinet Grotesk
網頁使用場景：Hero 區塊的大標題、品牌 Tagline
字型配對的 3 個系統
系統 1：同家族、不同粗細
最安全的方法——只用一種字體家族，但用不同的粗細（Light、Regular、Medium、Bold、Black）建立視覺層次。
例如：Inter 400 用於正文，Inter 600 用於小標，Inter 800 用於主標。
優點：視覺絕對一致；缺點：可能顯得缺乏個性。
系統 2：對比配對（主流選擇）
一種 Display / Serif 字型做標題，一種 Sans-serif 做正文。
兩者要有足夠的「對比」才好看——如果兩種字型風格太相似，搭配起來會覺得哪裡不對勁卻說不出來。
精選配對範例：
- Playfair Display + Inter：高雅與現代的對話，適合設計工作室、精品服務
- Fraunces + Manrope：帶個性的古典 Serif + 現代幾何 Sans，適合創意品牌
- Clash Display + Satoshi：同是幾何感，但 Clash 更有設計感，適合科技/新創
- DM Serif Display + DM Sans：同一個 DM 家族的 Serif 和 Sans，視覺天生和諧
系統 3：中文 + 西文的跨語系配對
台灣品牌官網通常同時有中文和英文，這是需要特別處理的場景。
中文字型在網頁的挑戰：字型檔案太大（中文字型通常 2–10MB，遠超西文的 50–200KB），直接引用會嚴重拖慢頁面速度。
解決方案：使用系統字型後備（Font Stack）：
CSS 的 font-family 設定為：你指定的英文字型，然後後備帶上系統內建的中文字型（例如 PingFang TC 在 macOS 和 iOS、Noto Sans TC、Microsoft JhengHei 在 Windows）。
這樣英文使用你指定的品牌字型，中文使用系統字型——兩者在視覺上通常協調，且不需要載入大型中文字型檔案。
如果一定要在網頁中使用特定的中文字型，使用 Google Fonts 的 Noto Sans TC 或 Noto Serif TC——它們有提供子集化（Subset）版本，按需載入所需字符，大幅減少載入量。
在 Tailwind CSS 中設定字型系統
在 tailwind.config.ts 中的 theme.fontFamily 中定義你的字型系統，然後在 globals.css 中引入 Google Fonts。
使用 Tailwind 的 font-display、font-heading 等工具類在不同元素套用對應的字型，讓整個設計系統有清楚的字型層次。
字型大小的比例系統
字型大小不應該是任意選取的，而是遵循一個固定的比例（Type Scale）：
常見的比例倍率：1.25（Major Third）或 1.333（Perfect Fourth）
以 16px 基本字體大小，使用 1.25 倍率的 Type Scale：
- 顯示標題：2.441rem（約 39px）
- H1：1.953rem（約 31px）
- H2：1.563rem（約 25px）
- H3：1.25rem（約 20px）
- 正文：1rem（16px）
- 小標：0.8rem（約 13px）
Tailwind 的預設 Type Scale 已經遵循類似邏輯，只要一致使用 text-xl、text-2xl、text-3xl 等工具類，就能得到和諧的字體大小比例。