대문자 텍스트 요소에 약간의 자간(letterspacing)을 추가하면 왜 좋은지, 그리고 CSS로 어떻게 구현하는지 알아봅니다.
타이포그래피에서 텍스트 요소에 대문자(올캡스)를 사용할 때는 글자 사이에 약간의 호흡 공간을 두는 것이 좋습니다. 그렇지 않으면 글자가 너무 빽빽해져서 편안하게 읽기 어려워집니다.
자간(Letterspacing)은 트래킹(Tracking)이라고도 부릅니다. 두 용어는 동의어로, 글자 그룹(단어) 사이의 간격을 의미합니다. 일반적으로 웹 분야에서는 'letterspacing'이라는 용어를 더 많이 쓰고, 인쇄 타이포그래피 분야에서는 'tracking'이라는 용어를 더 많이 사용합니다.
몇 가지 예시를 살펴보겠습니다.
일반 케이스 vs. 대문자
아래 두 텍스트 요소를 비교해 보세요. 첫 번째는 일반 케이스, 두 번째는 모두 대문자입니다.
Typography
Typography
문제점이 보이시나요?
보이지 않아도 괜찮습니다. 일반/기본 굵기를 사용할 때는 큰 문제가 되지 않는 경우가 많습니다. 서체 디자인과 사용 방식에 따라 결과가 달라집니다.
CSS에서 일반 굵기는 font-weight: normal; 또는 font-weight: 400;으로 선언할 수 있으며, 두 방식은 동일합니다.
일반 케이스 vs. 대문자 (굵게)
이번에는 같은 예시에 굵은(bold) 굵기를 적용해 비교해 보겠습니다.
Typography
Typography
획이 두꺼워진 상태에서 올캡스 텍스트가 얼마나 답답해 보이는지 확인되시나요? 이제 일부 글자들이 서로 붙어 버린 것도 보입니다.
CSS에서 굵은 굵기는
font-weight: bold;로 선언합니다. 숫자 값도 사용할 수 있지만, 선택한 폰트 패밀리가 어떤 굵기 옵션을 지원하는지 먼저 확인하세요.700이 보통 bold에 해당하지만, 항상 그런 것은 아닙니다.
자간 (Letterspacing, aka Tracking)
앞서 본 대문자 텍스트 예시를 복사한 뒤 하나에는 4px의 자간을 적용하고, 두 예시를 비교해 보겠습니다.
Typography
Typography
차이가 정말 크죠? 첫 번째 예시는 거의 폐쇄적인 느낌까지 주는 반면, 두 번째 예시는 정반대로 시원하고 여유 있는 느낌을 줍니다.
CSS에서 자간은
letter-spacing속성으로 선언합니다. 예:letter-spacing: 4px;일반 언어에서는 하이픈(-)을 붙이거나 떼어 표기할 수 있지만, CSS에서는 반드시 하이픈을 포함해야 합니다.
분명히 말씀드리지만, 자간을 추가한 두 번째 예시가 항상 더 나은 선택이라는 뜻은 아닙니다. 특정 상황에서 어떤 분위기나 무드를 연출하고 싶은지에 따라 달라집니다.
영화 포스터에서 영화의 주제를 표현하고 강조하는 가장 강력한 도구 중 하나가 바로 타이포그래피입니다. 숙련된 타이포그래퍼는 다음 요소들을 신중하게 결정합니다.
- 서체/폰트 패밀리(typeface/font-family)
- 서체 분류 (세리프, 산세리프 등)
- 글자 크기(font-size)
- 대소문자 형식 (대문자, 소문자 등)
- 글꼴 굵기 (normal, bold 등)
- 글꼴 스타일 (레귤러/노멀/이탤릭)
영화 포스터든, 책 표지든, 식품 라벨이든 무엇을 작업하든, 타이포그래피 서식 결정은 해당 작업의 맥락에 기반해야 합니다.
자간은 타이포그래피의 여러 요소 중 하나일 뿐이지만, 그만큼 강력한 요소입니다.
CAPTIVITY
FREEDOM
그 차이가 느껴지시나요?
느낌은 잠시 접어두고, 이 점을 생각해 보세요. 대문자 텍스트는 일반적으로 일반 케이스 텍스트보다 읽기 어렵습니다. 대문자는 글자에 대칭적이고 균일한 구조를 부여하기 때문에 단어 안에서 개별 글자를 구별하기 어려워지는데, 특히 문장이나 단락 단위에서는 더욱 그렇습니다.
정리하면
- 독자 친화성을 위해 대문자 텍스트는 아껴서 사용하세요. 제목이나 짧은 헤딩에는 잘 어울리지만, 문장 전체나 단락에는 적합하지 않습니다.
- 경험상, 대문자/올캡스 텍스트는 글자 사이에 약간의 간격(때로는 넉넉한 간격)을 두면 훨씬 읽기 편해집니다.
- 글자가 서로 붙어 있는 듯한 모습보다는 적절한 간격이 있을 때 텍스트가 미적으로 더 아름답게 보입니다. 비주얼은 중요합니다.
- 반대로, 때로는 좁은 트래킹/자간이 딱 맞는 선택이기도 합니다.
이 문제는 흑백논리로 판단할 수 없습니다. 결국 맥락이 핵심입니다.