글자 크기 단계 만들기

글자 크기를 일정한 비율로 맞춰요

제목·소제목·본문 크기를 그때그때 정하면 화면이 어수선해 보여요. 타입 스케일(모듈러 스케일)은 기본 크기에 같은 비율을 거듭 곱해 단계를 만드는 방법이에요. 기본 16px, 비율 1.25라면 16 → 20 → 25 → 31.25 → 39.06…처럼 커지고, 아래로는 12.8, 10.24로 작아져요. 단계 사이의 차이가 일정해서 어느 크기를 골라도 서로 잘 어울려요.

비율 고르기

비율 이름은 음악의 음정 진동수 비에서 따왔어요(장3도 5:4 = 1.25, 완전4도 4:3 ≈ 1.333, 완전5도 3:2 = 1.5). 작은 비율(1.067~1.2)은 단계 차이가 작아 정보가 많은 앱·대시보드에, 중간 비율(1.25~1.333)은 블로그·웹사이트에, 큰 비율(1.5~1.618)은 제목을 크게 강조하는 랜딩 페이지·포스터에 잘 맞아요. 휴대폰처럼 좁은 화면은 큰 제목이 넘치기 쉬워 비율을 조금 낮추는 경우가 많아요.

결과 쓰기

• 미리보기 — 단계마다 실제 크기의 한글·영문 글자로 보여 줘요. 위 칸에서 미리 볼 글을 바꿀 수 있어요.
• 반올림 — 계산값을 소수 둘째 자리, 정수 px, 짝수 px 중에서 골라 정리해요. 디자인 도구에 옮길 때는 정수가 편해요.
• CSS 변수 — rem(브라우저 기본 16px 기준) 또는 px로 :root 변수를 만들어요. font-size: var(--text-xl)처럼 쓰면 돼요.
• clamp() — 작은 화면과 큰 화면의 기본 크기·비율을 따로 정하면, 그 사이 화면 너비에서는 크기가 직선으로 부드럽게 바뀌는 clamp(최솟값, 기준값 + vw, 최댓값) 코드를 만들어요. 미디어 쿼리 없이 반응형 글자 크기를 만들 수 있어요.

참고

한글은 같은 px에서 영문보다 커 보이고 획이 많아 너무 작은 크기(12px 미만)는 읽기 어려워요. 본문은 보통 15~18px, 줄 간격은 본문 1.5~1.8, 큰 제목 1.1~1.3 정도가 무난해요.

참고한 자료

• W3C CSS Values and Units Module Level 4 — clamp() 비교 함수