letter-spacing
CSS 속성은 글자 사이의 간격을 조절합니다.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
구문
/* 키워드 값 */
letter-spacing: normal;
/* <length> 값 */
letter-spacing: 0.3em;
letter-spacing: 3px;
letter-spacing: .3px;
/* 전역 값 */
letter-spacing: inherit;
letter-spacing: initial;
letter-spacing: unset;
값
형식 구문
예제
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 |
Computed value | an optimum value consisting of either an absolute length or the keyword normal |
Animation type | a length |
브라우저 호환성
BCD tables only load in the browser
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.