letter-spacing 속성의 이해

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

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

letter-spacing 데모 데모 버튼을 클릭해 보세요!
CSS rem과 em 단위

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

구문

CSS 
selector {
    letter-spacing: /* value */
}

정의

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

값

letter-spacing 속성의 값
normal 현재 글꼴의 일반 문자 간격입니다.
즉, 간격이 퍼지게 하거나 더 가깝게 추가 간격이 적용되지 않습니다.
길이 단위로는 0으로 계산됩니다.
length 길이 단위 값입니다. (양수, 0, 음수 적용 가능)
단, 값의 단위로 퍼센트(%) 단위를 사용할 수 없습니다.
CSS letter-spacing 속성 값 예시 
/* 키워드 값 */
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 속성을 사용할 경우에 두 가지 주의할 점이 있습니다.

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

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

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

CSS 
p {
    letter-spacing: 1em;
    background-color: orange;
}
HTML 
<p style="text-align: left;">abc</p>
실제 적용된 모습

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

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

CSS 
p {
    letter-spacing: 1em;
    background-color: orange;
}
HTML 
<p style="text-align: right;">abc</p>
실제 적용된 모습

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

접근성 고려사항

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

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

간격을 너무 좁게 설정한 경우
간격을 너무 펼쳐지게 설정한 경우

브라우저 호환성

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

명세서

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

참고문헌

같이 보기