CSS letter-spacing 속성 – 자간 조정

`letter-spacing` 속성의 이해

letter-spacing 속성은
텍스트의 문자와 문자 사이 간격(일반적으로 '자간'이라고 함)을 지정하는 속성입니다.
이 속성을 사용하면 문자와 문자 사이의 간격을 퍼지게 하거나 더 가깝게 설정할 수 있습니다.

예를 들어, letter-spacing: 2px를 적용하면 문자와 문자 사이의 간격이 2px만큼 늘어납니다. 반대로 letter-spacing: -2px를 적용하면 문자와 문자 사이의 간격이 -2px만큼 줄어듭니다.

CSS rem과 em 단위

letter-spacing 속성의 구문 형식은 다음과 같습니다.

구문

CSS

/* 키워드 값 */
letter-spacing: normal;

/* length(길이 단위) 값 */
letter-spacing: 0; /* normal과 동일 */
letter-spacing: 2px;
letter-spacing: -2px;
letter-spacing: 1em;
letter-spacing: -0.15em;
letter-spacing: 1rem;
letter-spacing: -0.11rem;

/* 전역 값 */
letter-spacing: inherit;
letter-spacing: initial;
letter-spacing: revert;
letter-spacing: revert-layer;
letter-spacing: unset;

형식 구문

형식 정의

letter-spacing 속성의 형식 정의
초깃값	`normal`
적용 요소	모든 요소
상속	예
애니메이션	예

값

letter-spacing 속성의 값
`normal`	현재 글꼴의 일반 문자 간격입니다. 길이 단위로는 `0`으로 계산됩니다.
`length`	길이 단위 값입니다. (양수, `0`, 음수 적용 가능) 단, 값의 단위로 백분율(%) 단위를 사용할 수 없습니다.

예제

HTML

<h3 class="em-tight">letter-spacing 속성 예제</h3>
<p class="normal">문자와 문자 사이의 간격을 지정하는 속성입니다.</p>
<p class="em-wide">문자와 문자 사이의 간격을 지정하는 속성입니다.</p>
<p class="px-tight">문자와 문자 사이의 간격을 지정하는 속성입니다.</p>
<p class="px-wide">문자와 문자 사이의 간격을 지정하는 속성입니다.</p>

CSS

.normal {
    letter-spacing: normal; /* 0과 동일 */
}
.em-tight {
    letter-spacing: -0.05em;
}
.em-wide {
    letter-spacing: 0.5em;
}
.px-tight {
    letter-spacing: -2px;
}
.px-wide {
    letter-spacing:5px;
}

주의할 점

letter-spacing 속성을 사용할 경우에 두 가지 주의할 점이 있습니다.

`text-align: right;`에서 오른쪽 가장자리 간격 발생

명세서에서는 letter-spacing 속성은 줄의 시작이나 끝 부분에 문자 간격이 적용하면 안 된다고 명시하고 있습니다.
텍스트는 항상 블록 가장자리에 맞춰져야 한다는 의미입니다.

다음의 예제로 살펴 보겠습니다.

위 예제를 보면 text-align: left;로 설정된 텍스의 왼쪽 가장자리에는 간격이 없이 잘 적용되어 있습니다.

하지만, 다음의 예제를 보면 주요 브라우저에서 text-align: right;로 설정된 텍스트의 오른쪽 가장자리는 간격이 발생합니다.

이럴 경우 원하지 않는 간격의 발생으로 스타일될 수 있음을 고려해야 합니다.

접근성 고려사항

letter-spacing 속성을 사용해서 문자와 문자 사이의 간격을 너무 좁게하거나 너무 펼쳐지게 할 경우에 사용자는 이 스타일을 적용한 글을 읽기가 힘들어집니다.

letter-spacing 속성을 사용한 문자와 문자 사이의 간격의 조정은 스타일을 위해 매우 중요한 것이지만 상황에 따른 조정이 필요합니다.

브라우저 호환성

letter-spacing 속성의 브라우저 호환성
속성	데스크탑 Chrome	데스크탑데스크탑 Edge	데스크탑 Firefox	Safari
`letter-spacing`	1	12	12	1

명세서

letter-spacing 속성의 명세서 사양
명세서 사양
`letter-spacing`	CSS Text Module Level 3 #letter-spacing-property

참고문헌

MDN - letter-spacing

letter-spacing 속성의 이해

구문