font size는 어떤 기준으로 세팅하지?

infinity·2022년 3월 12일
0

Youtube clone

목록 보기
1/3

youtube clone을 하고 있다.
그런데 font size는 어떻게 정하는 걸까?
뭔가 guideline이 있을 것 같다는 생각이 들어 찾아본다.


반응형 웹 폰트사이즈 가이드라인


1. Body font는 16px에서 시작하자.

GuidenceFont typeDefault sizeSecondary sizeReference
Material Design stylingRoboto16px14pxlearn more
iOS sylingSF Pro17px15pxlearn yet

물농, Google과 Apple의 style guide 기준은 다르지만, 본인이 어떤 OS를 만들지 생각하고 참고하면 좋다.


2. Text input size는 최소 16px로 하자.(필수!)

왜냐면, ios에서 16px보다 작게 만들면, 자동으로 줌인이 되어서 나중에 사용자가 줌아웃을 해서 빠져나가야 하기 때문이다.

Animation courtesy the dashing Ste Grainer. You can read his article on the auto-zoom phenomenon here.


3. Second text는 2px씩 줄여나가자.

1px정도만 줄인다면 사용자가 normal text와 구분하기 어려워한다.


4. 실제 device에서 확인해보자

백문이 불여일견이다.
직접 디바이스에서 눈으로 확인해보도록 하자.


[Reference]
https://learnui.design/blog/mobile-desktop-website-font-size-guidelines.html

profile
I'm a super-duper crazy person.

0개의 댓글