mulk.codes

한글 제목 자간은 왜 70%만 조여야 할까

연재 · 한글 웹 조판 1편
  1. 01한글 제목 자간은 왜 70%만 조여야 할까

영문 자간을 한글에 그대로 쓰면 생기는 일

디스플레이용 영문 서체는 커다란 크기에서 시각적 공백을 조이기 위해 -0.028em 안팎의 음수 자간을 흔히 씁니다. 하지만 네모틀 기반인 한글 글리프에 같은 비율을 그대로 걸면 초성과 종성이 서로 부딪혀 글자가 뭉개집니다.

한글 제목은 영문 음수 자간의 70% 수준(-0.02em ~ -0.014em)으로 멈추고, 본문 행간은 1.75를 기본값으로 둡니다.

두 서체의 체격 차이 맞추기

Google Sans Flex와 Pretendard Variable을 한 문장 안에 섞어 쓰면 한글이 미세하게 커 보이는 경향이 있습니다. CSS @font-face의 size-adjust: 97%를 주면 별도 마크업 없이도 x-height와 시각 무게를 맞출 수 있습니다.

CSS
:root {
  --t-hero: clamp(32px, 4.4vw, 56px);
  --ls-kr-hero: -0.02em;
  --lh-kr-body: 1.75;
}

.prose p {
  line-height: var(--lh-kr-body);
  word-break: keep-all;
}

굵기 700을 쓰지 않는 이유

고해상도 레티나 디스플레이에서는 font-weight: 700의 굵은 획이 본문과의 대비를 과하게 밀어 올려 화면이 무거워집니다. 제목은 480~540 사이의 미디엄 톤으로 두고, 크기와 여백만으로 위계를 잡는 편이 훨씬 차분합니다.