AAppicLab

字型比例產生器

選一個比例、挑好字型，立即得到和諧的文字排版系統 — 一鍵匯出為 CSS 或 Tailwind。

4xl
4.209rem
The quick brown fox jumps over the lazy dog.
3xl
3.157rem
The quick brown fox jumps over the lazy dog.
2xl
2.369rem
The quick brown fox jumps over the lazy dog.
xl
1.777rem
The quick brown fox jumps over the lazy dog.
lg
1.333rem
The quick brown fox jumps over the lazy dog.
base
1.000rem
The quick brown fox jumps over the lazy dog.
sm
0.750rem
The quick brown fox jumps over the lazy dog.
xs
0.563rem
The quick brown fox jumps over the lazy dog.
:root {
  --font-heading: 'Playfair Display', serif;
  --font-body: 'Inter', sans-serif;

  /* Font properties */
  --font-weight-heading: 700;
  --font-weight-body: 400;
  --leading-heading: 1.2;
  --leading-body: 1.6;
  --tracking-heading: -0.02em;
  --tracking-body: 0em;

  /* Type scale */
  --text-xs: 0.563rem; /* 9.0px */
  --text-sm: 0.750rem; /* 12.0px */
  --text-base: 1.000rem; /* 16.0px */
  --text-lg: 1.333rem; /* 21.3px */
  --text-xl: 1.777rem; /* 28.4px */
  --text-2xl: 2.369rem; /* 37.9px */
  --text-3xl: 3.157rem; /* 50.5px */
  --text-4xl: 4.209rem; /* 67.3px */
}

常見問題

什麼是字型比例（Type Scale）？
字型比例是一組由單一基準大小與固定比例推算出的字體尺寸。每一步都是前一步乘以比例，形成視覺上和諧的層次。這個概念來自音樂音程，因此有「完全四度（1.333）」、「小三度（1.2）」等名稱。
應該選哪個比例？
以文字為主的介面（儀表板、文件），建議使用緊湊的比例如大二度（1.125）或小三度（1.2），避免各層級大小差距過懸殊。行銷頁面或雜誌式排版需要強烈層次時，完全四度（1.333）以上效果更佳。黃金比例（1.618）視覺衝擊大，但標題會很大，適合用於特定版面。
CSS 自訂屬性有什麼好處？
CSS 自訂屬性（CSS 變數）讓你在 :root 定義一次比例，在整個樣式表中引用。只需修改 --text-base 一個變數，所有相關大小都會自動連動更新。原生支援所有現代瀏覽器，不需要任何建置工具。
如何搭配 Tailwind CSS 使用？
複製 Tailwind 匯出內容，貼入 tailwind.config.js（或 .ts）的 theme.extend 區塊。產生的 fontSize 項目會覆蓋 Tailwind 同名預設值，其餘保持不變。之後就可以直接在 HTML 使用 text-lg、text-2xl 等 class。
為什麼用 rem 而不是 px？
rem 相對於瀏覽器根字體大小，使用者可以在瀏覽器設定中調整。當使用者將基準設為 20px，所有 rem 單位的字體都會等比放大，維持良好可讀性。px 是絕對單位，不受此設定影響。無障礙設計準則普遍建議字體使用 rem。
這個工具會從 Google 載入字型嗎？
會。當你在標題或內文面板選擇字型時，工具會動態注入 Google Fonts 的 CSS 連結，讓你即時預覽效果。AppicLab 不儲存任何字型資料。匯出的 CSS 與 Tailwind 設定只包含 font-family 名稱；你需要在自己的專案中加入對應的 Google Fonts link 標籤（或自行 host 的字型）。
字型比例產生器 — CSS 與 Tailwind 字體排版 · AppicLab