한 줄 요약
제목, 소제목, 본문 크기를 눈대중이 아니라 일정한 비율(예: 1.25배)로 정해 두면 페이지 전체에 질서가 생깁니다.
비유로 이해하기
계단을 떠올려 보세요. 계단 높이가 칸마다 들쭉날쭉하면 오르기 불편하고 위험합니다. 높이가 일정해야 편하게 오르내리죠.
글자 크기도 마찬가지입니다. 본문 16px, 소제목 19px, 제목 33px처럼 그때그때 정하면 페이지가 어수선해집니다. 대신 “한 단계 올라갈 때마다 1.25배”처럼 비율 하나를 정해 두면, 본문에서 제목까지 일정한 계단이 만들어집니다. 이것을 타입 스케일이라고 부릅니다.
비교해 보기
- 작은 비율(1.125~1.2): 차분하고 정보가 많은 블로그, 문서에 어울립니다.
- 중간 비율(1.25~1.333): 대부분의 홈페이지에 무난합니다.
- 큰 비율(1.5 이상): 제목이 확 튀는 랜딩페이지, 포트폴리오에 어울립니다.
직접 실행해 보기
맨 위 --ratio(계단 높이) 값을 1.125, 1.333, 1.5로 바꿔 보세요. 숫자 하나로 제목부터 본문까지 크기 단계가 한꺼번에 바뀝니다. --base를 18px로 바꾸면 계단 전체가 위로 올라가요.
GenerateBlocks에서는
GeneratePress 타이포그래피에서 h1~h6 크기를 이 계단에 맞춰 한 번 정해 두면, GenerateBlocks에서 제목 블록의 태그(h2, h3)만 고르면 크기가 자동으로 맞춰집니다. 블록마다 글자 크기를 따로 입력하는 횟수가 줄어들수록 사이트가 정돈됩니다.
참고: Typescale · Utopia: Fluid Responsive Design · web.dev: Text and typography