letter-spacing

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

구문

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

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

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

normal
현재 글꼴의 기본 간격. 0과 달리, auto사용자 에이전트가 양쪽 정렬을 위해 간격을 임의로 조절할 수 있습니다.
<length>
기본 간격에 추가할 글자간 간격. 음수 값을 지정할 수 있지만 구현에 따라 한계가 있을 수 있습니다. 사용자 에이전트가 간격을 줄이거나 늘리지 않습니다.

형식 구문

normal | <length>

예제

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

.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 Status Comment
CSS Text Module Level 3
The definition of 'letter-spacing' in that specification.
Working Draft No change.
CSS Transitions
The definition of 'letter-spacing' in that specification.
Working Draft Defines letter-spacing as animatable.
CSS Level 2 (Revision 1)
The definition of 'letter-spacing' in that specification.
Recommendation No change.
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
The definition of 'letter-spacing' in that specification.
Recommendation Initial SVG definition.
CSS Level 1
The definition of 'letter-spacing' in that specification.
Recommendation Initial definition.
초기값normal
적용대상all elements. It also applies to ::first-letter and ::first-line.
상속yes
Mediavisual
Computed valuean optimum value consisting of either an absolute length or the keyword normal
Animation typea length
Canonical orderthe unique non-ambiguous order defined by the formal grammar

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
letter-spacingChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 4Opera Full support 3.5Safari Full support 1WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support 1.0
SVG supportChrome Full support 1Edge Full support 12Firefox No support NoIE Full support 10Opera Full support YesSafari Full support 1WebView Android Full support 1Chrome Android Full support 18Firefox Android No support NoOpera Android Full support YesSafari iOS Full support 1Samsung Internet Android Full support 1.0

Legend

Full support  
Full support
No support  
No support

같이 보기