タイポグラフィ階層:メニューの H1・H2・本文サイズ比(Major Second 1.125x)

お客様にメニューのカテゴリーを 9 秒で見つけてほしいですか、それとも 18 秒?答えはタイポグラフィのスケール比に隠れています。イズミルのボルノバにある 22 席の pide レストランが、即興的な「H1 大・H2 中・本文小」アプローチから Major Second(1.125x)モジュラースケールに切り替え、カテゴリー検索時間が半減しました。

なぜ Major Second 1.125x?

タイポグラフィでは、スケール比が最小フォントサイズを乗算して他のサイズを導きます。Major Third(1.25x)はコントラストを最大化しますがメニューでは H1 が過大になります。1.125x は音楽の音程と同じ数学構造を持つため自然に感じられます。

16px キャプションから始めます:キャプション 16、本文 20、H2 28、H1 32。タブレットでは快適に読め、モバイルでは本文を 18px に下げるだけで OK です。

ピクセル表と使い方

本番環境で最も安定した組み合わせ:

• H1(カテゴリータイトル): 32px / 行間 1.2 / font-weight 700
• H2(サブカテゴリー): 28px / 行間 1.25 / font-weight 600
• 本文(商品名): 20px / 行間 1.5 / font-weight 500

thMenu テーマはこれらをデフォルトで搭載。カスタムテーマでは比率を 1.125 に、ベースを 16px に固定してください。

Type-Scale.com で検証

Type-Scale.com を開き、"Major Second" プリセットを選択、ベース 16 を入力。実際のメニューと比較し、Chrome DevTools の 375px と 768px で A/B テスト。

オーナー Hakan 氏は新スケール適用後、テーブルサービス時間が 12% 減少したと観察しました。

FAQ

黄金比(1.618x)を使うべき?いいえ — 黄金比は H1 を過大にし、シングルスクリーンレイアウトを破壊します。

モバイルですべて 80% 縮小?本文を 18px に下げるだけ。1.125x 比率が他を自動で比例維持。

どのフォントファミリーが最適?サンセリフ(Inter、Roboto、Open Sans)がメニューでは最も読みやすい。

お役に立ちましたか?シェアしてください。