Typografisk Hierarki: H1, H2, Brødtekst Størrelsesforhold til Menukort

Skal jeres gæst finde en menukategori på 9 eller 18 sekunder? Svaret gemmer sig i det matematiske forhold bag jeres typografiske skala. En pide-restaurant med 22 borde i Bornova, İzmir, skiftede fra en ad-hoc tilgang til Major Second-skalaen (1.125x) og halverede kategorisøgetiden.

Hvorfor Major Second på 1.125x?

I typografi ganger en skalaforhold den mindste skriftstørrelse for at udlede de øvrige. Major Third (1.25x) maksimerer kontrasten, men gør H1 uforholdsmæssigt stor i en menu. 1.125x føles naturligt, fordi det afspejler den samme matematiske struktur som musikalske intervaller.

Start med caption på 16px: caption 16, brødtekst 20, H2 28, H1 32. På tablet læses denne skala behageligt; på mobil sænker I brødteksten til 18px.

Pixeltabel

Den mest stabile kombination testet i produktion:

• 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 værdier som standard. Til brugerdefinerede temaer låses forholdet til 1.125 og basen til 16px.

Validering med Type-Scale.com

Åbn Type-Scale.com, vælg "Major Second"-presettet, indtast 16 som base. Sammenlign med jeres faktiske menu; brug Chrome DevTools ved 375px og 768px.

Ejeren Hakan observerede et fald på 12% i bordserviceringstid efter den nye skala.

FAQ

Skal jeg bruge Det Gyldne Snit (1.618x) i stedet? Nej — det gør H1 uforholdsmæssig og bryder single-screen layouts.

Reducere alt med 80% på mobil? Sænk kun brødteksten til 18px; 1.125x-forholdet holder resten proportionalt.

Hvilken skriftfamilie? Sans-serif (Inter, Roboto, Open Sans) læses bedst i menuer.

Var dette nyttigt? Del det.