設計 / 排版
字級比例產生器（CSS與Tailwind的模組化比例）
從基準字體大小和比例（例如1.25或黃金比例）產生模組化字級比例，用自訂文字預覽每個階段，並以rem或px複製CSS自訂屬性或Tailwind fontSize設定。
字級比例產生器（CSS與Tailwind的模組化比例）: 每個大小都是基準值乘以比例，每增加一個階段就再乘一次：以16 px和大三度1.25為例，上方階段為20、25、31.25、39.06和48.83 px，下方階段則為12.8和10.24 px。大小會以px和rem列出，並採用類似Tailwind文字大小的命名，從xs到4xl。 全程在瀏覽器中於本機執行，檔案不會上傳至伺服器。
- 分類
- 開發者工具
- 使用次數
- 在瀏覽器中
- 費用
- 免費・免註冊
- 可用狀態
- 可立即使用
全程在瀏覽器中執行
:root {
--step-5: 3.0518rem;
--step-4: 2.4414rem;
--step-3: 1.9531rem;
--step-2: 1.5625rem;
--step-1: 1.25rem;
--step-0: 1rem;
--step--1: 0.8rem;
--step--2: 0.64rem;
}每個級距都是下一級乘以比例：基準大小為 16 px、比例為 1.25 時，上方大小為 20、25 和 31.25 px，下方大小為 12.8 和 10.24 px。1.125 等較小的比例適合資訊密集的介面；1.5 等較大的比例則能讓標題更有對比。rem 值以瀏覽器預設的 16 px 根大小為基準。
比例名稱的由來
這些名稱來自音樂音程：完全五度的頻率比例是3 : 2，因此以1.5建立的字級比例，會以和相隔五度的音符相同的比例增長。Tim Brown的模組化比例，讓這個概念在網路上廣為人知。
黃金比例1.618會帶來非常大的跳距；黃金比例計算機中有說明。
四捨五入
瀏覽器會呈現小數像素尺寸，因此31.25 px可以直接使用。如果設計系統需要整數像素，請將每個步驟四捨五入，並將rem值保留至小數點後四位，就像這項工具的處理方式一樣；其他數值請使用px轉rem轉換器進行轉換。
使用方式
- 輸入基準大小並選擇比例。
- 設定要向上和向下延伸的階段數，並用你的文字預覽。
- 複製CSS變數或Tailwind設定。
隱私與限制
所有操作都在你的瀏覽器中執行。
相關工具
常見問題
我應該使用哪個比例？
文字很多或螢幕較小的介面，適合使用1.125或1.2等較平緩的比例；編輯內容頁面和登陸頁面則可以使用1.333到1.618，讓標題更醒目。
為什麼要使用rem？
rem大小會依照讀者的瀏覽器字體大小設定調整，因此需要較大文字的人可以看到放大的文字。換算以預設的16 px根元素大小為基準。
可以讓大小具備流動性嗎？
可以：針對某個階段，取你想要的最小和最大大小，再使用CSS clamp產生器將它們轉換成clamp()運算式。
免費工具・使用在瀏覽器中次・免註冊