モジュラースケールによるタイポグラフィ — 美しいフォントサイズ設計の基礎
タイポグラフィスケールは見出し・本文・キャプションなどのフォントサイズを数学的な比率で決定する手法です。音楽の音階のように一定の比率（ratio）でサイズを増減させることで、視覚的に調和したフォントサイズの体系を作れます。
モジュラースケールとは
モジュラースケールはベースサイズ（多くの場合16px）に対して一定の比率を掛け続けることでフォントサイズの段階を作る手法です。比率1.25（Major Third）なら16・20・25・31・39pxといった段階になります。Figmaや印刷デザインでも使われる普遍的な手法で、設計者の「感覚」に頼らず論理的なスケールを実現できます。
代表的なスケール比率
Minor Second（1.067）は密度が高く情報量の多いUIに向きます。Major Second（1.125）は本文と見出しのバランスが取りやすい標準的な比率です。Minor Third（1.2）・Major Third（1.25）は見出しにダイナミックな差をつけたいときに有効です。Perfect Fourth（1.333）・Golden Ratio（1.618）は大きなディスプレイや印刷物でのランディングページなどに映えます。
CSS変数としての出力
Typography Scale Generatorで生成したスケールはCSS変数（カスタムプロパティ）形式で出力できます。--text-xs・--text-sm・--text-base・--text-lg・--text-xl・--text-2xlのように名前を付けてrootに定義することで、デザインシステム全体で一貫したフォントサイズを参照できます。Tailwind CSSのextend設定にも転用できます。
px・remでの使い分け
ブラウザのデフォルトフォントサイズは16pxです。Webアクセシビリティの観点から、font-sizeにはpxよりremを使うことが推奨されています。remを使うとユーザーがブラウザのフォントサイズ設定を変更したときに全体が追従します。Typography Scale Generatorではpxとremどちらの値でも確認・コピーができます。