타이포그래피 위계: 메뉴의 H1, H2, 본문 크기 비율(Major Second 1.125x)

고객이 메뉴 카테고리를 9초에 찾기를 원합니까, 18초에 찾기를 원합니까? 답은 타이포그래피 스케일의 수학적 비율에 숨어 있습니다. 이즈미르 보르노바의 22테이블 pide 레스토랑이 즉흥적인 접근에서 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 / line-height 1.2 / font-weight 700
• H2(하위 카테고리): 28px / line-height 1.25 / font-weight 600
• 본문(제품 이름): 20px / line-height 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% 감소했다고 관찰했습니다.

FAQ

황금비(1.618x)를 대신 사용해야 할까요? 아니요 — H1을 과도하게 키우고 단일 화면 레이아웃을 깨뜨립니다.

모바일에서 모든 값을 80% 축소? 본문만 18px로 낮추세요. 1.125x 비율이 나머지를 비례 유지합니다.

어떤 폰트 패밀리가 가장 좋나요? Sans-serif(Inter, Roboto, Open Sans)가 메뉴에서 가장 잘 읽힙니다.

도움이 되셨나요? 공유해 주세요.