Typografie-Hierarchie: H1, H2, Body Größenverhältnisse für Menüs

Soll Ihr Gast eine Menükategorie in 9 oder 18 Sekunden finden? Die Antwort liegt im mathematischen Verhältnis hinter Ihrer Typografieskala. Ein Pide-Restaurant mit 22 Tischen in Bornova, İzmir, wechselte von einem unsystematischen Ansatz zur Major-Second-Skala (1.125x) und halbierte die Kategoriefindzeit.

Warum Major Second bei 1.125x?

In der Typografie multipliziert ein Skalenverhältnis die kleinste Schriftgröße, um alle anderen abzuleiten. Major Third (1.25x) maximiert Kontrast, vergrößert aber H1 unverhältnismäßig in einem Menü. 1.125x wirkt natürlich, weil es dieselbe mathematische Struktur wie musikalische Intervalle hat.

Beginnen Sie mit 16px Caption: Caption 16, Body 20, H2 28, H1 32. Auf Tablets liest sich diese Skala bequem; mobil reduzieren Sie Body auf 18px.

Pixel-Tabelle und Anwendung

Die stabilste Kombination, die wir in Produktionsmenüs getestet haben:

• H1 (Kategorietitel): 32px / Zeilenhöhe 1.2 / font-weight 700
• H2 (Unterkategorie): 28px / Zeilenhöhe 1.25 / font-weight 600
• Body (Produktname): 20px / Zeilenhöhe 1.5 / font-weight 500

thMenu-Themes liefern diese Standardwerte. Für benutzerdefinierte Themes: Verhältnis bei 1.125 fixieren, Basis bei 16px in Einstellungen → Theme → Typografie.

Validierung mit Type-Scale.com

Öffnen Sie Type-Scale.com, wählen Sie das "Major Second"-Preset und geben Sie 16 als Basis ein. Vergleichen Sie mit Ihrem realen Menü; nutzen Sie Chrome DevTools bei 375px und 768px.

Der Bornova-Inhaber Hakan beobachtete einen 12%igen Rückgang der Tischbedienzeit nach Anwendung der neuen Skala.

FAQ

Sollte ich stattdessen Goldener Schnitt (1.618x) verwenden? Nein — Goldener Schnitt vergrößert H1 unproportional und bricht Single-Screen-Layouts.

Alle Werte mobil um 80% verkleinern? Reduzieren Sie nur Body auf 18px; das 1.125x-Verhältnis hält den Rest proportional.

Welche Schriftfamilie? Sans-Serif (Inter, Roboto, Open Sans) liest sich in Menüs am besten.

Hilfreich? Teilen Sie es.