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 2015년 7월.
letter-spacing CSS 속성은 글자 사이의 간격을 조절합니다.
시도해 보기
letter-spacing: normal; letter-spacing: 0.2rem; letter-spacing: 1px; letter-spacing: -1px; <section id="default-example"> <p id="example-element"> As much mud in the streets as if the waters had but newly retired from the face of the earth, and it would not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up Holborn Hill. </p> </section> @font-face { src: url("/shared-assets/fonts/variable-fonts/AmstelvarAlpha-VF.ttf"); font-family: Amstelvar; font-style: normal; } section { font-size: 1.2em; font-family: Amstelvar; } 구문
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; 값
형식 구문
letter-spacing =
normal |
<length-percentage>
<length-percentage> =
<length> |
<percentage>
예제
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 type | a length |