자간 (Letter Spacing)
**자간(Letter spacing)**은 글자와 글자 사이의 가로 간격입니다. 크기나 굵기만큼 눈에 띄지는 않지만, 자간 하나로 같은 텍스트가 “타이트하고 정돈된” 인상을 줄 수도, “헐겁고 산만한” 인상을 줄 수도 있습니다.
음수 vs 양수
| 값 | 효과 | 주로 쓰이는 곳 |
|---|---|---|
| 음수 (예: -0.03em) | 글자가 서로 가까워짐, 타이트한 인상 | 굵은 제목, 로고, 브랜드 워드마크 |
| 0 | 폰트 기본 간격 | 일반 본문 |
| 양수 (예: 0.05em) | 글자가 서로 멀어짐, 여유로운 인상 | 대문자 라벨, 태그, 버튼 텍스트 |
이 위키도 전역 자간을 -3%(-0.03em) 로 설정해 전체적으로 타이트하고 정돈된 인상을 줍니다. 큰 굵은 텍스트일수록 살짝 좁히는 것이 일반적인 관행입니다.
한글 권장값
| 용도 | 권장 자간 |
|---|---|
| 큰 굵은 제목 | -0.02em ~ -0.04em |
| 본문 | 0 ~ -0.02em |
| 작은 대문자 라벨(영문) | +0.02em ~ +0.08em |
한글은 과하게 좁히지 마세요. 영문 대문자 로고에는 -0.05em 이상의 깊은 네거티브 자간이 잘 어울리지만, 한글은 글자 자체가 이미 네모틀(정사각형에 가까운 형태)을 채우고 있어 너무 좁히면 받침이나 글자 획이 서로 겹쳐 보일 수 있습니다.
자간 조정하는 법
텍스트 레이어 선택
자간을 바꿀 텍스트를 클릭합니다.
Text 패널의 Letter spacing 값 수정
숫자를 입력합니다. 음수는 좁게, 양수는 넓게 적용됩니다.
크기별로 다시 확인
같은 자간 값이라도 큰 제목과 작은 본문에서 체감되는 정도가 다릅니다. 실제 사용될 크기에서 확인하세요.
사이트 전체에 기본 자간 적용하기
로고·버튼 하나하나가 아니라 사이트 전체 기본값으로 자간을 주고 싶다면, 코드 레벨에서 전역으로 지정하는 방법도 있습니다. (코드 컴포넌트를 다루는 고급 개발자용 방법이며, Framer 캔버스에서는 텍스트 스타일에 자간을 저장해 재사용하는 것으로 충분합니다.)
텍스트 스타일에 자간까지 저장해두면, 폰트를 나중에 교체하더라도 스타일 하나만 다시 조정하면 그 스타일을 쓰는 모든 텍스트에 반영됩니다. 텍스트·색상 스타일 참고.
다음 단계
글자 카테고리(크기·굵기·행간·자간)를 모두 살펴봤습니다. 다음은 이미지 · 동영상 넣기에서 미디어 요소를 다룹니다.