Typografinen Hierarkia: H1, H2, Leipätekstin Kokosuhteet Ruokalistoille

Pitäisikö asiakkaasi löytää ruokalistan kategoria 9 vai 18 sekunnissa? Vastaus piilee typografisen skaalan matemaattisessa suhteessa. 22-pöytäinen pide-ravintola İzmirin Bornovassa siirtyi tilapäisestä lähestymistavasta Major Second -skaalaan (1.125x) ja puolitti kategorian hakuajan.

Miksi Major Second 1.125x?

Typografiassa skaalasuhde kertoo pienimmän fonttikoon muiden johtamiseksi. Major Third (1.25x) maksimoi kontrastin, mutta tekee H1:stä suhteettoman suuren ruokalistalla. 1.125x tuntuu luonnolliselta, koska se heijastaa samaa matemaattista rakennetta kuin musiikilliset intervallit.

Aloita 16px caption -koolla: caption 16, leipäteksti 20, H2 28, H1 32. Tabletilla skaala luetaan mukavasti; mobiilissa laske leipäteksti 18px:iin.

Pikselitaulukko

Tuotannossa testattu vakain yhdistelmä:

• H1 (Kategorian otsikko): 32px / line-height 1.2 / font-weight 700
• H2 (Alikategoria): 28px / line-height 1.25 / font-weight 600
• Leipäteksti (Tuotteen nimi): 20px / line-height 1.5 / font-weight 500

thMenu-teemat toimittavat nämä oletusarvoina. Mukautetuissa teemoissa lukitse suhde arvoon 1.125 ja perusta 16px:ään.

Type-Scale.com -validointi

Avaa Type-Scale.com, valitse "Major Second" -esiasetus, syötä 16 perustaksi. Vertaile todelliseen ruokalistaasi; käytä Chrome DevToolsia 375px ja 768px leveydellä.

Omistaja Hakan havaitsi pöytäpalveluajan laskeneen 12% uuden skaalan käyttöönoton jälkeen.

FAQ

Pitäisikö käyttää Kultaista Leikkausta (1.618x)? Ei — se tekee H1:stä suhteettoman ja rikkoo yhden ruudun ulkoasut.

Pienennänkö kaikkea 80% mobiilissa? Vain laske leipäteksti 18px:iin; 1.125x-suhde pitää muut suhteellisina.

Mikä fonttiperhe? Sans-serif (Inter, Roboto, Open Sans) luetaan parhaiten ruokalistoilla.

Oliko tästä hyötyä? Jaa se.