Типографическая Иерархия: Соотношения H1, H2, Body для Меню

Должен ли ваш гость найти категорию меню за 9 секунд или за 18? Ответ кроется в математическом соотношении вашей типографической шкалы. Ресторан pide на 22 столика в Борнове, Измир, перешёл с произвольного подхода на шкалу Major Second (1.125x) и сократил время поиска категории вдвое.

Почему Major Second 1.125x?

В типографике коэффициент шкалы умножает наименьший размер шрифта для получения остальных. Major Third (1.25x) максимизирует контраст, но непропорционально увеличивает H1 в меню. 1.125x ощущается естественно, так как отражает ту же математическую структуру, что и музыкальные интервалы.

Начните с caption 16px: caption 16, body 20, H2 28, H1 32. На планшете эта шкала читается комфортно; на мобильном уменьшите body до 18px.

Таблица Пикселей

Самая стабильная комбинация, протестированная в продакшене:

• H1 (Заголовок категории): 32px / line-height 1.2 / font-weight 700
• H2 (Подкатегория): 28px / line-height 1.25 / font-weight 600
• Body (Название продукта): 20px / line-height 1.5 / font-weight 500

Темы thMenu поставляются с этими значениями по умолчанию. Для кастомных тем зафиксируйте коэффициент на 1.125 и базу на 16px.

Валидация с Type-Scale.com

Откройте Type-Scale.com, выберите пресет "Major Second", введите 16 как базу. Сравните с реальным меню; используйте Chrome DevTools при 375px и 768px.

Владелец Хакан заметил снижение времени обслуживания столика на 12% после применения новой шкалы.

FAQ

Использовать Золотое Сечение (1.618x) вместо? Нет — оно непропорционально увеличивает H1 и ломает однобставные макеты.

Уменьшить всё на 80% на мобильном? Только уменьшите body до 18px; коэффициент 1.125x сохраняет остальное пропорциональным.

Какое семейство шрифтов? Sans-serif (Inter, Roboto, Open Sans) лучше читается в меню.

Было полезно? Поделитесь.