웹사이트와 UI용 무료폰트 고르는 법

로고보다 ‘저장’ 버튼에서 시작하기

웹사이트 글꼴은 큰 제목뿐 아니라 짧은 버튼과 오류 메시지에서도 일합니다. ‘저장’, ‘다시 시도’, ‘결제 금액 11,000원’을 실제 화면 크기로 넣어 보세요. 숫자 1과 영문 I, l이 구분되는지도 확인합니다. 눈에 띄는 글꼴 하나보다 사용자가 다음 행동을 읽고 고를 수 있는지가 인터페이스에서는 더 중요합니다.

한 줄일 때만 맞는 버튼은 불안해요

짧은 한국어 라벨이 맞아도 영어 문장이나 긴 오류 메시지는 줄이 늘어날 수 있습니다. 버튼의 높이를 글자 한 줄에 딱 맞춰 고정하기보다 내용이 늘어날 여지를 두세요. 브라우저 확대와 좁은 화면에서도 중요한 말이 잘리지 않아야 합니다. 글꼴 크기만 줄여 해결하면 사용자가 확대하는 이유와 충돌할 수 있어요.

폰트가 도착하기 전 화면도 살펴보세요

웹폰트는 내려받는 시간이 필요합니다. web.dev는 글꼴 로딩과 대체 글꼴이 콘텐츠 표시 및 레이아웃 이동에 영향을 줄 수 있다고 설명합니다. 느린 연결에서 대체 글꼴로 먼저 보인 문장이 최종 폰트로 바뀔 때 버튼이나 문단이 얼마나 움직이는지 확인하세요. 사용하는 굵기와 문자 범위만 제공할 수 있는지도 검토하면 불필요한 전송을 줄일 수 있습니다.

일부 글자만 다르면 지원 범위를 확인

한글은 맞는데 일본어나 기호만 다르게 보이면 그 문자에 다른 폰트가 쓰이고 있을 수 있습니다. 내려받은 파일의 지원 문자와 실제 적용된 글꼴을 확인하세요. 단순히 font-family에 이름을 적었다고 모든 문자가 그 파일로 표시되는 것은 아닙니다. 배포 전에 한글, 영문, 일본어, 가격, 괄호를 섞은 문장으로 빠진 부분을 찾아보세요.

이 순서로 비교해 보세요

1. ‘UI/작은 화면’으로 검색해 후보를 좁힙니다.
2. 미리보기 문장을 실제 인터페이스에 넣을 내용으로 바꿉니다.
3. 같은 크기에서 서너 개를 비교한 뒤 최종 매체에서 굵기와 간격을 조정합니다.
4. 상세 페이지에서 지원 언어와 공식 배포처, 사용 방식에 맞는 라이선스를 확인합니다.

실제 폰트로 이어서 비교하기

• Pretendard

  프리텐다드를 웹·앱 화면에 쓸 때는 글꼴 이름보다 실제 불러온 굵기와 언어용 패밀리를 먼저 확인하세요. 짧은 버튼, 가격, 긴 안내 문장을 함께 비교하는 방법을 정리했습니다.

• D2Coding

  D2Coding은 코드의 비슷한 문자와 열 정렬을 비교할 때 살펴볼 글꼴입니다. 일반 본문과 같은 기준으로 고르기보다 숫자·기호·한글 주석이 섞인 실제 코드로 확인하세요.