Typografisk Hierarki: H1, H2, Brödtext Storleksförhållanden för Menyer

Ska gästen hitta en menykategori på 9 eller 18 sekunder? Svaret döljer sig i det matematiska förhållandet bakom din typografiska skala. En pide-restaurang med 22 bord i Bornova, İzmir, gick från ett ad-hoc-tillvägagångssätt till Major Second-skalan (1.125x) och halverade kategorisökstiden.

Varför Major Second på 1.125x?

I typografi multiplicerar ett skalförhållande den minsta typsnittsstorleken för att härleda de övriga. Major Third (1.25x) maximerar kontrasten men gör H1 oproportionerligt stor i en meny. 1.125x känns naturligt eftersom det speglar samma matematiska struktur som musikaliska intervaller.

Börja med caption på 16px: caption 16, brödtext 20, H2 28, H1 32. På surfplatta läses denna skala bekvämt; på mobil sänker ni brödtexten till 18px.

Pixeltabell

Den mest stabila kombinationen testad i produktion:

• H1 (Kategorititel): 32px / line-height 1.2 / font-weight 700
• H2 (Underkategori): 28px / line-height 1.25 / font-weight 600
• Brödtext (Produktnamn): 20px / line-height 1.5 / font-weight 500

thMenu-teman levererar dessa värden som standard. För anpassade teman låser ni förhållandet till 1.125 och basen till 16px.

Validering med Type-Scale.com

Öppna Type-Scale.com, välj "Major Second"-presetet, ange 16 som bas. Jämför med er faktiska meny; använd Chrome DevTools vid 375px och 768px.

Ägaren Hakan observerade en minskning på 12% i bordsservicetid efter den nya skalan.

FAQ

Ska jag använda Gyllene Snittet (1.618x) istället? Nej — det gör H1 oproportionerlig och bryter single-screen-layouter.

Minska allt med 80% på mobil? Sänk bara brödtexten till 18px; 1.125x-förhållandet håller resten proportionellt.

Vilken typsnittsfamilj? Sans-serif (Inter, Roboto, Open Sans) läses bäst i menyer.

Var detta hjälpsamt? Dela det.