Mobile Font

From. http://dev.hunet.co.kr/36 : Hunet Dev 모바일 페이지 가독성 - 웹폰트/폰트 크기
상기 페이지의 내용를 그대로 실어 놓습니다.


국내 3G/LTE 모바일 환경

사실 모바일 페이지에서 웹폰트를 사용하는 사례를 자주 볼 수 있는 건 아닙니다. 잘 사용하지 않는 이유는 무엇일까요? 페이지를 구성하는 텍스트와 이미지 외에 추가로 웹폰트를 제공해야하기 때문입니다. 대부분의 사용자가 사용한 만큼 요금이 부과되는 정략적 요금제를 사용하고 있는 문제도 있고 더 중요한 부분으로 모바일 페이지의 속도 문제 입니다.

속도 부분은 웹페이지 제작시에도 중요하게 고려해야되는 부분이지만 모바일 페이지에서 특히 더 신경써야 고려해야 되는 부분으로 국내 통신사에서 제공하는 3G와 LTE 등의 속도가 아직 완벽하게 제공되지 않고 있고 또한 지역별 차이가 크고, 원활한 사용보다는 끊김 현상이 실 사용중에도 자주 경함할 수 있기 때문입니다.


웹폰트 설정시 문제점

이때 웹폰트를 설정한다면 웹폰트 또한 서버에 올려두고 따로 제공해야 하는데 일반적으로 웹폰트의 용량은 적게 잡아도 400kb 이상씩 잡아야 하고(만약 나눔고딕을 웹포트로 사용한다면 700kb 이상, MS의 저작권 부분도 고려해야되는 맑은고딕을 웹 폰트로 사용한다면 400kb이상, 가독성이 아닌 디자인적 측명을 강조한 폰트의 경우 1MB이상) 그렇게 되면 모바일 페이지를 여는데 기본 이미지들과 합쳐 메가마이트 단위의 다운로드가 필요하게 됩니다. 메가바이트 단위로 간다면 산술적으로 상세히 계산해보지 않아도 웹페이지 로딩 속도에 문제가 있는 크기인데 더 큰 문제는 웹폰트를 적용하는 페이지를 웹폰트로 하면 그 특성상 웹폰트부터 다운 받고 페이지를 열게 되므로 사용자가 실제 체감하는 속도는 더더욱 느려지게 된다는 것입니다.


웹폰트 설정 대안

그렇다면 대안은? 웹처럼 모바일에서도 될 수 있으면 각 기기에서 제공하는 기본 폰트를 사용하는 것입니다. 가독성이 아닌 디자인적 측면을 강조한 폰트의 경우라면 어쩔 수 없겠지만 대부분의 공식적인 서비스라면, 그리고 모니터보다 작은 화면을 봐야하는 사용자를 고려한다면 가독성이 높은 폰트를 사용하는 것이 효과적인데 스크린에서 가독성이 높은 폰트는 Sans-serif 계열이므로 간단히 Sans-serif 로 지정해주는 것입니다. 단, Sans-serif만 설정하는 것으로 처리하면 일부 안드로이드폰의 경우 환경설정에서 설정한 서체가 브라우저 내 웹에도 반영되므로 Droid Sans를 추가로 지정합니다.

참고로 각각 스마트폰에는 다음과 같이 기본 Sans-serif 계열의 폰트가 제공됩니다.

iPhone (iOS 5.1 이전) – Apple Gothic
iPhone (iOS 5.2 이후) – Apple SD Gothic Neo (산돌 고딕 네오)

안드로이드(삼성 갤럭시 계열) – 삼성 고딕
안드로이드(LG 최신 옵티머스 계열) – LG스마트 고딕
기타 안드로이드 (젤리빈 이전, LG 구형 옵티머스 계열) – DroidSans (한글/일어 등은 DroidSans Fallback)
기타 안드로이드 (젤리빈 이후) – 나눔 고딕

또한 많은 유저를 확보하진 못했지만 이왕이면 윈도우폰까지 커버하기 위해 ‘맑은 고딕’도 지정해줍니다. 아이폰의 경우에는 한가지 폰트만 제공되기 때문에 serif와 sans-serif의 구분만 해주어도 충분합니다.

font-family:Droid sans, Malgun Gothic, sans-serif


모바일 페이지 폰트 사이즈

웹에서 컨텐츠 부분의 폰트 사이즈를 보통 12px를 기준으로 제작을 하는데요, 최근 스마트폰 해상도가 계속 높아지고 있지만 모바일에서도 같은 기준으로 그대로 적용하면 가독성에 어려움이 따릅니다.
웹에서의 12px와 달리 모바일에서는 다소 작게 느껴지는 사이즈인 것이 확인되어집니다. 모바일에서는 웹에서 12px 정도로 기준을 잡았다면 14px 정도로 제작한다면 사용자 가독성에 큰 도움이 될 것입니다.