Typografisk Hierarki: H1, H2, Brødtekst Størrelsesforhold for Menyer

Skal gjesten din finne en menykategori på 9 eller 18 sekunder? Svaret skjuler seg i det matematiske forholdet bak din typografiske skala. En pide-restaurant med 22 bord i Bornova, İzmir, byttet fra en ad-hoc tilnærming til Major Second-skalaen (1.125x) og halverte kategorisøketiden.

Hvorfor Major Second på 1.125x?

I typografi multipliserer et skalaforhold den minste skriftstørrelsen for å utlede de øvrige. Major Third (1.25x) maksimerer kontrasten, men gjør H1 uforholdsmessig stor i en meny. 1.125x føles naturlig fordi det reflekterer samme matematiske struktur som musikalske intervaller.

Start med caption på 16px: caption 16, brødtekst 20, H2 28, H1 32. På nettbrett leses denne skalaen behagelig; på mobil senker du brødteksten til 18px.

Pikseltabell

Den mest stabile kombinasjonen testet i produksjon:

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

thMenu-temaer leverer disse verdiene som standard. For tilpassede temaer låser du forholdet til 1.125 og basen til 16px.

Validering med Type-Scale.com

Åpne Type-Scale.com, velg "Major Second"-presetten, skriv inn 16 som base. Sammenlign med din faktiske meny; bruk Chrome DevTools på 375px og 768px.

Eieren Hakan observerte en nedgang på 12% i bordserveringstid etter ny skala.

FAQ

Bør jeg bruke Det Gyldne Snitt (1.618x) i stedet? Nei — det gjør H1 uforholdsmessig og bryter single-screen layouter.

Redusere alt med 80% på mobil? Senk bare brødteksten til 18px; 1.125x-forholdet holder resten proporsjonalt.

Hvilken skriftfamilie? Sans-serif (Inter, Roboto, Open Sans) leses best i menyer.

Var dette nyttig? Del det.