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.
Kapcsolódó cikkek
Mi az a QR-menü? Teljes útmutató éttermek számára
A QR-menü lehetővé teszi, hogy vendégei okostelefonjukon azonnal elérjék az étla…
Papír étlapról digitális QR-menüre váltani: lépésről lépésre útmutató
QR-menüt szeretne bevezetni, de nem tudja, hol kezdje? Ez az útmutató lefedi a f…
Geocélzott QR-étlapok: különböző nyelvek a látogató IP-je alapján
Hogyan irányítja egy 180 férőhelyes all-inclusive üdülő Antalyában ugyanazt a QR…