Tipográfiai Hierarchia: H1, H2, Szövegtörzs Méretarányok Étlapokhoz

9 vagy 18 másodperc alatt találja meg a vendége az étlap kategóriát? A válasz a tipográfiai skála matematikai arányában rejlik. Egy 22 asztalos pide étterem Bornovában (İzmir) ad-hoc megközelítésről áttért a Major Second (1.125x) skálára, és felére csökkent a kategória keresési idő.

Miért Major Second 1.125x?

A tipográfiában a skálaarány a legkisebb betűméretet szorozza, hogy a többit származtassa. A Major Third (1.25x) maximalizálja a kontrasztot, de aránytalanul naggyá teszi a H1-et az étlapon. Az 1.125x természetesnek tűnik, mert ugyanazt a matematikai struktúrát tükrözi, mint a zenei intervallumok.

Kezdje 16px caption mérettel: caption 16, szövegtörzs 20, H2 28, H1 32. Tableten ez a skála kényelmesen olvasható; mobilon csökkentse a szövegtörzset 18px-re.

Pixel Tábla

A leg stabilabb kombináció, amit éles környezetben teszteltünk:

• H1 (Kategória cím): 32px / line-height 1.2 / font-weight 700
• H2 (Alkategória): 28px / line-height 1.25 / font-weight 600
• Szövegtörzs (Termék név): 20px / line-height 1.5 / font-weight 500

A thMenu témák alapértelmezetten ezeket az értékeket szállítják. Egyedi témákhoz rögzítse az arányt 1.125-re és az alapot 16px-re.

Validáció Type-Scale.com-mal

Nyissa meg a Type-Scale.com-ot, válassza a "Major Second" presetet, adja meg 16-ot alapnak. Hasonlítsa össze a tényleges étlappal; használja a Chrome DevTools-t 375px és 768px szélességgel.

A tulajdonos Hakan 12%-os asztali kiszolgálási idő csökkenést figyelt meg az új skála alkalmazása után.

GYIK

Használjak Aranymetszést (1.618x) helyette? Nem — aránytalanul nagyra növeli a H1-et és töri az egy képernyős elrendezéseket.

Csökkentsek mindent 80%-kal mobilon? Csak csökkentse a szövegtörzset 18px-re; az 1.125x arány a többit arányosan tartja.

Melyik betűcsalád? A sans-serif (Inter, Roboto, Open Sans) a legjobban olvasható étlapokon.

Hasznosnak találtad? Oszd meg.