웹 디자인에서 텍스트의 가독성과 디자인 완성도를 높이려면 글자 간격(자간) 조절이 중요합니다. CSS에서는 letter-spacing 속성을 사용하여 문자 사이의 간격을 손쉽게 설정할 수 있습니다.
letter-spacing 속성 값
letter-spacing 속성에 사용할 수 있는 값은 다음과 같습니다.
letter-spacing: normal | length | initial | inherit;
- normal – 브라우저 기본 자간을 적용합니다.
- length – px, em, cm 등 원하는 단위로 간격을 지정합니다. 음수 값을 사용하면 글자가 서로 가까워집니다.
- initial – 속성을 기본값으로 되돌립니다.
- inherit – 부모 요소의 자간 설정을 상속받습니다.
예제 1: px 단위로 자간 늘리기
아래 예제는 두 개의 문단에 각각 1px와 10px의 자간을 적용한 코드입니다.
<!DOCTYPE html>
<html>
<head>
<style>
p.demo1 {
letter-spacing: 1px;
}
p.demo2 {
letter-spacing: 10px;
}
</style>
</head>
<body>
<h1>Demo Heading</h1>
<h2>Heading2</h2>
<p class="demo1">This is demo text.</p>
<h2>Heading2</h2>
<p class="demo2">This is demo text.</p>
</body>
</html>실행 결과
1px를 적용한 문단은 거의 기본 상태와 비슷하지만, 10px를 적용한 문단은 글자 사이가 눈에 띄게 넓어진 것을 확인할 수 있습니다.
예제 2: 다양한 단위와 음수 값 활용하기
letter-spacing은 cm 같은 절대 단위도 사용할 수 있으며, 음수 값을 넣으면 글자 간격을 좁힐 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
p.demo1 {
letter-spacing: 1cm;
}
p.demo2 {
letter-spacing: -2px;
}
</style>
</head>
<body>
<h1>Demo Heading</h1>
<h2>Heading2</h2>
<p class="demo1">This is demo text.</p>
<h2>Heading2</h2>
<p class="demo2">This is demo text.</p>
</body>
</html>실행 결과
1cm를 적용하면 글자가 매우 넓게 벌어지고, -2px처럼 음수 값을 사용하면 글자들이 겹칠 정도로 가까워집니다.
정리
letter-spacing 속성은 제목이나 로고 타이포그래피에서 분위기를 연출하거나, 본문 텍스트의 가독성을 미세하게 조정할 때 유용하게 활용됩니다. 다만 자간을 과도하게 넓히거나 좁히면 오히려 가독성이 떨어질 수 있으므로, 디자인 의도에 맞게 적절한 값을 사용하는 것이 좋습니다.