フォントのモジュラースケール生成ツール
基準となるフォントサイズと比率(メジャーサード、黄金比、パーフェクトフィフス、またはカスタム値)から、調和のとれたタイポグラフィのモジュラースケールを生成します。全段階の表と、そのまま貼り付けられるCSSカスタムプロパティ、SCSS変数、Tailwindのfontsize設定、JSONを取得できます。
入力
基準
1rem の基準となるサイズです。多くのブラウザの既定値は 16px です。
各段階は、ひとつ前の段階にこの比率を掛けた値になります。
出力
表示される値の小数点以下の桁数です。
出力
| 段階 | サイズ | ピクセル |
|---|---|---|
| No data yet | ||
このツールを使う他の方法
REST API
curl -X POST https://api.iotools.cloud/v1/tool/font-modular-scale-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"baseSize": "16",
"ratio": "1.25",
"customRatio": "1.25",
"unit": "rem",
"decimals": "3",
"exportFormat": "css"
}'ご自身のアカウントのキーに差し替えてください。ツールのフィールドがそのままリクエストボディになります——ラッパーはありません。
AIエージェントに依頼する
Use the IOTools `font-modular-scale-generator` tool (Font Modular Scale Generator) on this input:
YOUR_INPUT_HEREIOTools MCPサーバーに接続された任意のエージェントにこれを貼り付け、入力内容を追加してください。
埋め込みウィジェット
<iframe
src="https://iotools.cloud/embed/font-modular-scale-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="フォントのモジュラースケール生成ツール — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>ご自身のページに貼り付けるだけ——無料、キー不要、リンクを掲載するだけです。
| API/MCP 1回あたりの費用 | 5クレジットから |
|---|---|
| クレジットが足りませんか? | 料金を見る |
次の方法でも利用可能
ガイド
モジュラースケールとは、各段階が前の段階に一定の比率を掛けたものになっているフォントサイズの並びです。文字サイズを手作業で選んでバランスが取れていることを願う代わりに、基準サイズと音程にちなんだ比率をひとつ選ぶだけで、見出し、小見出し、キャプションのすべてが比例した調和のとれたリズムに収まります。このジェネレーターがそのスケールを作成し、CSS、SCSS、Tailwind、JSON 用のコピー＆ペースト可能なコードを出力します。
使い方
- 基準サイズをピクセルで設定します。
1remの基準となる大きさで、通常は 16px です。 - 比率を選びます。プリセットは古典的なタイポグラフィの音程です。密度の高い UI 向けの短2度 (1.067) から、黄金比 (1.618)、ドラマチックな編集的コントラストのためのオクターブ (2.0) まであります。1.01 から 3 の任意の値を設定するには カスタムを選びます。
- 出力の単位（
rem、em、px）と、丸める小数点以下の桁数を選びます。 - エクスポート形式を選びます。スケールの表はリアルタイムで更新され、コードボックスにはスタイルシートや設定ファイルにそのまま貼り付けられるブロックが表示されます。
段階の名前は、おなじみの Tailwind の命名規則に従っています。xs、sm、base、lg、xl、2xl … 6xl まで続き、base が選んだサイズで、その上下の各段階が比率を掛ける（または割る）ことで決まります。
どの比率を使うべきですか？
小さい比率 (1.067〜1.2) はサイズ同士が近くなるため、データの多いダッシュボードや本文の多いページに向いています。大きい比率 (1.333〜1.618) は明確で力強い階層を作るため、マーケティングサイトや長文記事に向いています。迷ったら、長3度 (1.25) が信頼性が高く汎用的な既定値です。
rem、em、px のどれを使うべきですか？
rem はアクセシビリティの観点で最も安全な選択肢です。ルートのフォントサイズに関するユーザーの設定に合わせて拡大縮小されるからです。em は親要素を基準に計算されるため、独立したコンポーネントに便利です。px は固定で予測しやすい一方、ユーザーのズーム設定を無視するため、本当に正確なサイズが必要な場合に限って使ってください。
基準サイズが常に 1rem/1em になるのはなぜですか？
相対単位は基準値の倍数として表されるためです。base の段階では値はちょうど 1rem（または 1em）になります。ピクセルの列には、それが解決される具体的なサイズが表示されます。単位を px に切り替えると、各段階を絶対的なピクセル値として確認できます。
Tailwind プロジェクトで使えますか？
はい。Tailwind 設定 (fontSize) 形式を選び、生成された fontSize ブロックを tailwind.config.js の theme.extend に貼り付けてください。キーは Tailwind の標準のサイズ名と一致するため、既存の text-lg、text-2xl などのユーティリティが新しいスケールを使うようになります。
プライバシー
すべての処理はお使いのブラウザ内で完結します。基準サイズ、比率、生成されたコードがお使いの端末の外に送信されることは一切なく、サーバーに送られることもありません。