타이포그래피 실수: 제목과 본문의 자간 조정이 필요한 상황과 구체적 수치

목차

• 자간 조정이 필요한 이유
• 제목과 본문의 권장 범위
• 자간을 반드시 확인해야 하는 상황
• 한글 자간은 어떻게 조정해야 할까?
• 단계별 자간 조정 절차
• 흔한 타이포그래피 실수와 해결법
• 자주 묻는 질문

자간 조정이 필요한 이유

자간은 연속된 글자 사이의 간격이며, 문장 전체에 적용하는 조정을 트래킹이라고 부릅니다. 특정 글자 쌍만 다듬는 커닝과는 적용 범위가 다릅니다. 예를 들어 제목 전체가 성기다면 트래킹을 조절하고, ‘VA’나 숫자와 괄호 사이만 어색하다면 커닝을 확인해야 합니다.

Adobe의 커닝·트래킹 안내에 따르면, 글꼴에는 특정 문자 조합을 위한 간격 정보가 포함될 수 있습니다. 따라서 먼저 커닝을 metrics 또는 auto로 활성화하고, 그래도 시각적 밀도가 맞지 않을 때 전체 자간을 조정하는 순서가 합리적입니다.

자간이 지나치게 좁으면 글자 덩어리가 뭉쳐 받침과 다음 초성이 붙어 보입니다. 반대로 너무 넓으면 단어보다 개별 글자가 먼저 보여 읽는 흐름이 끊깁니다. 자간은 장식 효과가 아니라 글자의 밀도와 단어 인식을 정돈하는 미세 조정입니다.

제목과 본문의 권장 범위

다음 수치는 완성값이 아니라 1차 테스트 범위입니다. 1em은 현재 글자 크기를 기준으로 하므로, -0.02em은 글자 크기의 **2%**만큼 간격을 줄인다는 뜻입니다. 예를 들어 40px 제목에서 -0.02em은 약 -0.8px, 16px 본문에서 0.02em은 약 0.32px에 해당합니다.

본문에 무조건 -0.02em을 적용해 화면에 더 많은 글자를 넣는 방식은 피해야 합니다. 특히 14px 이하의 작은 글자에서는 좁은 자간이 해상도와 안티앨리어싱의 영향을 크게 받습니다. 기본값에서 0.01em씩 움직이며 실제 기기에서 비교하는 편이 안전합니다.

자간을 반드시 확인해야 하는 상황

서체, 굵기, 크기를 바꾸면 같은 자간 값도 전혀 다르게 보입니다. 굵은 제목, 숫자가 많은 가격표, 한글과 영문이 섞인 메뉴, 대문자 버튼, 중앙 정렬된 짧은 문구는 간격 차이가 쉽게 드러나므로 별도 점검이 필요합니다.

한 줄 제목의 마지막 글자만 다음 줄로 넘어갈 때 자간으로 억지로 맞추는 것도 타이포그래피 실수입니다. 먼저 문구 길이, 컨테이너 폭, 글자 크기를 검토하고 자간은 마지막 미세 조정에 사용해야 합니다.

한글 자간은 어떻게 조정해야 할까?

한글은 초성·중성·종성이 한 글자 안에서 네모꼴을 이루므로 영문보다 글자 외곽의 흰 공간이 규칙적으로 느껴집니다. 그러나 ‘기’, ‘니’처럼 오른쪽이 열린 글자와 ‘롤’, ‘폼’처럼 획이 찬 글자가 이어지면 같은 수치에서도 간격이 달라 보일 수 있습니다. 따라서 자간 값보다 문장 전체의 흰 공간 리듬을 먼저 봐야 합니다.

본문은 최소 3줄 이상, 가능하면 실제 서비스 문장으로 시험합니다. 제목도 단어 하나만 보지 말고 조사, 숫자, 괄호가 포함된 후보를 함께 비교합니다. 가나다라마바사처럼 균일한 시험 문자열만 사용하면 실제 조판에서 생기는 문제를 놓치기 쉽습니다.

W3C CSS Text 사양에 따르면, letter-spacing은 normal 또는 길이 값으로 글자 사이의 추가 간격을 지정합니다. 웹에서는 px보다 글자 크기에 비례하는 em이 반응형 조정에 편리하지만, 양쪽 정렬에서는 브라우저가 간격을 추가로 조절할 수 있으므로 왼쪽 정렬 결과와 동일하다고 가정하면 안 됩니다.

