您希望顾客在 9 秒还是 18 秒内找到菜单类目?答案藏在排版比例的数学结构中。伊兹密尔博尔诺瓦一家 22 桌的 pide 餐厅从随意的"H1 大、H2 中、正文小"做法切换到 Major Second(1.125x)模块化比例,类目搜寻时间减半。
为何选 Major Second 1.125x?
排版中,比例系数把最小字号相乘以推导其他字号。Major Third(1.25x)对比强烈但在菜单中把 H1 放得过大。1.125x 感觉自然,因为它与音乐音程的数学结构相同。
从 16px 标注开始:标注 16、正文 20、H2 28、H1 32。平板上这套比例阅读舒适;手机上把正文降到 18px 即可。
像素表与用法
我们在生产环境测试的最稳定组合:
- H1(类目标题): 32px / 行高 1.2 / font-weight 700
- H2(子类目): 28px / 行高 1.25 / font-weight 600
- 正文(产品名): 20px / 行高 1.5 / font-weight 500
thMenu 主题默认采用这些值。自定义主题时,将比例锁定在 1.125,基准保持 16px。
用 Type-Scale.com 验证
打开 Type-Scale.com,选择 "Major Second" 预设,输入 16 作为基准。与您实际菜单对比;使用 Chrome DevTools 在 375px 和 768px 宽度下 A/B 测试。
店主 Hakan 在应用新比例后观察到桌面服务时间下降 12%。
常见问题
应该改用黄金比例(1.618x)吗?不应该 — 黄金比例会把 H1 放得过大,破坏单屏菜单布局。
手机端是否要全部缩小 80%?只需把正文降到 18px;1.125x 比例会让其他部分自动保持比例。
哪种字体家族最合适?无衬线(Inter、Roboto、Open Sans)在菜单中阅读性最好。
觉得有用?分享给朋友。