모바일 버전 만들 때 폰트사이즈

Max H님 안녕하세요^^

폰트 사이즈와 관련된 정말 좋은 질문 감사드립니다.

먼저 첫번째 주신 질문에 대해서 답변을 드리자면 그렇습니다(Yes)입니다. 해당 예시에서는 PC버전과 모바일 버전의 폰트 사이즈를 동일하게 가져갔습니다.

두번째 질문, 보통 실무에서 PC버전과 모바일 버전의 폰트 사이즈를 다르게 가져가는 지에 대해서는 제 경험을 바탕으로 말씀드리자면 그렇기도 하고 그렇지 않기도 하다고 말씀드릴 수 있을 것 같아요.

화면을 디자인할 때, 폰트 사이즈와 관련해서 크게 고려해야 할 것 중 하나는 가독성(Readability)입니다. 사용자가 PC버전에서 보거나 모바일 버전에서 볼 때 기본적으로 글이 잘 읽혀야 하는 것이지요. 그러기 위해서는 여러 디바이스에 대해 직접 테스트해보는 것이 좋습니다. 저는 보통 모바일 해상도 1개, 태블릿 해상도 1개, PC 해당도 1개를 선택해서 폰트 사이즈를 테스트하는 편입니다. 가장 좋은 것은 각각의 해상도를 갖고 있는 디바이스들에서 직접 확인하는 것이 좋구요.

참고로 제가 최근에 진행한 몇몇 반응형 웹 프로젝트들에서는 디바이스별 폰트 사이즈를 동일하게 가져간 적도 있었고, 조금 다르게 가져간 적도 있었습니다.

그래서 폰트 사이즈를 디바이스 별로 다르게 해줘야 겠다고 생각이 든다면 다르게 해줄 수 있고, 문제가 없다고 생각될 경우 동일하게 가져갑니다.

팁. 타사 폰트 리서치 방법

실무에서 웹 기반의 서비스들이 폰트 사이즈를 어떻게들 적용하고 있는지 보는 것도 Max H님께서 질문하신 것에 대해 답을 찾아가시는데 도움이 될 거라 생각이 듭니다. 이를 확인할 수 있는 팁을 드리겠습니다.

1. 반응형 웹이 적용되어 있는 웹사이트를 찾습니다.

반응형 웹이 적용되어 있는지 확인하려면, 브라우저에서 특정 웹사이트를 검색해보신 후, 브라우저의 좌우 사이즈를 줄였다 키웠다 해보시면 됩니다. 아무리 줄여도 아무런 반응이 없다면 그런 예시는 확인하지 마시고 반응이 있는 웹사이트를 확인하셔야 합니다.

2. Chrome Extension인 "WhatFont"를 설치해주세요.

웹사이트들의 폰트가 무엇인지 확인할 수 있는 정말 좋은 Extension입니다. 주신 질문 외에도 UI디자인할 때 여러모로 도움이 되실 거라 생각이 듭니다.

https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl=en

3. 화면을 키웠다가 줄였다가 하면서 Font 사이즈를 확인해보세요.

작은 화면사이즈들, 모바일에서 폰트가 PC대비 다른지 또는 동일한지 확인해보시면 좋을 것 같습니다.

예시

위 사례는 Thumbtack이라는 서비스의 웹사이트입니다.

이 경우에는 작은 사이즈의 해상도에서 다른 Font를 쓰는 케이스라고 볼 수 있겠네요.

그리고 모든 폰트들이 화면의 크기에 따라 다른게 아니고, 화면이 바뀌어도 동일한 폰트도 있네요.

참고가 되셨길 바라고, 또 궁금한 점이 있다면 말씀주세요.

감사합니다.

인프런 커뮤니티 질문&답변