CSS letter-spacing 속성이란?
letter-spacing 속성은 텍스트를 구성하는 글자와 글자 사이의 간격을 넓히거나 좁히기 위해 사용하는 CSS 속성입니다. 제목이나 로고 타이포그래피에서 세련된 느낌을 연출하거나, 본문의 가독성을 높이고 싶을 때 유용하게 활용할 수 있습니다.
기본값은 normal이며, 원하는 간격 크기를 직접 지정할 수도 있습니다.
사용 가능한 값
- normal – 폰트에 정의된 기본 간격을 사용합니다.
- 길이 값(px, em, rem 등) – 글자 사이에 추가되는 간격을 지정합니다.
- 음수 값 – 글자 간격을 기본 상태보다 좁게 만듭니다.
기본 예제 코드
<html> <head> </head> <body> <p style="letter-spacing:7px;"> This text is having space between letters. </p> </body> </html>
위 예제에서는 letter-spacing:7px;를 적용하여 문단 내 모든 글자 사이에 7픽셀의 간격이 추가됩니다. 실행하면 글자들이 평소보다 훨씬 넓게 벌어져 있는 것을 확인할 수 있습니다.
다양한 값 비교 예제
<p style="letter-spacing:normal;">기본 간격 텍스트</p> <p style="letter-spacing:3px;">3px 간격 텍스트</p> <p style="letter-spacing:-1px;">-1px 좁은 간격 텍스트</p>
실무 활용 팁
대문자로 된 제목이나 버튼 텍스트에는 2px~5px 정도의 자간을 주면 고급스러운 인상을 줄 수 있습니다. 반대로 본문처럼 긴 텍스트에는 과도한 자간이 오히려 가독성을 해칠 수 있으므로 0.02em~0.05em 수준의 미세한 조정을 권장합니다. 또한 em 단위를 사용하면 폰트 크기에 비례해 간격이 조절되므로 반응형 디자인에 더욱 적합합니다.