使い方
- ベースフォントサイズのスライダーで基準となる文字サイズを設定します（通常 16px）。
- スケール比率のプリセットから用途に合った音楽的比率を選択します。見出しが大きくメリハリをつけたい場合は Major Third（1.25）以上を推奨します。
- 行間・字間スライダーで全体の読みやすさを調整します。
- プレビューエリアに各ステップのフォントサイズと実際のテキスト表示が更新されます。
- 下部の「CSS変数」または「Tailwind config」タブを選び、コピーボタンでクリップボードにコピーします。
- コピーしたコードをプロジェクトの CSS ファイルや
tailwind.config.jsに貼り付けて完了です。
タイポグラフィスケールとは
タイポグラフィスケールとは、見出し（h1〜h6）・本文・小見出しなどのフォントサイズを、ひとつの比率に基づいて数学的に導き出す設計手法です。音楽の音程比（ドレミ）と同様に、隣り合うサイズが一定の比率を持つことで、視覚的な調和とリズムが生まれます。デザインシステムやコンポーネントライブラリを構築する際に、場当たり的なフォントサイズ指定を避け、一貫性のある UI を実現するために広く使われています。本ツールはベースサイズとスケール比率を入力するだけで CSS カスタムプロパティ（変数）および Tailwind CSS の fontSize 設定を自動生成し、すぐにプロジェクトへ導入できます。登録不要・無料でご利用いただけます。
比率の選び方ガイド
- Minor Second (1.067) — 差が小さく、本文主体のコンテンツ向き。
- Major Second (1.125) — 細やかなスケール。ブログや記事サイト向き。
- Minor Third (1.2) — バランスが取れた標準的な選択肢。汎用的に使いやすい。
- Major Third (1.25) — 程よいメリハリ。ランディングページ向き。
- Perfect Fourth (1.333) — クラシックな比率。モダンなWebデザインでよく見られる。
- Augmented Fourth (1.414) — √2 の比率。力強い見出しと本文のコントラスト。
- Perfect Fifth (1.5) — 大胆なコントラスト。ポートフォリオ・プロモーション向き。
- Golden Ratio (1.618) — 黄金比。最もドラマチックなスケール。大画面向け。