字級階梯：我如何選擇 13 個級距，以及比例為何重要

Robert Bringhurst 的《The Elements of Typographic Style》確立了一個原則：和諧的字型關係遵循音樂中相同的數學比例——完全四度（1.333）、完全五度（1.5）以及黃金比例（1.618）。我從完全四度開始，最終得出一個標準比例無法產生的自訂級數——因為我的內容結構需要在內文與展示標題之間有特定的級距。¹

TL;DR

字級階梯透過基準尺寸與數學比例生成一套字型大小層級。在建構 blakecrosley.com 的字型排版系統之後——13 個級距，從 0.75rem（12px）到 5rem（80px），完全使用系統字型——我學到的是，比例本身不如內文與 H1 之間的級距重要。我的階梯在相鄰級距之間大約使用 1.18 的遞增比例，但在內容結構需要視覺分隔的地方（從 3.875rem 到 5rem）刻意加大跳幅。以下的互動比較展示了嚴格比例與內容驅動調整之間的差異。

我的字級階梯：13 個級距

以下是我網站 critical.css 中的實際階梯：

:root {
  --font-size-xs:      0.75rem;   /* 12px — metadata, timestamps */
  --font-size-sm:      0.875rem;  /* 14px — captions, fine print */
  --font-size-base:    1rem;      /* 16px — body text, default */
  --font-size-lg:      1.125rem;  /* 18px — lead paragraphs */
  --font-size-xl:      1.3125rem; /* 21px — large body, section intro */
  --font-size-2xl:     1.5625rem; /* 25px — H4, card titles */
  --font-size-3xl:     1.875rem;  /* 30px — H3 */
  --font-size-4xl:     2.25rem;   /* 36px — H2 */
  --font-size-5xl:     2.7rem;    /* 43.2px — H1 */
  --font-size-6xl:     3.25rem;   /* 52px — large H1 */
  --font-size-7xl:     3.875rem;  /* 62px — page title */
  --font-size-display: 5rem;      /* 80px — hero headline */
}

相鄰級距之間的遞增並非嚴格的數學比例。從 xs 到 xl 的級距大約遵循 1.17-1.18 倍。從 5xl 到 display 的級距跳幅更大（1.20-1.29 倍），因為主視覺標題需要與頁面層級標題產生視覺分隔。²

為什麼不使用嚴格比例？

以 16px 為基準的嚴格大三度（1.25）會產生以下級距：16、20、25、31.25、39.06、48.83、61.04。從內文（16px）到 H3（31.25px）的跳幅接近 2 倍——對於 H3 頻繁出現的內容密集頁面來說太過劇烈。我的階梯壓縮了中間範圍（18、21、25、30、36），讓標題與內文保持適當比例，同時擴展頂端範圍（43、52、62、80）用於展示型排版。

是內容結構驅動了階梯，而非數學。我將每個級距對照真實部落格文章內容進行測試，並在模糊測試失敗的地方調整尺寸。³

為什麼選擇系統字型

我的字型堆疊：

:root {
  --font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text",
                 "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
}

效能論點

系統字型的載入時間為零毫秒。沒有網路請求、沒有 FOIT（不可見文字閃爍）、沒有 FOUT（無樣式文字閃爍）。這個選擇對我達成 Lighthouse 效能滿分 100/100 有直接貢獻。

自訂網頁字型通常會因字型檔案下載和瀏覽器渲染決策而增加 100-300 毫秒的首次內容繪製時間。Google Fonts 從 CDN 載入（至少需要一次 DNS 查詢加一次 HTTP 請求）。自行託管字型雖然免去 DNS 查詢，但仍需要下載。系統字型則消除了字型載入延遲的每一個環節。⁴

設計論點

系統字型與平台一致。在 macOS 上，我的網站以 SF Pro 渲染——這與 macOS 系統介面、Apple Mail 和 Safari 瀏覽器框架使用的是同一套字型。作業系統與網站之間的視覺連續性帶來原生感，而非品牌感。

Linear、Vercel 和 Raycast 採用相同的方式。這個模式源自我的 16 項產品設計研究：優先考慮內容可讀性而非品牌表達的產品，傾向於使用系統字型。

