Typografische Hiërarchie: H1, H2, Body Groottenverhoudingen voor Menu's

Moet uw gast een menucategorie in 9 of 18 seconden vinden? Het antwoord schuilt in de wiskundige verhouding achter uw typografische schaal. Een pide-restaurant met 22 tafels in Bornova, İzmir, schakelde van een ad-hoc aanpak naar de Major Second-schaal (1.125x) en halveerde de zoektijd naar categorieën.

Waarom Major Second op 1.125x?

In typografie vermenigvuldigt een schaalverhouding de kleinste lettergrootte om de andere af te leiden. Major Third (1.25x) maximaliseert contrast maar maakt H1 onevenredig groot in een menu. 1.125x voelt natuurlijk aan omdat het dezelfde wiskundige structuur heeft als muzikale intervallen.

Begin met een caption van 16px: caption 16, body 20, H2 28, H1 32. Op tablet leest deze schaal comfortabel; op mobiel verlaagt u de body naar 18px.

Pixeltabel en Gebruik

De meest stabiele combinatie in productie getest:

• H1 (Categorietitel): 32px / line-height 1.2 / font-weight 700
• H2 (Subcategorie): 28px / line-height 1.25 / font-weight 600
• Body (Productnaam): 20px / line-height 1.5 / font-weight 500

thMenu-thema's leveren deze waarden standaard. Voor aangepaste thema's vergrendelt u de verhouding op 1.125 en de basis op 16px.

Validatie met Type-Scale.com

Open Type-Scale.com, selecteer de "Major Second"-preset en voer 16 in als basis. Vergelijk met uw werkelijke menu; gebruik Chrome DevTools op 375px en 768px.

De eigenaar Hakan merkte een daling van 12% in tafelservicetijd op na het toepassen van de nieuwe schaal.

FAQ

Moet ik in plaats daarvan Gulden Snede (1.618x) gebruiken? Nee — die maakt H1 onevenredig groot en breekt single-screen layouts.

Alles met 80% verkleinen op mobiel? Verlaag alleen body naar 18px; de verhouding 1.125x houdt de rest proportioneel.

Welke font-familie? Sans-serif (Inter, Roboto, Open Sans) leest het best in menu's.

Was dit nuttig? Deel het.