Typografická Hierarchie: Poměry H1, H2, Textu pro Jídelní Lístky

Má váš host najít kategorii menu za 9 nebo 18 sekund? Odpověď se skrývá v matematickém poměru za vaší typografickou škálou. Pide restaurace s 22 stoly v Bornova, İzmir, přešla z ad-hoc přístupu na škálu Major Second (1.125x) a zkrátila čas hledání kategorií o polovinu.

Proč Major Second 1.125x?

V typografii poměr škály násobí nejmenší velikost písma pro odvození ostatních. Major Third (1.25x) maximalizuje kontrast, ale dělá H1 v menu neúměrně velký. 1.125x působí přirozeně, protože odráží stejnou matematickou strukturu jako hudební intervaly.

Začněte s caption 16px: caption 16, text 20, H2 28, H1 32. Na tabletu se tato škála čte pohodlně; na mobilu snižte text na 18px.

Tabulka Pixelů

Nejstabilnější kombinace testovaná v produkci:

• H1 (Název kategorie): 32px / line-height 1.2 / font-weight 700
• H2 (Podkategorie): 28px / line-height 1.25 / font-weight 600
• Text (Název produktu): 20px / line-height 1.5 / font-weight 500

Motivy thMenu mají tyto hodnoty výchozí. Pro vlastní motivy zafixujte poměr na 1.125 a základ na 16px.

Validace s Type-Scale.com

Otevřete Type-Scale.com, vyberte preset "Major Second", zadejte 16 jako základ. Porovnejte s vaším skutečným menu; použijte Chrome DevTools při 375px a 768px.

Majitel Hakan zaznamenal 12% pokles času obsluhy stolu po aplikaci nové škály.

FAQ

Mám použít Zlatý řez (1.618x) místo toho? Ne — dělá H1 neúměrným a láme single-screen layouty.

Zmenšit vše o 80% na mobilu? Stačí snížit text na 18px; poměr 1.125x udržuje zbytek proporcionální.

Která rodina písma? Sans-serif (Inter, Roboto, Open Sans) se v menu čte nejlépe.

Bylo to užitečné? Sdílejte to.