CSS에서 문자 간격(letter-spacing, 자간)을 설정할 때는 em 측정 단위를 사용하는 것이 가장 효과적입니다.
em은 글꼴 높이를 기준으로 하는 상대적인 측정 단위입니다. em 단위는 해당 글꼴의 크기와 동일하기 때문에, 예를 들어 글꼴 크기를 12pt로 지정했다면 1em은 12pt가 되고, 2em은 24pt가 됩니다. 이러한 상대성 덕분에 글꼴 크기가 변경되어도 자간이 자연스럽게 함께 조절됩니다.
예제
아래 코드를 실행하면 CSS의 letter-spacing 속성과 em 단위를 사용하여 문자 간격을 설정하는 방법을 직접 확인할 수 있습니다.
<html> <head> </head> <body> <div style = "position:relative;left:90px;top:3px;background-color:yellow;letter-spacing: 2em;"> This div has relative positioning. </div> </body> </html>
참고 사항
letter-spacing 속성에는 px, rem 등 다른 단위도 사용할 수 있습니다. 하지만 em 단위를 사용하면 부모 요소의 글꼴 크기에 비례하여 자간이 자동으로 계산되므로, 화면 크기나 글꼴 설정에 따라 유연하게 대응해야 하는 반응형 웹 디자인에서 특히 유리합니다.