Jerarquía Tipográfica: Ratios H1, H2, Cuerpo para Menús

¿Sus clientes deberían encontrar una categoría del menú en 9 o 18 segundos? La respuesta está en el ratio matemático detrás de su escala tipográfica. Un restaurante pide de 22 mesas en Bornova, İzmir, cambió de un enfoque ad-hoc a la escala Major Second (1.125x) y redujo el tiempo de búsqueda a la mitad.

¿Por qué Major Second 1.125x?

En tipografía, un ratio de escala multiplica el tamaño de fuente más pequeño para derivar el resto. Major Third (1.25x) maximiza contraste pero sobredimensiona H1 en un menú. 1.125x se siente natural porque refleja la misma estructura matemática de los intervalos musicales.

Empiece con caption a 16px: caption 16, cuerpo 20, H2 28, H1 32. En tablet esta escala se lee cómodamente; en móvil, baje el cuerpo a 18px.

Tabla de Píxeles

La combinación más estable que hemos probado:

• H1 (Título categoría): 32px / line-height 1.2 / font-weight 700
• H2 (Subcategoría): 28px / line-height 1.25 / font-weight 600
• Cuerpo (Nombre producto): 20px / line-height 1.5 / font-weight 500

Los temas thMenu traen estos valores por defecto. Para temas personalizados, fije el ratio en 1.125 y la base en 16px.

Validación con Type-Scale.com

Abra Type-Scale.com, seleccione el preset "Major Second", introduzca 16 como base. Compare con su menú real; use Chrome DevTools a 375px y 768px.

El propietario Hakan observó una caída del 12% en el tiempo de servicio tras aplicar la nueva escala.

FAQ

¿Debería usar la Proporción Áurea (1.618x)? No — sobredimensiona H1 y rompe layouts single-screen.

¿Reducir todo un 80% en móvil? Solo baje el cuerpo a 18px; el ratio 1.125x mantiene el resto proporcional.

¿Qué familia de fuente? Sans-serif (Inter, Roboto, Open Sans) se lee mejor en menús.

¿Te resultó útil? Compártelo.