Hierarquia Tipográfica: Proporções H1, H2, Corpo para Menus

Seus clientes devem encontrar uma categoria do menu em 9 ou 18 segundos? A resposta está na proporção matemática da sua escala tipográfica. Um restaurante pide de 22 mesas em Bornova, İzmir, mudou de uma abordagem improvisada para a escala Major Second (1.125x) e reduziu o tempo de busca pela metade.

Por que Major Second a 1.125x?

Na tipografia, uma proporção de escala multiplica o menor tamanho de fonte para derivar os demais. Major Third (1.25x) maximiza contraste mas superdimensiona H1 em um menu. 1.125x parece natural porque reflete a mesma estrutura matemática dos intervalos musicais.

Comece com caption a 16px: caption 16, corpo 20, H2 28, H1 32. Em tablet essa escala lê-se confortavelmente; em mobile, baixe o corpo para 18px.

Tabela de Pixels

A combinação mais estável testada em produção:

• H1 (Título categoria): 32px / line-height 1.2 / font-weight 700
• H2 (Subcategoria): 28px / line-height 1.25 / font-weight 600
• Corpo (Nome produto): 20px / line-height 1.5 / font-weight 500

Os temas thMenu vêm com esses valores padrão. Para temas customizados, fixe a proporção em 1.125 e a base em 16px.

Validação com Type-Scale.com

Abra Type-Scale.com, selecione o preset "Major Second", insira 16 como base. Compare com seu menu real; use Chrome DevTools a 375px e 768px.

O proprietário Hakan observou queda de 12% no tempo de serviço após aplicar a nova escala.

FAQ

Devo usar Proporção Áurea (1.618x)? Não — ela superdimensiona H1 e quebra layouts single-screen.

Reduzir tudo em 80% no mobile? Apenas baixe o corpo para 18px; a proporção 1.125x mantém o resto proporcional.

Qual família de fonte? Sans-serif (Inter, Roboto, Open Sans) lê-se melhor em menus.

Achou útil? Compartilhe.