활자 인쇄 영역에서는 타입과 관련된 용어를 정확하게 사용하는 것이 중요했습니다. 그러나 디지털 환경에서는 그 구분이 크게 중요하지는 않습니다. 하지만 타이포그래피의 기본을 이야기하는 만큼 정확한 용어를 사용해 보겠습니다.

  • 서체: typeface (Noto Serif KR)
  • 글꼴: font (Noto Serif KR, 16px, 400, #101010, …)
  • 서체 계열: a type of typeface (serif, sans-serif, slab, script, …)
  • 바탕체 계열 서체: ‘명조 계열 서체’의 한글 표현, a type of serif
  • 돋음체 계열 서체: ‘고딕 계열 서체’의 한글 표현, a type of sans serif
  • 바탕체‘, ‘돋음체‘, ‘굴림체‘: Windows 운영시스템에 설치되어 있던 시스템 서체

본문에 사용하는 서체로는 바탕체 계열을 선호합니다. 사용자의 시선이 글자를 따라 자연스럽게 흐르기 때문에, 쉽게 피로해지지 않으며 또 빠르게 읽을 수 있기 때문입니다.

물론 전각 문자인 한글은 대소문자 구분이 있는 라틴 계열의 문자에 비해 그 효과가 적을 수 있습니다. 결국 네모틀 안에서 표현되기 때문입니다. 하지만 여전히 돋음체 계열의 서체에 비해 더 자연스럽게 읽히는 것은 사실입니다. 소설책을 생각해보면 쉽게 알 수 있습니다.

하지만 대부분의 한글 웹사이트는 돋음체 계열의 서체를 사용하고 있습니다. ‘제목’이나 ‘인용구’에 부분적으로 바탕체 계열을 사용하는 경우는 있지만, 전체 혹은 본문 영역에 이를 적용한 경우는 찾아보기 힘듭니다.

그렇다면 바탕체 계열의 서체를 웹사이트에서 사용하지 않는 이유는 무엇일까요?

많은 사람들에게 돋음체 계열의 서체가 더 세련되어 보이기 때문입니다. 전통적인 매체(신문, 서적 등)가 주로 바탕체 계열의 서체를 사용하다 보니 돋음체 계열의 글꼴이 상대적으로 새롭게 보일 수 있습니다. 뿐만 아니라 장식적 요소를 배제하여 콘텐츠 집중도를 높이는 모던 디자인의 영향도 있을 것입니다.

그 외에도 브라우저의 폰트 랜더링이 형편없던 시절에 경험한 ‘바탕체’의 조악한 모습도 한 원인이라고 할 수 있습니다. 당시 한글 웹사이트에서 사용할 수 있었던 서체로는 ‘바탕체’, ‘돋음체’, ‘굴림체’ 등 Windows 운영시스템이 기본 제공하는 시스템 서체 뿐이었습니다. 워낙에 화면에 보여지는 모습이 형편 없어서 글꼴의 사이즈를 12~14px 정도로 작게 설정해야 했습니다. 모던 브라우저가 기본 글꼴 사이즈로 16px을 사용하는 것과는 큰 차이가 있습니다.

그러나 무엇보다 가장 큰 원인은 제대로 된 경쟁력 있는 바탕체 계열의 웹폰트가 없었다는 것입니다. 제대로 된 웹폰트란 모든 글자(한문 포함)와 약물을 표시할 수 있으면서도 미려하고 가독성이 높은 서체를 말합니다. 경쟁력 있는 웹폰트란 ‘구글 폰트’ 처럼 무료로 라이센스 제약 없이 쉽게 사용할 수 있는 것을 말합니다.


우리는 바탕체 계열의 웹폰트가 적용된 사이트를 본적이 없습니다. 고해상도의 디스플레이가 보급되면서 브라우저의 폰트 랜더링 기술도 크게 향상되었습니다. 다행스럽게도 괜찮은 바탕체 계열의 한글 웹폰트도 배포되고 있습니다. 하지만 여전히 돋음체 계열의 서체가 웹사이트에서 사용되고 있습니다. 세련되어 보이고 이제는 그것이 익숙해보이기 때문입니다.

콘텐츠의 가독성(legibility & readability)을 높이는 일은 결국 어떤 유형의 서체를 선택하는가에서 부터 시작됩니다. 물론 콘텐츠의 성격과 목적에 맞는 유형의 서체를 선택할 필요도 있습니다.

게다가 아무리 좋은 타입 설정을 했다고 하더라도 사람들의 눈에 익숙하지 않다면 문제가 될 것입니다. 따라서 좋은 타입 설정과 일반적인 인식 사이에서 적절한 조율도 필요합니다.

습관적으로 돋음 계열의 서체를 선택할 필요는 없습니다. 사용 가능한 몇 개의 바탕체 계열 한글 웹폰트를 소개합니다.

Noto Serif KR, 본명조 / 서체 선택의 중요성 - 크리에이티브밴드 Creative Band
본명조(Noto Serif KR) by Google & Adobe
나눔명조, 서체 선택의 중요성 - 크리에이티브밴드
나눔명조 by 네이버
이롭게바탕체 by 이롭게