流暢排版系統
目的
流暢排版系統技能允許建立能平順適應使用者視口大小的排版級距。與其在特定斷點之間跳躍固定尺寸，排版會透過 CSS clamp() 函數在定義的最小與最大值之間線性縮放。這樣可以提升視覺和諧度、可讀性，並減少管理大量媒體查詢的維護開銷。
使用情境
- 從零開始建立響應式設計系統。
- 為現有網站現代化排版，以提升跨裝置一致性。
- 建立讓文字在所有螢幕尺寸下都能完美填滿可用空間的版面。
- 用一組流暢變數取代多個
@media規則，簡化 CSS。
何時不應使用
- 舊版瀏覽器支援： 如果專案必須支援不支援
clamp()的瀏覽器（例如 Internet Explorer）。 - 固定寬度設計： 當版面嚴格固定，且不打算具有響應式特性。
- 極端精確度： 如果特定品牌規範要求在每個可能的解析度下有與線性級距不符的固定像素尺寸。
輸入
要產生流暢排版系統，你需要：
- 視口範圍：
min-width：縮放開始的螢幕寬度（例如 320px）。max-width：縮放停止的螢幕寬度（例如 1200px）。
- 基礎字型大小：
min-size：在min-width時的文字主體字型大小（例如 16px）。max-size：在max-width時的文字主體字型大小（例如 20px）。
- 級距比例：
- 用來決定標題大小的乘數（例如 "大三度" 的 1.250，"完全四度" 的 1.333）。
輸出
- CSS 自訂屬性： 一組定義流暢級距的 CSS 變數區塊。
- 排版工具類別（選用）： 便於套用級距的 CSS 類別。
- 層級文件： 從文字主體到 H1 大小的清晰對照。
工作流程
1. 定義級距參數
決定最小與最大視口以及基礎尺寸。 範例： 320px 到 1280px，16px 到 18px 基底。
2. 選擇排版級距
選擇符合品牌調性的比例。
- 1.067（小二度）： 差異細微，適合密集資料。
- 1.200（小三度）： 標準、均衡。
- 1.414（增四度）： 高對比、強烈標題。
3. 計算層級
將基礎尺寸乘以比例以獲得各層級（H6 到 H1）。
公式： Size_level = Base * (Ratio ^ Level)
4. 產生流暢公式
將計算出的最小/最大像素值轉換為 clamp() 函數。
clamp(min, preferred, max)
偏好值的計算：
slope = (max_size - min_size) / (max_viewport - min_viewport)
y_intercept = min_size - slope * min_viewport
preferred = (y_intercept) + (slope * 100vw)
5. 實作
將產生的 CSS 變數套用至設計。
決策規則
- 無障礙優先： 文字主體的最小尺寸
min-size應盡量不低於1rem（16px）。 - 使用者偏好： 最終輸出時一律使用
rem單位，以便尊重使用者瀏覽器的字型大小設定。切勿在沒有rem基礎的最小/最大限制下只使用vw單位——純視口單位會忽略使用者的瀏覽器縮放與字型大小偏好，且可能違反 WCAG 1.4.4（調整文字大小）。 - 級距強度： 對於行動裝置為主的網站，使用較小的比例，以防止標題在小螢幕上變得過大。
限制
- 響應性： 排版必須保持在其容器的範圍內，不得造成溢出。
- 可讀性： 行長（量測標準）理想上應維持在 45-75 個字元之間。隨著文字縮放，應調整容器寬度。
- 層級： H1 必須在視覺上明顯區別且大於 H2，H2 大於 H3，以此類推。
常見失敗模式
- 計算錯誤： 導致文字在螢幕變大時反而縮小。
- 單位不一致： 混用
px與rem，導致瀏覽器縮放異常。 - 過度縮放： 標題在 4K 顯示器上過大，佔據整個視口。
- 無障礙問題： 忘記測試當使用者放大或增加作業系統/瀏覽器基礎字型大小時，流暢級距的表現（WCAG 1.4.4 調整文字大小、WCAG 1.4.10 重新排版）。
驗證標準
- 調整瀏覽器視窗大小時，排版流暢縮放。
- 未出現可見的「跳躍」或尺寸突然變化。
- 所有文字在 320px 寬度下仍可辨識。
- 標題相對於文字主體維持清晰的層級。
- 系統使用
rem單位作為基礎，並使用clamp()實現流暢行為。 - 在 400% 瀏覽器縮放下，文字能重新排版且內容或功能不受損（WCAG 1.4.10 重新排版），並尊重使用者的字型大小偏好（WCAG 1.4.4）。