Hiérarchie Typographique: Ratios H1, H2, Corps pour Menus

Vos clients devraient-ils trouver une catégorie de menu en 9 secondes ou en 18? La réponse se cache dans le ratio mathématique de votre échelle typographique. Un restaurant pide de 22 tables à Bornova, İzmir, est passé d'une approche désordonnée à l'échelle Major Second (1.125x) et a réduit de moitié le temps de localisation des catégories.

Pourquoi Major Second à 1.125x?

En typographie, un ratio d'échelle multiplie la plus petite taille de police pour dériver toutes les autres. Major Third (1.25x) maximise le contraste mais surdimensionne H1 dans un menu. 1.125x paraît naturel car il reflète la même structure mathématique que les intervalles musicaux.

Commencez avec une caption à 16px: caption 16, corps 20, H2 28, H1 32. Sur tablette, cette échelle se lit confortablement; sur mobile, descendez le corps à 18px.

Tableau des Pixels

La combinaison la plus stable testée en production:

• H1 (Titre catégorie): 32px / line-height 1.2 / font-weight 700
• H2 (Sous-catégorie): 28px / line-height 1.25 / font-weight 600
• Corps (Nom produit): 20px / line-height 1.5 / font-weight 500

Les thèmes thMenu fournissent ces valeurs par défaut. Pour des thèmes personnalisés, verrouillez le ratio à 1.125 et gardez la base à 16px.

Validation avec Type-Scale.com

Ouvrez Type-Scale.com, sélectionnez le préréglage "Major Second", entrez 16 comme base. Comparez avec votre menu réel; utilisez Chrome DevTools à 375px et 768px.

Le propriétaire Hakan a observé une baisse de 12% du temps de service après l'application de la nouvelle échelle.

FAQ

Devrais-je utiliser le Nombre d'Or (1.618x)? Non — il surdimensionne H1 et casse les layouts single-screen.

Réduire tout de 80% sur mobile? Descendez juste le corps à 18px; le ratio 1.125x garde le reste proportionnel.

Quelle famille de police? Sans-serif (Inter, Roboto, Open Sans) se lit mieux dans les menus.

Cet article vous a été utile ? Partagez-le.