brunch

You can make anything
by writing

C.S.Lewis

by bom Feb 18. 2022

모바일 폰트 크기 어떻게 정할까?

기억하고 있으면 좋을 폰트 크기 원칙

Mobile first design이 당연하게 된 요즘, 할 때마다 새롭고 신경쓰이는 부분이 바로

모바일 폰트 크기 설정이다.


지금은 여러번의 경험으로 본문은 16pt, 푸터나 캡션은 12pt와 같이 바로 생각나는 원칙들이 있지만

처음 모바일 환경을 디자인 하는 디자이너에게 폰트 크기는 누가 알려주지 않으면 여기저기 헤메기 좋은 주제이다.


사실 이부분은 이렇게 해야돼! 라고 규정이 되어 있는것은 아니나, 사실 어느정도 정해져 있는 룰이 있다.

이 부분은 IOS,AOS 디자인 키트를 다운받으면 간단히 해결할 수 있다.



IOS Design Kit 중 Typo 부분



IOS는 본문 폰트 크기를 17pt 으로 권장한다.

이 크기를 준수했을 때 가장 좋은 가독성을 가진다라고 추천해주는데, 다른 타이틀이나 캡션 크기 같은 것도 해당 키트를 다운받으면 확인할 수 있다.


IOS Design Kit download link : https://developer.apple.com/design/resources/




AOS Typo 가이드


AOS 는 본문크기를 최소 16pt로 제안한다.


AOS Design kit download link : https://material.io/resources



IOS, AOS를 종합해 보면


본문 16pt ~ 18pt

캡션 10pt ~ 12pt

타이틀 18pt ~ 32pt 이며,

10pt 이하의 폰트 크기는 사용하지 않는 것이 좋다.


하지만 이 부분은 권장 사항이고 폰트에 따라 느껴지는 크기가 다르기 때문에,

항상 실제 테스트 기기를 통해 확인하며 작업하는 것이 좋다.

내가 요즘 많이 사용하고 있는 스포카한산스체는 안드로이드 최소 사이즈 기준(360*640)기준

16pt가 큰 느낌을 줄 때가 있어서 본문에서 14pt도  많이 사용하고 있다.

다만 10pt 이하의 크기는 사용하지 않으려고 노력한다.


문자라는 것은 어떤 서비스에든지 필수적인 요소이므로 가독성이 정말 중요하다.

폰트 크기 하나로 서비스가 어딘지 모르게 촌스럽다거나 부자연스럽다거나 하는 느낌을 준다.

쉽게 지나칠 수 있는 부분이지만 완성도 있는 디자인을 위해 가독성도 절대 놓치지 말자.




브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari