모바일 웹 디자인에서 가장 어려운 것 중 하나가 폰트 크기입니다. 360px(갤럭시 기본) 화면에서는 적당해 보이던 글자가 430px(아이폰 Pro Max) 화면에서는 너무 작아 보일 수 있기 때문이죠. 이 문제를 해결하기 위해 실무에서 사용하는 VW 기반 폰트 계산법을 소개합니다.
1. 기준점 잡기: 360px vs 375px
모바일 시안을 변환할 때 가장 먼저 결정해야 할 것은 "어떤 너비를 100vw로 볼 것인가"입니다.
- 360px: 안드로이드 기기의 표준적인 논리 해상도 기준입니다.
- 375px: 아이폰(X, 11, 12 등)의 표준적인 논리 해상도 기준입니다.
최근에는 두 기기의 중간 지점이자 아이폰 점유율을 고려해 375px을 기준으로 작업하는 경우가 많습니다.
2. VW 폰트 계산 공식
시안상의 폰트 크기를 VW로 바꾸는 공식은 다음과 같습니다.
(디자인 시안 폰트 크기 / 375) * 100 = 결과 VW
예를 들어, 375px 시안에서 본문 폰트가 16px라면:
(16 / 375) * 100 = 4.266vw
3. 왜 단순 VW만 쓰면 위험한가요?
폰트 크기를 오직 VW로만 설정하면 태블릿이나 PC에서 글자가 감당할 수 없을 정도로 커집니다. 이를 보완하기 위한 두 가지 방법이 있습니다.
방법 A: 미디어 쿼리로 고정하기
p { font-size: 4.266vw; }
@media (min-width: 768px) {
p { font-size: 16px; } /* 태블릿 이상에서는 고정 */
}
방법 B: clamp() 활용하기 (강력 추천)
/* 최솟값 14px, 권장값 4.266vw, 최댓값 20px */
p { font-size: clamp(14px, 4.266vw, 20px); }
💡 모바일 폰트 "스윗 스팟"
실무에서 모바일 본문용 폰트는 14px ~ 16px (약 3.7vw ~ 4.2vw) 사이가 가독성이 가장 좋습니다. 제목은 20px ~ 24px 정도로 설정해 보세요.
4. 폰트 변환 시 주의사항
- 최소 크기 준수: 웹 접근성을 위해 폰트가 12px 이하로 내려가지 않도록
min-font-size개념을 꼭 적용해야 합니다. - 행간(Line-height): 폰트 크기를 VW로 바꿨다면 행간도 비율에 맞춰 조절하거나, 단위 없는 숫자(예: line-height: 1.5)를 사용하여 폰트 크기에 연동되게 하세요.
결론
모바일 폰트는 더 이상 고정된 값이 아닙니다. 375px 기준의 VW 계산법과 clamp()를 적절히 활용하면, 어떤 모바일 기기에서도 사용자에게 편안한 읽기 경험을 제공할 수 있습니다.