タイプスケール生成ツール
ベースサイズと比率、段階数を指定すると、見出しから本文までのフォントサイズの段階（モジュラースケール）を生成します。
設定
プレビュー
対応CSS
使い方
1
ベースサイズを入力
本文に使う基準フォントサイズ（例：16px）を入力します。
2
比率と段階数を選ぶ
1.25（メジャーサード）や1.618（黄金比）などの比率と、上下の段階数を指定します。
3
プレビューで確認
各段階のサイズがpx/remとプレビューで即座に表示されます。
4
CSSをコピー
生成されたカスタムプロパティのCSSをコピーして、そのまま使えます。
タイプスケールとは
タイプスケール（モジュラースケール）とは、一定の比率を掛け合わせてフォントサイズの段階を作る手法です。音階のように調和の取れたサイズ群が得られ、見出しから本文までの視覚的な階層が美しく整います。このツールはすべての計算をブラウザ内で行い、入力内容をサーバーに送信しません。
機能
- リアルタイム生成入力と同時に各段階のサイズとプレビューを更新します。
- 比率プリセット＋任意指定黄金比や音階比のプリセットに加え、任意の比率も指定できます。
- px / rem 同時表示px値とルートサイズ基準のrem値を同時に確認・コピーできます。
- CSSをそのまま出力カスタムプロパティ形式のCSSを生成し、ワンクリックでコピー可能です。
活用シーン
- デザインシステムのタイポグラフィ設計
- 見出し（h1〜h6）のサイズ決定
- Webサイト・LPの文字サイズ調整
- Figma/XDのテキストスタイル定義
- rem基準のレスポンシブ設計
よくある質問
どの比率を選べばよいですか？
本文中心のサイトでは1.2〜1.333程度の控えめな比率が扱いやすく、見出しを大きく見せたいランディングページなどでは1.5や黄金比1.618などの大きな比率が向いています。まずは1.25（メジャーサード）から試すのがおすすめです。
pxとremのどちらを使うべきですか？
アクセシビリティの観点では、ユーザーのブラウザ設定（デフォルト文字サイズ）に追従するremの利用が推奨されます。rem値はルートサイズ（標準16px）を基準に計算しています。
「上の段階数・下の段階数」とは何ですか？
ベースサイズより大きい段階（見出し方向）の数が「上の段階数」、小さい段階（注釈・キャプション方向）の数が「下の段階数」です。必要なサイズの種類に合わせて調整してください。
黄金比（1.618）はどんなときに使いますか？
黄金比は段階ごとのサイズ差が大きく、見出しと本文のコントラストを強く出したいデザインに向いています。情報量の多い画面では差が大きすぎることもあるため、プレビューで確認しながら調整しましょう。
入力した値はサーバーに送信されますか？
いいえ。サイズ計算からCSS生成まで、すべての処理はお使いのブラウザ内で完結します。入力した数値や生成結果が外部サーバーに送信・保存されることはなく、安心してご利用いただけます。