タイポグラフィ モジュラースケール生成ツール
基準サイズと比率から一貫したフォントサイズ段階を自動生成
도구를 불러오는 중…
🔒 すべてブラウザ内で処理されます。アップロードしたファイルや入力内容がサーバーに送信されることはありません。
基準フォントサイズと黄金比・完全五度などの比率を選ぶだけで、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項目に貼り付ければすぐに利用できます。