Dev Tools
純前端檔案不上傳

Type Scale + Fluid clamp() 字級產生器

輸入 base size + 比例,自動算 -3 到 +6 共 10 階字級。**Fluid 模式**可同時設兩個視窗 base,輸出 clamp() 跨視窗自適應。一鍵輸出 Tailwind v4 @theme / CSS variables / SCSS。

模式
現代做法:每個 step 給 clamp(),在小視窗到大視窗間平滑縮放。Tailwind v4 / Astro / 現代 SSG 推薦。
字級預覽
  • smThe quick brown fox jumps over the lazy dog10.24px → 12.8px
  • base-1The quick brown fox jumps over the lazy dog12.8px → 16px
  • baseThe quick brown fox jumps over the lazy dog16px → 20px
  • lgThe quick brown fox jumps over the lazy dog20px → 25px
  • xlThe quick brown fox jumps over the lazy dog25px → 31.25px
  • 2xlThe quick brown fox jumps over the lazy dog31.25px → 39.06px
  • 3xlThe quick brown fox jumps over the lazy dog39.06px → 48.83px
  • 4xlThe quick brown fox jumps over the lazy dog48.83px → 61.04px
  • 5xlThe quick brown fox jumps over the lazy dog61.04px → 76.29px
輸出格式
tailwindTheme
@theme {
  --text-sm: clamp(0.64rem, 0.5943rem + 0.2286vw, 0.8rem);
  --text-base-1: clamp(0.8rem, 0.7429rem + 0.2857vw, 1rem);
  --text-base: clamp(1rem, 0.9286rem + 0.3571vw, 1.25rem);
  --text-lg: clamp(1.25rem, 1.1607rem + 0.4464vw, 1.5625rem);
  --text-xl: clamp(1.5625rem, 1.4509rem + 0.558vw, 1.9531rem);
  --text-2xl: clamp(1.9531rem, 1.8137rem + 0.6973vw, 2.4413rem);
  --text-3xl: clamp(2.4413rem, 2.2668rem + 0.8723vw, 3.0519rem);
  --text-4xl: clamp(3.0519rem, 2.8338rem + 1.0902vw, 3.815rem);
  --text-5xl: clamp(3.815rem, 3.5427rem + 1.3616vw, 4.7681rem);
}
›如何使用
  1. 上方選 Fluid clamp()(現代,推薦)或 固定 px / rem(傳統)模式。
  2. 選 modular ratio:Minor Second 1.067(密集)到 Golden Ratio 1.618(誇張)8 種音樂比例。多數 SaaS 用 Major Third(1.25)或 Perfect Fourth(1.333)。
  3. Fixed 模式:設 Base 字級(預設 16px)+ 最小 / 最大 step 範圍。
  4. Fluid 模式:設小視窗 base(手機,如 16px)+ 大視窗 base(桌面,如 20px)+ 兩個視窗寬度(預設 320 / 1440 px)。
  5. 中間 字級預覽 即時顯示每階大小;下面 輸出 tab 切 Tailwind v4 / CSS vars / SCSS / 純文字表格。
Tips
  • 為什麼用 Fluid:文字大小自動隨視窗縮放,手機 / 平板 / 桌面 / 大螢幕都剛好,不用寫一堆 @media query。
  • ratio 怎麼選:文字密集的 dashboard 用 1.2-1.25;品牌 landing page 用 1.333-1.5;極簡 hero 用 1.618。
  • Tailwind v4 直接吃 @theme { --text-xl: ... } 然後在 class 上用 text-xl,不用改 config 檔。
  • 對標 utopia.fyi(知名 fluid type scale 計算器),我們的輸出格式更乾淨、Tailwind v4 直接整合。

相關工具