TL;DR

Webタイポグラフィにおけるフォントサイズの決め方には「モジュラースケール」という理論がある。2011年にTim Brownが提唱したこの手法は、音楽の周波数比（完全四度=1.333、完全五度=1.5、黄金比=1.618など）を比率として用い、サイズ = ベース × 比率^n の数式でフォントサイズを算出する。活字印刷時代の調和的なサイズ体系をWeb向けに再定義したもので、Tailwind CSS Typographyなど主要フレームワークに採用されている。

なぜフォントサイズに「理論」が必要なのか

Webサイトのフォントサイズを決めるとき、多くの開発者は直感で値を選んでいる。h1は32px、h2は24px、本文は16px——なんとなくキリのいい数字を並べて、見た目のバランスを目で確認する。

しかしこの方法には一貫性がない。なぜ32pxであって30pxではないのか、h2とh3のサイズ差はh1とh2の差と釣り合っているのか。デザイナーが変わるたびにサイズ体系が崩れ、プロジェクトが大きくなるほど統一感が失われていく。

この問題に対して、数学的な根拠を持つ解決策を提示したのがTim Brownの「More Meaningful Typography」（A List Apart, 2011）だ。

モジュラースケールの計算式

モジュラースケールの考え方はシンプルだ。ベースサイズと比率の2つを決めれば、すべてのフォントサイズが自動的に導出される。

$\text{size}(n) = \text{base} \times \text{ratio}^n$

• $n = 0$：本文（ベースサイズそのもの）
• $n = 1, 2, 3, \dots$：見出しなどの上位要素
• $n = -1, -2, \dots$：キャプションやsmallなどの下位要素

■ 長三度 1.25■ 完全四度 1.333■ 完全五度 1.5■ 黄金比 1.618

def modular_scale(base: float, ratio: float, n: int) -> float:
    # size(n) = base × ratio^n
    return base * (ratio ** n)

# 例：ベース16px、完全四度（1.333）
base, ratio = 16, 1.333
for n in range(4, -3, -1):
    print(f"n={n:+d}: {modular_scale(base, ratio, n):.1f}px")

出力：

n=+4: 50.5px
n=+3: 37.9px
n=+2: 28.4px
n=+1: 21.3px
n=+0: 16.0px
n=-1: 12.0px
n=-2: 9.0px

この数列から各HTML要素にどの値を割り当てるかは、理論ではなく実装者の判断だ。一例を示す。

要素	n	サイズ（base=16px, ratio=1.333）
h1	+3	37.9px
h2	+2	28.4px
h3	+1	21.3px
body	0	16.0px
small / caption	-1	12.0px

モジュラースケール理論が提供するのは「調和的なサイズの数列」であり、どの要素をどのレベルに配置するかは設計上の選択だ。たとえばTailwind CSS Typographyはblockquoteにn=1（1.333em）を割り当てているが、BootstrapやNormalize.cssはblockquoteのfont-sizeを上書きしない。blockquoteを大きくするかどうかはスケール理論の帰結ではなく、フレームワークやテーマの実装方針による。

当ブログの blockquote { font-size: 1.333em } も、完全四度の比率を使っているという点ではスケールと整合しているが、それ自体は実装者の選択である。

音楽理論との関係

なぜ1.333や1.5といった「中途半端な」数字なのか。これらは音楽理論における音程の周波数比に由来する。

2つの音が「心地よく響く」とき、その周波数は整数比の関係にある。たとえばドとソ（完全五度）の周波数比は3:2、ドとファ（完全四度）は4:3だ。音楽における協和音程の理論は古代ギリシャのピタゴラスにまで遡る。

Tim Brownはこの「聴覚的な調和」を「視覚的な調和」に転用した。耳に心地よい比率は、目にも心地よいのではないか——という仮説だ。

主要な比率の一覧：

音程	周波数比	小数値	特徴
短二度（Minor Second）	16:15	1.067	ほぼ均一、段差が極めて小さい
長二度（Major Second）	9:8	1.125	控えめ
長三度（Major Third）	5:4	1.250	柔らか、穏やか
完全四度（Perfect Fourth）	4:3	1.333	落ち着いたバランス
完全五度（Perfect Fifth）	3:2	1.500	最もよく使われる
黄金比（Golden Ratio）	—	1.618	ダイナミック、メリハリが強い

比率が大きいほどサイズの段差が急になり、小さいほどなだらかになる。完全四度（1.333）は「目立ちすぎず、埋もれすぎない」中庸な選択だと言える。

