タイプスケールジェネレーター
このタイプスケール作成ツールは、基準のフォントサイズと比率（Minor Second 1.067 から黄金比 1.618 まで）からモジュラーなタイポグラフィのスケールを計算し、9 段階のサイズを CSS カスタムプロパティとして出力します。
このツールについて
このタイプスケール作成ツールは、基準のフォントサイズと比率（Minor Second 1.067 から黄金比 1.618 まで）からモジュラーなタイポグラフィのスケールを計算し、9 段階のサイズを CSS カスタムプロパティとして出力します。
使い方
- 基準のフォントサイズをピクセルで入力します（ブラウザの初期値は 16 px）。
- Major Third（1.25）などのスケール比率を選びます。
- 出力の単位を rem、px、em から選びます。
- 「CSS 変数をコピー」をクリックし、--xs から --4xl までのサイズを使います。
知っておきたいこと
- モジュラースケールの各段階は、前のサイズに同じ比率を掛けたものです。
- このツールは、基準より小さい 2 段階、基準、基準より大きい 6 段階の計 9 段階を作成します。
- 小さい比率（1.067–1.2）は情報量の多いインターフェースに、大きい比率（1.333–1.618）は大きな見出しのある読み物のページに向いています。
- rem の値は、ルートのフォントサイズ 16 px を基準に計算します。
- rem を使うと、ユーザーのブラウザのフォントサイズ設定に合わせて文字が拡大縮小されます。
すべてブラウザ内で動作します。入力した内容がアップロード・保存されることはありません。
よくある質問
モジュラータイプスケールとは何ですか？
各サイズが前のサイズに一定の比率を掛けたものになっているフォントサイズのセットで、見出しと本文の視覚的な関係性を保てます。
どのタイプスケール比率を使えばよいですか？
Major Third（1.25）と Perfect Fourth（1.333）は、どんな用途にも使いやすい人気の比率です。アプリやダッシュボードには小さい比率を、ランディングページやブログには大きい比率を使いましょう。
フォントサイズは rem と px のどちらにすべきですか？
ユーザーが好むブラウザのフォントサイズを尊重でき、アクセシビリティが向上するため、一般的には rem が推奨されます。
基準のフォントサイズはいくつにすべきですか？
16 px はブラウザの標準的な初期値で、本文の基準として適しています。多くのサイトでは、読みやすさのために 16–18 px を使っています。