topic★★★★★난이도
서체 해부학과 선택 기준
세리프/산세리프, x-height, 어센더/디센더 — 글자의 뼈대를 이해하고 적합한 서체를 고르는 법.
#서체#세리프#산세리프#Pretendard#본고딕#x-height
왜 배우는가
서체를 '예뻐서' 고르면 가독성에서 실패한다. 글자의 해부학적 구조를 알면 왜 본고딕은 읽기 편하고, 궁서체는 본문에 부적합한지 논리적으로 설명할 수 있다.
모든 서체는 보이지 않는 기준선(Baseline) 위에 놓인다. 소문자 'x'의 높이를 x-height라 하고, 'b'나 'd'처럼 위로 올라가는 부분을 어센더(Ascender), 'p'나 'g'처럼 아래로 내려가는 부분을 디센더(Descender)라 한다. 이 비율이 서체의 가독성을 결정한다.
| 분류 | 특징 | 대표 서체 | 적합한 사용처 |
|---|---|---|---|
| 세리프 (Serif) | 획 끝에 장식(삐침)이 있음 | Times New Roman, 바탕체 | 인쇄물, 장문 본문, 격식체 |
| 산세리프 (Sans-serif) | 장식 없이 깔끔 | Pretendard, 본고딕, Inter | 화면 UI, 모바일, 현대적 디자인 |
| 모노스페이스 (Monospace) | 모든 글자 폭 동일 | Fira Code, D2Coding | 코드 에디터, 터미널 |
| 디스플레이 (Display) | 큰 크기에서 개성 표현 | 나눔스퀘어, Black Han Sans | 제목, 배너, 포스터 |
한글 UI 서체의 현재 사실상 표준은 Pretendard다. Apple의 SF Pro와 유사한 비율, 넓은 웨이트 범위(Thin~Black 9단계), 탁월한 한영 혼조 균형을 제공한다. 본고딕(Noto Sans KR)도 여전히 널리 쓰이지만, 자간이 약간 넓어 UI에서는 Pretendard가 더 컴팩트하다.
서체 선택의 황금률은 '본문은 무난하게, 제목은 개성 있게'다. 본문 서체는 x-height가 크고 획 두께가 균일한 산세리프를 고르고, 제목에만 개성 있는 서체를 써서 대비를 만든다. 본문과 제목을 합쳐 서체는 최대 2종이 좋다.
가독성 자가 테스트 — 서체를 선택한 후 14px 크기로 긴 문장을 써보자. 'ㅎ'과 'ㅔ'가 뭉쳐 보이거나, 'I(대문자 아이)'와 'l(소문자 엘)'이 구분되지 않으면 UI용으로 부적합하다. 특히 모바일 작은 화면에서 테스트해야 한다.