排版（Typography）是 UI 設計中最容易被忽略、卻影響最大的基礎。2026 年設計圈的共識是：可讀性不是「錦上添花」，而是用戶留存與信任的底線。字體選錯、字號排錯，功能再好也白費。
📖 學（核心）
為什麼排版在 2026 年再次成為顯學
過去幾年 UI 設計大量投入視覺特效、動態、3D；2026 年的反彈是「回歸可讀性」——用戶要的是即時理解，不是眼睛刺激。IxDF（互動設計基金會）的報告指出：可讀性低的介面，用戶流失率比可讀性高的高出 38%。設計師開始把「清楚」放在「好看」之前。
流體排版（Fluid Typography）：告別固定字號
傳統做法是設定兩三個斷點（breakpoints）各配不同字號。流體排版用 CSS clamp() 讓字體大小像液體一樣，在設備寬度之間連續平滑縮放，不產生跳躍：
/* 最小 16px、最大 24px、中間依視窗寬度線性縮放 */
font-size: clamp(16px, 2.5vw + 0.5rem, 24px);好處：一行代碼處理所有屏幕尺寸；排版永遠不會在某個中間尺寸「撞斷」。這是 2026 年前端設計師的必備技法。
Variable Fonts（可變字型）：一個字型檔搞定所有粗細
傳統字型系列需要下載多個檔案（Regular、Bold、Light……）。Variable Font 把所有粗細、寬度、傾斜壓縮進一個檔案，用 CSS 軸（axis）無段調節：
font-variation-settings: 'wght' 650, 'wdth' 90;效能提升明顯（少載一堆字型檔案），設計自由度更高（可以做出不在標準級距的粗細）。Google Fonts 目前超過 200 種 Variable Font 可免費使用。
視覺階層：三個層次就夠
好的排版建立清晰的閱讀順序，讀者眼睛不迷路：
| 層次 | 用途 | 建議 |
|---|---|---|
| Display / H1 | 吸引注意、傳達主題 | 大膽字體、大字號、高對比 |
| Body | 主要閱讀內容 | 最大可讀性優先，16–20px，行高 1.5–1.7 |
| Caption / Label | 輔助資訊、標籤 | 小字但對比要夠（WCAG AA：4.5:1） |
超過三層就製造混亂，不是清晰。字號、粗細、顏色三個維度同時改動才算真正「拉開層次」，只改一個維度效果往往不夠。
2026 年兩個新趨勢
AI 生成字型：設計師開始用 AI 工具快速生成符合品牌調性的自定字型，縮短字型採購授權的時間；但 AI 生成字型的可讀性仍需人工驗證，尤其中文字體。
無障礙排版成強制要求：WCAG 2.2 對比值要求（正文 4.5:1、大字 3:1）2026 年已被多國納入公部門網站法規。對比不足不只是美學問題，而是合規問題。
🧠 記
排版四口訣：流體縮放不斷點、可變字型一檔搞、三層階層不要多、對比不夠就是錯。
✍️ 實踐
打開自己常用的一個網站或 App，用瀏覽器縮放（Ctrl/Cmd 加減）從手機寬到桌機，觀察文字有沒有平滑縮放、還是有跳躍斷層。再用開發者工具（F12）的 Accessibility 面板或 WebAIM Contrast Checker 測量正文與背景的對比值，看有沒有達到 4.5:1。這兩個測試加起來不超過 10 分鐘，但能讓你馬上感受到「可讀性問題」的真實存在。
🔗 延伸學習
💬 想深入？複製下面這段到 AI（ChatGPT、Claude…），再打上你的問題
你是我的「UIUX」學習教練。我今天在學的主題是「排版設計與可讀性（Typography & Readability）」，重點包括：流體排版用 clamp() 平滑縮放、Variable Font 一個檔案搞定多粗細、三層視覺階層就夠、對比值 4.5:1 的無障礙要求。請用淺白、可操作的方式回答我接下來的問題，需要時給例子和步驟。我的問題是：
↑ 複製整段貼到 AI，最後接上你的問題即可。