タイポグラフィスケール生成器 — 調和のとれたフォントサイズ

任意に選んだフォントサイズはカオスに見えます。モジュラータイプスケールは数学的な比率を使って、デザイン全体で調和のとれた一貫したサイズを作ります。

モジュラースケールとは？

ベースサイズ（16pxなど）を固定比率で乗算します。Major Third（1.25）：10・12.5・16・20・25・31.3px。Perfect Fourth（1.333）はよりドラマチックなコントラスト。Minor Second（1.067）は微妙なスケール。

CSS カスタムプロパティの活用

--font-size-sm: 0.75rem; --font-size-base: 1rem; --font-size-lg: 1.25rem; --font-size-xl: 1.5rem. CSS変数を使えばベースサイズの変更で全タイポグラフィがスケールします。

Webに向けたスケール調整

モバイルは小さい比率（1.2）でコンパクトな階層を。デスクトップは大きい比率（1.333〜1.5）でよりドラマチックなコントラストを。clamp()を使ったFluid typographyでスケール間を滑らかに補間できます。