Gerarchia Tipografica: Rapporti H1, H2, Corpo per Menu

I vostri clienti dovrebbero trovare una categoria del menu in 9 o 18 secondi? La risposta è nel rapporto matematico della vostra scala tipografica. Un ristorante pide di 22 tavoli a Bornova, İzmir, è passato da un approccio improvvisato alla scala Major Second (1.125x) dimezzando il tempo di ricerca.

Perché Major Second 1.125x?

In tipografia, un rapporto di scala moltiplica la dimensione del font più piccola per derivare le altre. Major Third (1.25x) massimizza il contrasto ma ingrandisce troppo H1 in un menu. 1.125x sembra naturale perché riflette la stessa struttura matematica degli intervalli musicali.

Iniziate con caption a 16px: caption 16, corpo 20, H2 28, H1 32. Su tablet questa scala si legge comodamente; su mobile riducete il corpo a 18px.

Tabella Pixel

La combinazione più stabile testata in produzione:

• H1 (Titolo categoria): 32px / line-height 1.2 / font-weight 700
• H2 (Sotto-categoria): 28px / line-height 1.25 / font-weight 600
• Corpo (Nome prodotto): 20px / line-height 1.5 / font-weight 500

I temi thMenu hanno questi valori di default. Per temi personalizzati, bloccate il rapporto a 1.125 e la base a 16px.

Validazione con Type-Scale.com

Aprite Type-Scale.com, selezionate il preset "Major Second", inserite 16 come base. Confrontate con il menu reale; usate Chrome DevTools a 375px e 768px.

Il proprietario Hakan ha osservato un calo del 12% del tempo di servizio dopo aver applicato la nuova scala.

FAQ

Dovrei usare la Sezione Aurea (1.618x)? No — ingrandisce troppo H1 e rompe layout single-screen.

Ridurre tutto dell'80% su mobile? Riducete solo il corpo a 18px; il rapporto 1.125x mantiene il resto proporzionale.

Quale famiglia di font? Sans-serif (Inter, Roboto, Open Sans) si legge meglio nei menu.

Ti è stato utile? Condividilo.