🔤タイポグラフィスケール計算機

ベースフォントサイズとスケール比を選ぶだけで、H1〜XSまでのフォントサイズを自動計算します。

px

タイポグラフィスケールとは?

タイポグラフィスケール(モジュラースケール)は、ベースフォントサイズに一定の比率を繰り返し掛けて作るフォントサイズ体系です。音楽の和音のように数学的に調和した大きさの関係を生み出し、見出しと本文テキストが視覚的にバランスよく整います。

スケール比の選び方

比率が大きいほど各段階のサイズ差が大きくなります。Perfect Fourth(1.333)は明確な階層構造を作れるため最もよく使われます。Major Third(1.25)は上品で洗練された印象を与え、製品サイトや編集系コンテンツに向いています。黄金比(1.618)はランディングページや広告素材など劇的なコントラストが必要な場合に最適です。文章量の多いドキュメントにはMinor Third(1.2)のような小さな比率が読みやすくなります。

実際の適用方法

ベースには通常16px(ブラウザデフォルト)を使用します。px値を16で割ってremに変換し、CSSカスタムプロパティ(--font-h1、--font-bodyなど)として定義するとデザインシステムとして管理しやすくなります。rem単位を使うとユーザーがブラウザのフォントサイズを変更した際にも適切にスケールが調整され、アクセシビリティが向上します。

よくある質問

すべてのステップを使う必要がありますか?

いいえ。スケールはガイドラインであり絶対的なルールではありません。H1・H2・H3・本文・Smallなど必要な段階だけ使用してシンプルに管理することをお勧めします。

16px以外のベースサイズを使っても構いませんか?

はい、自由に設定できます。モバイルアプリでは14px、大画面ダッシュボードでは18pxをベースにすることもあります。ベース値が異なっても比率の関係は変わりません。