Leading, 활판 인쇄의 납 조각에서 시작된 줄 간격

한 줄로

읽고 발음은 "리딩"(lead-ing)이 아니라 "레딩"(led-ing)입니다. 납(lead) 조각에서 유래한 줄 간격 용어입니다.

어디서 왔나

15~19세기 활판 인쇄 시대입니다. 활자는 사각 금속 블록에 새겨졌고, 여러 활자를 모아 한 줄을 만들었습니다. 줄과 줄 사이 간격이 필요할 때, 인쇄공은 납(lead) 조각을 줄 사이에 끼웠습니다.

이 조각의 두께가 줄 사이 간격을 결정했습니다. 1포인트 납 조각, 2포인트, 3포인트. 두께별로 종류가 있었습니다. 디자이너가 "더 leading 넣어주세요" 라고 하면 더 두꺼운 납을 끼웠습니다.

발음 주의입니다. 영어 "lead"는 두 가지 발음입니다.

• 동사 "lead" (이끌다) = /li:d/ (리드)
• 명사 "lead" (납) = /led/ (레드)

타이포그래피의 leading은 납에서 왔으니까 "레딩(led-ing)" 발음입니다.

디지털 시대에는 납 조각이 없어졌지만 용어는 살아남았습니다.

CSS와의 차이

CSS에는 leading 속성이 없습니다. 대신 line-height가 같은 역할을 합니다.

.body-text {
  font-size: 16px;
  line-height: 1.5;  /* 16 × 1.5 = 24px 줄 높이 */
}

line-height는 활자 크기에 대한 비율로 정의되고, 그 안에 활자 + leading이 포함됩니다.

좋은 leading의 기준

• 본문: line-height 1.5~1.7 (한국어는 더 넓게).
• 헤드라인: line-height 1.1~1.3 (좁게).
• 캡션: line-height 1.3~1.4.

한국어는 영어보다 글자 모양이 빽빽해서 leading을 더 넓게 해야 시원하게 읽힙니다. 영어 1.5는 한국어로 1.6~1.7이 비슷한 느낌입니다.

함정

• 너무 좁은 leading: 줄이 서로 부딪히는 듯한 답답함.
• 너무 넓은 leading: 줄들이 분리돼 한 문단으로 안 보임.
• 헤드라인에 본문 leading 적용: 한국 사이트에서 흔한 실수. 큰 제목에 line-height 1.6을 그대로 적용하면 한 제목이 두 단락처럼 보임.

바이브 메이커가 챙길 한 가지

CSS reset에서 line-height: 1.5를 본문 기본값으로 잡고, 헤드라인은 별도로 1.2 정도로 덮어쓰는 게 안전한 시작점입니다. Tailwind의 기본 스케일이 이 원칙을 잘 따릅니다.

관련

Kerning · Tracking · Typography