字型不只是美觀，它在傳遞訊息
你看到一個用 Comic Sans 寫的律師事務所網站，會有什麼感受？馬上覺得「不專業」——即使你沒辦法解釋為什麼。
這就是字型的力量：它在你讀到任何文字之前，就已經傳遞了關於品牌的情緒訊號。
原則一：確立字型層次
一個網站通常需要三個層次的字型設定：
標題（H1/H2）：最大、最有個性，負責吸引注意力並建立品牌氛圍
副標題（H3/H4）：中等大小，輔助標題，引導閱讀結構
正文：最小也最重要，可讀性第一，不需要太多個性
每個層次視覺上應該明顯不同，訪客一眼就能分辨「這是標題」「這是說明文字」。
原則二：每個設計最多使用兩種字型
新手最常犯的錯誤：用了 5 種字型，以為這樣「豐富」。結果是視覺混亂，沒有一種字型可以建立一致的品牌感。
兩種字型的組合公式：
一種有個性的標題字型（襯線字體或特色無襯線）加上一種高可讀性的正文字型（簡潔的無襯線字體）。
範例組合：
標題：Playfair Display（優雅的英文襯線字體）配正文：Inter（現代感的無襯線字體）
標題：Cormorant Garamond（細緻的奢華感）配正文：Lato（友善易讀）
原則三：行高影響可讀性超乎想像
行高（line-height）是相鄰兩行文字基線之間的距離。太小，文字擁擠，讀起來很喘；太大，視線在段落間的連貫性斷裂。
推薦設定：
正文：行高為字體大小的 1.5-1.75 倍。例：字體 16px，行高設 24-28px。
標題：行高為字體大小的 1.1-1.3 倍。例：字體 48px，行高設 52-62px。
標題不需要像正文一樣寬鬆——太大的行高反而讓標題「散掉了」，失去力量感。
原則四：每行字數控制在適當範圍
一行超過 80 個英文字元或 40 個中文字，視線在換行時需要移動太大的距離，讀起來非常費力。
實作方式：用 CSS 的 max-width 限制文字欄位的寬度。正文欄位建議不超過 680px（約等於中文 35-40 字）。
很多網站讓文字在全寬容器中鋪滿，在大螢幕上一行可能有超過 100 個字元，閱讀體驗極差。
原則五：字重創造對比和重點
同一套字型有不同的字重（Light 300、Regular 400、Medium 500、Bold 700）。巧妙運用字重，不需要換字型也能建立視覺層次。
常用手法：
標題用 Light 或 Thin（輕量級的細字），配合大字體，呈現出高端的精緻感
關鍵詞用 Semi-bold 強調，而不是整行都加粗
按鈕文字用 Medium 或 Semi-bold，增加點擊感
注意：不要讓正文用太細的字重。Light（300）在白底上看起來很優雅，但在手機小螢幕或深色背景上可讀性很差。
原則六：中英文混排的對齊問題
台灣的網頁設計常見中英文混排，但中英文的字型預設基線、字距都不一樣，直接混排容易顯得雜亂。
處理建議：中文字體和英文字體分開設定——中文用中文字型，英文和數字用英文字型。在 CSS 設定字型家族時，英文字型放前面，中文字型放後面（瀏覽器會優先用英文字型渲染英文字元）。
例如設定 font-family 為 Inter 後接 Noto Sans TC，Inter 渲染英文和數字，Noto Sans TC 渲染中文，搭配效果遠勝單一中文字型混搭。
工具推薦
Google Fonts：免費、速度快、選擇豐富，絕大多數場景都夠用
Fontpair.co：推薦適合搭配的字型組合
Type Scale（typescale.com）：即時預覽不同字型和大小比例
排版沒有捷徑，需要培養眼力。多看設計做得好的網站，注意它們用了幾種字型、如何建立層次、正文的行高感受——這些觀察積累下來，你對好排版的直覺就會越來越準確。