🔠 タイプスケール生成（モジュラースケール）
基準フォントサイズと比率から、見出し〜本文まで一貫したフォントサイズの階段（モジュラースケール）を作ります。各段の px と rem を一覧表示し、CSSカスタムプロパティや clamp() を使った流体タイポとしてコピーできます。実際の大きさもその場でプレビューできます。
入力
CSSカスタムプロパティ（固定サイズ）
—
スケール一覧（大きい段が上）
| トークン | 役割（目安） | 段 | px | rem |
|---|
「段」は本文を0とした段数（＋が見出し側）。本文行はハイライト表示です。
プレビュー（実寸）
流体タイポ（clamp() 版）
解説
モジュラースケール（タイプスケール）とは、フォントサイズを1つの「基準サイズ」と1つの「比率」から機械的に導く方法です。各段の大きさは size(step) = 基準 × 比率^段数 で決まります。例えば基準16px・比率1.25なら、1段上は16×1.25=20px、2段上は16×1.25²=25px、1段下は16÷1.25=12.8px…と、隣り合う段がつねに同じ比になります。見出しから本文・注記までを同じ物差しでそろえるので、ページ全体に自然なリズムと統一感が生まれます。本ツールは基準・比率・段数を入れるだけで、この階段を一覧表とプレビュー、そしてコピーできるCSSとして出力します。
比率の選び方が全体の印象を左右します。1に近い1.067（Minor Second）や1.125（Major Second）は見出しと本文の差が小さく、情報量の多い管理画面や表組みに向きます。1.25（Major Third）や1.333（Perfect Fourth）は差が明確でWebページの標準的な選択肢、1.5（Perfect Fifth）や1.618（黄金比）は見出しが大きく跳ねるため、ランディングページなど印象重視のデザインに向きます。名前は音楽の音程（2度・3度・完全4度…）に由来しますが、意味は単に比の大きさで、迷ったら1.25あたりが扱いやすい標準です。プリセットに加え、任意のカスタム比率も入力できます。
出力では px と rem を併記します。px は固定の大きさ、rem はルート要素（html）のfont-sizeを基準にした相対値で、rem = px ÷ ルート で求めます。既定の16pxルートなら20px=1.25rem、25px≒1.5625remです。font-size には rem 指定が推奨されます。ユーザーがブラウザの文字サイズ設定を変えると rem 指定の文字も一緒に拡大縮小し、アクセシビリティやレスポンシブに強いためです。本ツールは各段を --fs-100 のようなCSSカスタムプロパティとして出力するので、font-size: var(--fs-500); のように呼び出して使えます。役割ラベル（h1・本文・注記など）は大きさの目安で、実際のHTML見出しレベルと必ずしも一致させる必要はありません。
clamp() 版は「流体タイポグラフィ」を生成します。clamp(最小, 可変, 最大) は、画面幅に応じてフォントサイズを最小値と最大値の間で滑らかに変えるCSS関数です。本ツールは画面幅360px〜1240pxを想定し、狭い画面では比率を圧縮した控えめな見出し、広い画面では通常サイズになるよう、ビューポート幅(vw)で線形補間した値を自動計算します。これによりメディアクエリを増やさずに、スマホでもPCでも破綻しない見出しサイズを1行で指定できます。本文や縮小段は大きく変える必要がないため固定 rem のままにしています。すべての計算はブラウザ内で完結し、入力値はどこにも送信されません。
よくある質問
モジュラースケールとは何ですか？
1つの基準サイズと1つの比率から、フォントサイズの階段を機械的に作る方法です。各段は「基準×比率の段数乗」で決まり、隣り合う段がつねに同じ比になります。見出しから本文・注記までを同じ物差しでそろえられるため、デザインに統一感とリズムが出ます。
比率はどれを選べばよいですか？
迷ったら1.25（Major Third）が扱いやすい標準です。情報量が多く見出しを目立たせすぎたくないなら1.125前後、逆にランディングページなどインパクト重視なら1.5や1.618（黄金比）が向きます。数字が大きいほど見出しと本文の差が強くなります。実際のプレビューを見て決めるのがおすすめです。
pxとremはどちらを使えばよいですか？
font-size には rem が推奨されます。remはルート要素のfont-sizeを基準にするため、ユーザーがブラウザの文字サイズ設定を変えると一緒に拡大縮小し、アクセシビリティに優れます。本ツールは両方を併記し、CSSは var(--fs-…) に rem 値を入れて出力します。
基準16px・比率1.25で2段上は何pxですか？
16×1.25×1.25＝25px（＝1.5625rem）です。1段上は16×1.25＝20px、3段上は16×1.25³≒31.25pxになります。基準や比率を変えると表とプレビューが即座に更新されます。
役割ラベル（h1・本文など）はそのままHTMLに合わせるべきですか？
いいえ、あくまで大きさの目安です。見出しレベル（h1〜h6）は文書構造で決めるもので、フォントサイズと1対1で対応させる必要はありません。トークン（--fs-…）で大きさを管理し、見出しタグには文脈に合ったサイズのトークンを割り当てるのがおすすめです。
clamp() 版はどう使いますか？
流体タイポグラフィ用のCSSです。clamp(最小, 可変, 最大) が画面幅に応じてサイズを自動調整します。本ツールは画面幅360px〜1240pxを想定し、見出し段だけを可変にします（本文・縮小段は固定）。メディアクエリを書かずに、スマホで大きすぎ・PCで小さすぎといった破綻を防げます。生成された各行を font-size: var(--fs-…); で呼び出してください。
トークン名（--fs-100 など）の番号はどう決まりますか？
一番小さい段を --fs-100 とし、1段上がるごとに +100 しています（--fs-200, --fs-300…）。すべて正の番号になるので扱いやすく、番号が大きいほど文字も大きくなります。段数を変えると番号も振り直されます。
入力した値はサーバーに送られますか？
送られません。計算はすべてブラウザ内で完結し、入力値はどこにも送信されません。オフラインでも利用できます。