Hierarchia Typograficzna: Proporcje H1, H2, Tekst dla Menu

Czy klient ma znaleźć kategorię menu w 9 czy 18 sekund? Odpowiedź kryje się w matematycznej proporcji za waszą skalą typograficzną. Restauracja pide z 22 stolikami w Bornova, İzmir, przeszła z prowizorycznego podejścia na skalę Major Second (1.125x) i skróciła czas wyszukiwania kategorii o połowę.

Dlaczego Major Second 1.125x?

W typografii proporcja skali mnoży najmniejszy rozmiar czcionki, by wyprowadzić pozostałe. Major Third (1.25x) maksymalizuje kontrast, ale czyni H1 nieproporcjonalnie dużym w menu. 1.125x wydaje się naturalny, bo odzwierciedla strukturę matematyczną interwałów muzycznych.

Zacznijcie od caption 16px: caption 16, tekst 20, H2 28, H1 32. Na tablecie ta skala czyta się wygodnie; na mobile zmniejszcie tekst do 18px.

Tabela Pikseli

Najbardziej stabilna kombinacja przetestowana w produkcji:

• H1 (Tytuł kategorii): 32px / line-height 1.2 / font-weight 700
• H2 (Podkategoria): 28px / line-height 1.25 / font-weight 600
• Tekst (Nazwa produktu): 20px / line-height 1.5 / font-weight 500

Motywy thMenu mają te wartości domyślnie. Dla niestandardowych motywów zablokujcie proporcję na 1.125 i bazę na 16px.

Walidacja z Type-Scale.com

Otwórzcie Type-Scale.com, wybierzcie preset "Major Second", wprowadźcie 16 jako bazę. Porównajcie z waszym rzeczywistym menu; użyjcie Chrome DevTools przy 375px i 768px.

Właściciel Hakan zauważył 12% spadek czasu obsługi stolika po zastosowaniu nowej skali.

FAQ

Czy powinienem użyć Złotego Podziału (1.618x)? Nie — czyni H1 nieproporcjonalnym i łamie layouty single-screen.

Zmniejszyć wszystko o 80% na mobile? Wystarczy zmniejszyć tekst do 18px; proporcja 1.125x utrzymuje resztę proporcjonalnie.

Która rodzina czcionek? Sans-serif (Inter, Roboto, Open Sans) czyta się najlepiej w menu.

Czy to było pomocne? Udostępnij.