graph LR
    A["長三度 1.25"] --> B["完全四度 1.333"]
    B --> C["完全五度 1.5"]
    C --> D["黄金比 1.618"]
    style A fill:#e8f5e9
    style B fill:#fff9c4
    style C fill:#e3f2fd
    style D fill:#fce4ec

ダブルストランド・スケール

Tim Brownは「More Meaningful Typography」の中で、基準値を1つではなく2つ使う「ダブルストランド・スケール」も提案している。

たとえば本文16pxと大見出し48pxの2つを基準にすると、それぞれの比率の累乗から得られる値を統合した、より柔軟なスケールが構築できる。

Important numbers in our design can serve as bases, and the ratio between those numbers, or a ratio meaningful to our content, can serve as our ratio.

Tim Brown, “More Meaningful Typography”

「デザインにとって重要な数値を基準にし、それらの比率、あるいはコンテンツにとって意味のある比率をスケールの比率にできる」ということだ。

同時にTim Brownは重要な但し書きも残している。

Math is no substitute for design. When the scale produces a number that doesn’t look right, override it. Just leave a comment in the code.

数式は万能ではない。スケールから導かれた値がデザイン上しっくりこなければ、上書きしてよい。ただしコードにコメントを残せ、と。理論に固執するのではなく、視覚的判断との併用を推奨している点が実用的だ。

活字印刷時代からの歴史

モジュラースケールの考え方は、実はTim Brownの発明ではない。活字印刷の時代から、フォントサイズには調和的な体系が存在していた。

金属活字のポイント制

18世紀中盤、フランスの活字鋳造師Pierre-Simon Fournierがポイント制の原型を作った。その後、Firmin Didotが改良したDidotポイント（1pt ≈ 0.376mm）がヨーロッパ大陸の標準となった。

金属活字の鋳造所では、以下のような標準的な級数が規格化されていた：

5pt, 6pt, 7pt, 8pt, 9pt, 10pt, 11pt, 12pt, 14pt, 16pt, 18pt, 20pt, 24pt, 28pt, 32pt, 36pt...

これらの数列をよく見ると、12pt以降はおおよそ一定の比率で増加している。12→14→16→18→24→36の流れは、完全に均等ではないが、大きな値ほど段差が広がるという対数的なスケーリングに従っている。

DTP時代を経てWebへ

flowchart LR
    A["活字鋳造 (18C)"] -->|"ポイント制の標準化"| B["DTP (1980s)"]
    B -->|"PostScript pt = 1/72 inch"| C["Web (1990s-)"]
    C -->|"16px base + em/rem"| D["モジュラースケール (2011-)"]

• 活字時代：物理的制約から標準サイズセットが自然発生
• DTP時代：PostScript（1pt = 1/72 inch ≈ 0.353mm）がデジタル標準に
• Web時代：ブラウザの16pxデフォルト + em/remの相対単位が主流に
• モジュラースケール：Tim Brownが音楽理論の比率で体系を再定義

活字印刷の職人が経験的に「このサイズの組み合わせは美しい」と感じていた調和を、数式で再現できるようにしたのがモジュラースケールだと言える。

フレームワークでの採用状況

Tailwind CSS Typography

Tailwind CSS Typographyは、proseクラスのサイズバリエーションでモジュラースケールに近い値を採用している。

クラス	ベースサイズ	blockquoteの比率	算出値
prose-sm	14px	1.286em	18px
prose-base	16px	1.25em	20px
prose-lg	18px	1.333em	24px
prose-xl	20px	1.5em	30px
prose-2xl	24px	1.5em	36px

prose-lgのblockquoteがまさに1.333em（完全四度）だ。

採用していないフレームワーク

一方で、すべてのフレームワークがモジュラースケールを採用しているわけではない。

• Bootstrap：blockquoteに明示的なfont-size指定なし（親要素から継承）
• Normalize.css：マージン正規化のみ、font-sizeは触らない

これらはより保守的なアプローチで、「フォントサイズの決定はデザイナーに委ねる」というスタンスだ。モジュラースケールは「推奨されるベストプラクティス」ではあるが、唯一の正解ではない。

ツール

実際にモジュラースケールを試すなら、以下のツールが便利だ。

• Type Scale：ビジュアルで比率を選択 → CSS自動生成
• Modular Scale：Tim Brown本人が開発した計算ツール

References

• Tim Brown, “More Meaningful Typography”, A List Apart, 2011
• Tim Brown, Flexible Typesetting, A Book Apart, 2018
• Robert Bringhurst, The Elements of Typographic Style, 1992（活字印刷の古典的名著）
• Tailwind CSS Typography Plugin
• Wikipedia: Interval (music)
• Wikipedia: Pierre Simon Fournier

以上。