字型比例尺 使用指南
<p><strong>輸入：</strong>基 16px、比 1.25、6 檔。</p><p><strong>處理：</strong>遞推字號。</p><p><strong>輸出：</strong>--text-1…6…
核心功能
- 按基數與比例生成等比字號階梯（display 到 h6 共 7 級）
- 每級同時給出字號與示例文字預覽
- 可指定字型族並匯出 CSS 變數
- 純本地計算，不上傳任何輸入
適用場景
- 統一標題層級。
- 設計系統字號。
- 排版規範。
使用步驟
- 填寫基礎字號（正文常用 16px）
- 設定比例（1.2 緊湊 / 1.25 通用 / 1.333 舒展）
- 選擇字型族以便預覽真實觀感
- 核對各級字號與層級落差是否合理
- 複製 CSS 變數用於專案
實用技巧
- 比例越小層級越平緩，1.2 適合內容密集的後臺，1.333 以上適合營銷頁
- 正文低於 16px 在移動端可讀性會下降，基字號不宜過小
- 相鄰兩級字號差小於 15% 時視覺層級不明顯，容易分不清標題層次
- 行高需隨字號調整，大字號的行高比應減小，否則標題會顯得鬆散
常見問題
- 比例選多大？
- 1.2 緊湊、1.25 通用、1.333 舒展；按氣質選。
- 基字號怎麼定？
- 正文通常 16px 起；過小傷可讀，按受眾與裝置調整。
- 會儲存或上傳我的內容嗎？
- 結果以瀏覽器即時計算為準，純前端本地處理、資料不上傳；生成的樣式與程式碼僅作快速產出參考，正式專案請以設計系統、規範與瀏覽器實測為準。