CSS의 letter-spacing 속성을 사용하면 텍스트를 구성하는 글자 사이의 간격, 즉 자간(letter spacing)을 원하는 만큼 지정할 수 있습니다. 이 속성은 문서의 가독성을 높이거나 디자인적으로 강조된 타이포그래피 효과를 내고 싶을 때 유용하게 활용됩니다.
letter-spacing 속성의 주요 값
- normal – 브라우저 기본 자간을 적용합니다.
- 길이 값(px, em, rem 등) – 글자 사이에 추가되는 간격을 직접 지정합니다. 음수 값을 사용하면 글자가 서로 더 가까워집니다.
예제 1: em 단위로 자간 설정하기
다음 예제에서는 첫 번째 <p> 요소에 letter-spacing: 2em을 적용하여 글자 사이에 넓은 간격을 부여합니다.
<!DOCTYPE html>
<html>
<head>
<style>
p:first-of-type {
margin: 3%;
padding: 3%;
background-color: seagreen;
color: white;
letter-spacing: 2em;
font-size: 2em;
text-align: center;
}
</style>
</head>
<body>
<p>BOOM</p>
<p>BOOM</p>
</body>
</html>실행 결과
위 코드를 실행하면 첫 번째 'BOOM' 텍스트에는 넓은 자간이 적용되고, 두 번째 'BOOM' 텍스트는 기본 자간 그대로 표시되어 두 결과를 쉽게 비교할 수 있습니다.
예제 2: px 단위로 자간 설정하기
이번 예제에서는 플렉스 박스(flex) 레이아웃 안에 두 개의 문단을 배치하고, letter-spacing: 12px를 적용해 픽셀 단위로 자간을 조절합니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
display: flex;
margin: 3%;
padding: 3%;
border: 23px ridge navy;
}
p {
margin: 3%;
background-color: navajowhite;
letter-spacing: 12px;
font-size: 1.2em;
text-align: center;
}
</style>
</head>
<body>
<div>
<p>BOOM</p>
<p>abcdefghijklmnop-qrstuvwxyz</p>
</div>
</body>
</html>실행 결과
두 문단 모두 글자 사이에 12px의 간격이 추가되어, 알파벳 전체가 넓게 벌어진 형태로 화면에 출력됩니다.
정리
letter-spacing 속성은 px, em 등 다양한 길이 단위를 지원하며, 음수 값도 허용됩니다. 제목이나 로고 텍스트에 자간을 넓혀 세련된 느낌을 주거나, 본문 가독성을 미세하게 조정하는 등 다양한 상황에서 활용할 수 있는 실용적인 CSS 속성입니다.