타이포그래피 — 글꼴과 위계

글꼴 선택, 크기·굵기로 만드는 위계, 줄 간격과 줄 길이 등 글을 읽기 좋게 만드는 원칙을 익힙니다.

🧑‍🏫

멘토 한마디

오늘도 한 칸 올라가 볼까요? 천천히, 그러나 멈추지 않고 — 그게 진짜 실력이 됩니다. 💪

화면의 대부분은 글자입니다. 그래서 타이포그래피—글자를 다루는 기술—만 정돈해도 사이트가 단숨에 정돈돼 보입니다. 이번 챕터에서는 예쁜 글꼴을 고르는 것보다, '읽기 편하게' 만드는 원칙을 배웁니다.

글꼴 고르기: 적을수록 좋다

한 화면에 글꼴이 여러 개면 산만합니다. 보통 본문용 1종이면 충분하고, 많아도 제목용까지 2종을 넘기지 않습니다. 한글은 가독성 좋은 Pretendard, Noto Sans KR 같은 웹폰트가 널리 쓰입니다.

body {
  font-family: 'Pretendard', sans-serif;
}

핵심 font-family는 여러 글꼴을 쉼표로 나열합니다. 앞의 글꼴을 못 쓰면 다음 글꼴로 넘어가며, 마지막엔 sans-serif 같은 계열 이름을 두어 최소한의 안전망을 둡니다.

좋은 글은 한눈에 '무엇이 제목이고 무엇이 본문인지' 보입니다. 이 차이를 위계(hierarchy)라고 합니다. 위계는 세 가지로 만듭니다.

색이나 굵기를 5단계, 6단계로 잘게 나누면 오히려 위계가 흐려집니다. 차이는 분명할수록 좋습니다.

줄 간격은 글자 크기에 비례하는 비율(1.6 같은 숫자)로 주는 것이 좋습니다. 고정 픽셀로 주면 글자 크기를 바꿀 때 따라오지 않습니다.

긴 본문은 왼쪽 정렬이 기본입니다. 가운데 정렬은 짧은 제목엔 어울리지만, 여러 줄 본문에 쓰면 줄마다 시작점이 달라 읽기 어렵습니다. 글자 사이 간격(letter-spacing)은 큰 제목에서 살짝 좁히면 단단해 보입니다.

주의 한글 웹폰트는 굵기(weight) 종류가 많을수록 불러올 용량이 커집니다. 실제로 쓰는 굵기(예: 400과 700)만 불러오면 페이지가 가벼워집니다.