Typography Hierarchy: H1, H2, Body Size Ratios for Restaurant Menus

Should your customer locate a menu category in 9 seconds or 18? The answer hides in the mathematical ratio behind your typography scale. A 22-table pide restaurant in Bornova, İzmir, switched from an ad-hoc "H1 big, H2 medium, body small" approach to the Major Second (1.125x) modular scale, and category-find time dropped by half. This guide explains why Major Second is the most menu-compatible ratio, which pixel values to use, and how to validate them with Type-Scale.com.

Why Major Second at 1.125x?

In typography, a scale ratio multiplies the smallest font size to derive every other size. Major Third (1.25x) maximizes contrast but oversizes H1 on a menu. Minor Third (1.2x) is still aggressive. 1.125x — Major Second — feels natural because it mirrors the same mathematical structure found in musical intervals.

Start with a 16px caption: caption 16, body 20, H2 28, H1 32. On tablet displays this scale reads comfortably; on mobile, drop body to 18px and the rest scales proportionally.

Pixel Table and Usage

Here's the most stable combination we've tested in production menus:

• H1 (Category title): 32px / line-height 1.2 / font-weight 700
• H2 (Sub-category): 28px / line-height 1.25 / font-weight 600
• Body (Product name): 20px / line-height 1.5 / font-weight 500
• Caption (Price, allergen): 16px / line-height 1.4 / font-weight 400

thMenu themes ship these defaults. For custom themes, lock ratio at 1.125 and keep base at 16px in Settings → Theme → Typography.

Validating with Type-Scale.com

Open Type-Scale.com, select the "Major Second" preset, enter 16 as base. The right panel auto-generates H1-H6 values. Compare them with your real menu rendering; use Chrome DevTools at 375px (iPhone SE) and 768px (iPad) widths to A/B test on mobile.

The Bornova owner, Hakan, observed table service time drop by 12% after applying the new scale. Customers found categories faster, so waiter-call frequency dropped too.

FAQ

Should I use Golden Ratio (1.618x) instead of Major Second? No — Golden Ratio oversizes H1 and breaks single-screen menu layouts. It's fine for editorial blogs, not menus.

Do I shrink all values by 80% on mobile? Just drop body to 18px; the 1.125x ratio keeps the rest proportional automatically.

Which font family works best? Sans-serif (Inter, Roboto, Open Sans) reads better in menus. Reserve serif (Playfair) for fine-dining concepts.

Found this helpful? Share it.