何時值得使用自訂字型

自訂字型適用於行銷頁面、品牌識別，以及字型本身即為設計的展示型排版。我的網站以內容為優先（部落格文章、專案描述），字型排版應該是透明的——讀者應該在處理內容，而非注意到字型。

字重系統

四種字重處理所有層級需求：

:root {
  --font-weight-normal:   400;  /* Body text */
  --font-weight-medium:   500;  /* Navigation, labels */
  --font-weight-semibold: 600;  /* Subheadings, emphasis */
  --font-weight-bold:     700;  /* Headlines, primary actions */
}

結合 13 個尺寸級距和四個透明度層級，我有 208 種潛在組合（13 種尺寸 × 4 種字重 × 4 種透明度）。實際上，我持續使用大約 15 種組合。這個系統提供了靈活性，而無需在每個文字實例上做決定——大多數文字使用 base 尺寸、normal 字重、primary 透明度。⁵

響應式字型排版

單一比例的問題

為桌面設計的字級階梯會在行動裝置上產生過大的標題。我的 display 尺寸 80px 在 1440px 視窗上表現完美，但在 375px 的手機螢幕上則過於龐大。我並未使用視窗單位縮放整個系統，而是針對特定中斷點進行覆寫：

@media (max-width: 1024px) {
  .hero__title { font-size: var(--font-size-6xl); }  /* 52px */
}

@media (max-width: 768px) {
  .hero__title { font-size: var(--font-size-3xl); }  /* 30px */
}

內文在所有視窗上保持 16px——內文不需要縮放，因為 16px 在每一個現代螢幕上都保持可讀性。只有展示型和標題尺寸在較小視窗上縮減。這種方式比流動式排版（clamp()）更簡單，並在已知中斷點上產生可預測的結果。⁶

展示尺寸的字距

大字型需要更緊密的字距追蹤。在 80px 時，預設字距會在字元之間產生明顯的間隙：

.hero__title {
  font-size: var(--font-size-display);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.03em;
  line-height: 1.05;
}

-0.03em 的字距和 1.05 的行高產生緊湊、有力的標題。16px 的內文使用預設字距搭配寬鬆的 1.7 行高以確保可讀性。緊密標題與通透內文之間的對比創造出視覺節奏，無需額外裝飾。⁷

測試字型排版

模糊測試

瞇起眼睛或退後幾步看螢幕。標題層級在每個層次都應保持視覺上的明確區分。如果 H3 和 H4 混在一起，代表所選字型的比例太小。

我將模糊測試應用於我的階梯，發現 --font-size-xl（21px）和 --font-size-2xl（25px）最初會模糊在一起。加入字重差異（xl 使用 normal 400，2xl 使用 semibold 600）在不改變尺寸的情況下解決了區分問題。字重能獨立於尺寸提供層級感。⁸

內容測試

使用真實內容填入每個標題層級。佔位文字會掩蓋層級問題，因為「Lorem Ipsum」缺乏真實語言的視覺重量變化。我將每次階梯調整對照我最長的部落格文章（漢明錯誤校正，2000 字以上，包含 H2、H3、H4、程式碼區塊、表格和腳註）進行測試。如果階梯能應對最複雜的內容，就能應對一切。

重點摘要

給設計師： - 從 16px 的基準尺寸開始，以 1.15 至 1.25 之間的比例對照真實內容進行測試；嚴格的數學比例在極端值處通常需要內容驅動的調整 - 在定案前使用模糊測試和內容測試；每個標題層級的視覺區分比數學純粹性更重要

給開發者： - 將字級階梯定義為 :root 層級的 CSS 自訂屬性；在整個程式碼庫中引用 var(--font-size-*)，防止任意字型大小的堆積 - 在使用自訂網頁字型前考慮系統字型；100-300 毫秒的字型載入節省在每次頁面載入時都會累積，且系統字型提供平台原生的可讀性 - 如果在已知寬度下的可預測結果比平滑插值更重要，請使用中斷點覆寫展示尺寸，而非流動式排版

參考文獻