letter-spacing

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

letter-spacing CSS 속성은 글자 사이의 간격을 조절합니다.

시도해보기

구문

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

/* <length> 값 */
letter-spacing: 0.3em;
letter-spacing: 3px;
letter-spacing: 0.3px;

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

normal

현재 글꼴의 기본 간격. 0과 달리, auto사용자 에이전트가 양쪽 정렬을 위해 간격을 임의로 조절할 수 있습니다.

<length>

기본 간격에 추가할 글자간 간격. 음수 값을 지정할 수 있지만 구현에 따라 한계가 있을 수 있습니다. 사용자 에이전트가 간격을 줄이거나 늘리지 않습니다.

형식 구문

letter-spacing = 
normal |
<length>

예제

HTML

html
<p class="normal">글자 간격</p>
<p class="em-wide">글자 간격</p>
<p class="em-wider">글자 간격</p>
<p class="em-tight">글자 간격</p>
<p class="px-wide">글자 간격</p>

CSS

css
.normal {
  letter-spacing: normal;
}
.em-wide {
  letter-spacing: 0.4em;
}
.em-wider {
  letter-spacing: 1em;
}
.em-tight {
  letter-spacing: -0.05em;
}
.px-wide {
  letter-spacing: 6px;
}

결과

접근성 고려사항

letter-spacing 값의 절댓값이 너무 크면 스타일을 적용한 글을 읽기 힘들어집니다. 지나치게 큰 값으로는 글자 간격이 지나치게 넓어져 단어를 이루지 못하고 따로 따로 보입니다. 반대로 지나친 음숫값은 글자가 서로 겹쳐 알아볼 수 없습니다.

글꼴마다 문자의 너비가 다르므로 읽기에 용이한 간격은 상황에 따라 다릅니다. 모든 글꼴에 적합한 하나의 값은 존재하지 않습니다.

명세

Specification
CSS Text Module Level 3
# letter-spacing-property
Scalable Vector Graphics (SVG) 2
# LetterSpacingProperty
초기값normal
적용대상all elements. It also applies to ::first-letter and ::first-line.
상속yes
계산 값an optimum value consisting of either an absolute length or the keyword normal
Animation typea length

브라우저 호환성

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
letter-spacing
normal
On SVG elements

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

같이 보기