서체

Typeface

도구

글자의 생김새를 한 벌로 규정한 디자인으로, 화면의 글자를 어떤 모양으로 보여 줄지 정할 때 고릅니다.

등장 배경

제품 화면에서 사용자가 마주하는 것의 대부분은 글자입니다. 어떤 글자로 보여 줄지 한 번 정해 두지 않으면 화면마다 다른 글자가 쓰이고, 지정하지 않은 자리에는 기기의 기본 글자가 대신 뜹니다.

페이지덱의 초기 화면이 그랬습니다. 문서 편집기와 설정 화면과 안내 메일의 글자가 서로 달랐고, 한 화면 안에서도 버튼과 본문이 달랐습니다. 같은 제품을 쓰는 느낌이 나지 않는다는 말이 인터뷰에서 두 번 나왔지만 무엇이 다른지는 짚지 못했습니다. 더 분명한 문제는 따로 있었습니다. 인증번호에서 숫자 0과 대문자 O가 구분되지 않아 잘못 입력했다는 문의가 한 달에 열 건 넘게 들어왔습니다.

해결하는 문제

글자를 읽을 수 있게 만드는 것이 첫 번째 몫이고, 화면들을 한 제품으로 묶는 것이 두 번째 몫입니다.

  1. 판독성입니다. 숫자 0과 대문자 O, 소문자 l과 숫자 1이 구분되는지 먼저 봅니다. 인증번호와 금액을 띄우는 제품에서는 이 구분 하나가 문의 건수를 바꿉니다.
  2. 일관성입니다. 한 벌을 정해 모든 화면과 메일에 같은 것을 쓰면 화면들이 한 제품으로 읽힙니다. 화면마다 다르면 사용자는 이유를 짚지 못한 채 어수선하다고 느낍니다.
  3. 위계를 만들 재료입니다. 한 벌 안에 굵기 단계가 몇 개인지 확인합니다. 본문과 소제목과 강조를 구분하려면 셋이 필요해서, 웨이트가 두 단계뿐인 서체는 제품 화면에 쓰기 어렵습니다.
  4. 인상입니다. 같은 문장도 어떤 글자로 쓰느냐에 따라 딱딱하게도 부드럽게도 읽힙니다. 다만 순서상 마지막입니다. 읽히지 않는 글자는 어떤 인상도 전달하지 못합니다.

한글을 쓰는 제품에서는 확인할 것이 하나 더 있습니다. 한 벌에 들어가야 할 글자 수가 영문보다 많아 자주 쓰는 글자만 만들고 멈춘 서체가 흔합니다. 고르기 전에 사람 이름과 주소를 넣어 보면 드문 글자에서 모양이 무너지는지 드러납니다. 고른 서체가 사용자 기기에 없을 때 무엇으로 대신할지는 폰트 폴백에서 정합니다.

실무 용례

"이 서체는 0과 O가 똑같아서 인증번호 화면에는 못 씁니다."

판독성 확인에서 걸렸으니 다른 것을 고르자는 말입니다.

"웨이트가 두 개뿐이라 제목이랑 본문 구분이 안 됩니다."

굵기 단계가 부족해 위계를 만들 수 없다는 지적입니다.

"이름에 흔치 않은 글자가 들어가면 모양이 깨지네요."

한글 글자 수가 덜 채워진 서체라는 뜻입니다.

민서가 서체를 정할 때 후보 넷으로 같은 화면을 네 번 만들었습니다. 고른 것은 결제 안내 화면이었고, 숫자와 영문 아이디와 한글 이름이 모두 거기 들어 있었기 때문입니다. 후보 둘은 0과 O가 구분되지 않아 그 자리에서 빠졌고, 남은 둘 중 굵기 단계가 넷 있는 쪽을 골랐습니다. 취향은 마지막 두 후보 사이에서만 작동했습니다.

같이 보면 좋은 페이지

  • 타이포그래피

    서체가 글자 설계 전체에서 어디에 놓이는지 먼저 봅니다

  • 웨이트

    고른 서체 안에서 위계를 만드는 다음 값입니다

마지막 업데이트 2026-09-16