단계별 자간 조정 절차

먼저 사용할 서체 파일과 굵기를 확정하고 커닝 기능을 켭니다. 다음으로 제목은 -0.02em, 본문은 0, 작은 캡션은 0.02em에서 시작합니다. 한 번에 큰 폭으로 바꾸지 말고 0.01em 단위로 전후 값을 만들어 비교하면 변화의 원인을 구분하기 쉽습니다.

1. 실제 제목과 본문을 각각 3개 이상 준비합니다.
2. 자간 외의 글자 크기·행간·너비를 고정합니다.
3. 기준값과 ±0.01em 시안을 나란히 비교합니다.
4. 데스크톱과 360px 모바일 화면에서 줄바꿈을 확인합니다.
5. 굵기 400과 700, 숫자·영문 혼용 문장을 함께 검사합니다.
6. 선택한 값을 디자인 토큰이나 CSS 변수로 기록합니다.

검수할 때는 화면을 확대해 글자 한 쌍만 보는 것보다 100% 배율에서 문단을 읽는 과정이 중요합니다. 약 2–3m 거리에서 큰 제목의 전체 밀도를 보고, 본문은 평소 읽는 거리에서 속도와 피로도를 살핍니다. 인쇄물이라면 실제 크기로 1회 이상 출력해 모니터 결과와 비교합니다.

흔한 타이포그래피 실수와 해결법

가장 흔한 문제는 모든 요소에 같은 음수 자간을 적용하는 것입니다. 제목을 단단하게 만든 값이 본문에서는 가독성을 떨어뜨릴 수 있습니다. 제목·본문·캡션·버튼별 토큰을 나누고, 상속된 letter-spacing이 작은 텍스트까지 내려가지 않는지 확인해야 합니다.

또 다른 타이포그래피 실수는 자간으로 행간과 글줄 길이 문제까지 해결하려는 것입니다. 본문이 답답하면 먼저 1.5~1.7 정도의 행간과 한 줄 약 40–70자의 길이를 점검해야 합니다. 단어 사이가 문제라면 자간이 아니라 어간이나 정렬 방식을 살펴야 합니다.

마지막으로 특정 시안에서만 보기 좋은 값을 고정하지 마세요. 핵심은 제목 -0.02em, 본문 0 같은 기준점에서 출발해 서체와 매체에 맞춰 0.01em씩 검증하는 것입니다. 프로젝트의 한글·영문·숫자 조합이 복잡하다면 실제 화면을 준비해 타이포그래피 검수나 디자인 상담을 요청하는 것도 효율적인 방법입니다.

자주 묻는 질문

제목 자간은 항상 좁혀야 하나요?

아닙니다. 굵고 큰 제목은 -0.02em부터 시험할 수 있지만, 장체나 획이 복잡한 서체는 기본값이 더 안정적일 수 있습니다. 글자의 흰 공간이 이미 좁다면 양수 값도 비교해야 합니다.

본문에 적합한 자간은 얼마인가요?

16px 안팎의 한글 본문은 0에서 시작하고, 필요할 때 -0.01em~0.03em 범위에서 조정하세요. 최소 3줄을 실제로 읽어 본 뒤 결정하는 것이 좋습니다.

자간과 커닝은 무엇이 다른가요?

자간 조정인 트래킹은 선택한 문장 전체의 간격을 일정하게 바꿉니다. 커닝은 특정 글자 두 개 사이의 시각적 간격을 다듬는 작업입니다.

CSS에서는 어떤 단위를 사용해야 하나요?

반응형 웹에서는 글자 크기에 비례하는 em이 관리하기 편합니다. 다만 정확한 시각 보정이 필요한 고정형 그래픽에서는 px나 디자인 도구의 트래킹 단위를 사용할 수 있습니다.

자간을 바꾸면 접근성에 문제가 생기나요?

너무 좁은 값은 작은 글자의 식별과 읽기 흐름을 방해할 수 있습니다. 확대 화면, 모바일, 긴 문단에서 겹침이나 잘림이 없는지 확인하고 사용자가 지정한 텍스트 간격을 CSS가 강제로 무효화하지 않도록 점검해야 합니다.