タイポグラフィ モジュラースケール生成ツール
基準サイズと比率から一貫したフォントサイズの段階を自動生成
基準となるフォントサイズと比率（黄金比、完全5度など）を決めるだけで、XS から 5XL までの9段階のフォントサイズを自動計算し、リアルタイムプレビューで確認できるツールです。デザイナーやフロントエンドエンジニアが Web サイトのタイポグラフィ設計を整えるときに役立ち、結果は CSS 変数や Tailwind CSS の設定コードとしてそのままコピーしてプロジェクトに貼り付けられます。計算はすべてブラウザ内で行われ、サーバーには送信されません。
도구를 불러오는 중…
🔒 すべてブラウザ内で処理されます。アップロードしたファイルや入力内容がサーバーに送信されることはありません。
使い方
- 基準となるフォントサイズ（px）を入力します。
- 1.067（短2度）から 2.000（オクターブ）まで、使いたい比率を一覧から選びます。
- プレビューの文言を好きなテキストに変えながら、各段階の実際の見え方を確認します。
- 生成された CSS 変数または Tailwind 設定をコピーボタンで取得し、プロジェクトに適用します。
よくある質問
- モジュラースケールの比率はどれを選べばよいですか？
- 本文の情報量が多いサイトには 1.125〜1.25 のような小さめの比率が、見出しのコントラストを強く出したいランディングページには 1.5 や黄金比（1.618）のような大きめの比率が向いています。プレビューで実際に見比べるのが最も確実です。
- px ではなく rem で出力されるのはなぜですか？
- rem はユーザーのブラウザ側のフォントサイズ設定を尊重できるためアクセシビリティに優れ、レスポンシブなタイポグラフィの実装でも標準的に使われるからです。参考用に px 値も併記されます。
- 生成した値は実際のプロジェクトにどう適用しますか？
- CSS 変数の結果をコピーして :root に貼り付けるか、Tailwind 設定の結果を tailwind.config の fontSize に貼り付ければ、そのまま使えます。