CSS / Reference / letter-spacing, word-spacing

letter-spacing은 문자 사이 간격을, word-spacing은 단어 구분에 쓰이는 간격을 조정합니다. 양수는 간격을 늘리고 음수는 줄이며, 두 속성은 글꼴 크기나 줄 높이를 바꾸는 기능과 구분해야 합니다.

문법과 주요 값

초기값은 브라우저 기본 스타일시트가 HTML 요소에 적용한 값과 같다는 뜻이 아닙니다. 실제 값은 개발자 도구의 Computed에서 확인하세요.

.title { letter-spacing: 0.08em; }
.copy { word-spacing: 0.5em; }

값과 적용 조건은 MDN letter-spacing, MDN word-spacing에서 확인할 수 있습니다.

실행 예제와 결과 비교

아래 전체 코드를 UTF-8 형식의 letter-spacing-example.html 파일로 저장한 뒤 브라우저로 여세요. 예제용 CSS는 이 파일 안에만 넣고 사이트 전체 스타일시트에 그대로 붙여 넣지 않습니다.

<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>letter-spacing, word-spacing 비교 예제</title>
<style>
body { margin: 0; color: #20242b; background: #fff; font: 16px/1.7 "Malgun Gothic", sans-serif; }
#demo { padding: 24px; max-width: 820px; margin: auto; }
h1 { font-size: 22px; margin: 0 0 20px; }
.samples { display: flex; flex-wrap: wrap; gap: 24px; }
.label { margin: 0 0 8px; font-weight: 700; }
.target, .reference { width: 280px; padding: 12px; background: #e6f2ff; }
.target { letter-spacing: 2px; }
.reference { word-spacing: 12px; }

/* 좁은 화면에서 실습 외곽을 맞춥니다. */
.target, .reference { max-width: calc(100vw - 48px - 24px); }
</style>
</head>
<body>
<main id="demo">
<h1>letter-spacing, word-spacing 적용 비교</h1>
<section class="samples"><div class="a"><p class="label">letter-spacing: 2px</p><div class="target">Hello CSS world / 안녕하세요 CSS 예제입니다.</div></div><div class="b"><p class="label">word-spacing: 12px</p><div class="reference">Hello CSS world / 안녕하세요 CSS 예제입니다.</div></div></section>
</main>
</body>
</html>

첫 줄은 각 문자의 간격이 넓어지고 두 번째 줄은 단어를 구분하는 공백의 간격이 더 넓어집니다. 문자 간격은 공백 주변의 전체 표시 폭에도 영향을 줄 수 있습니다.

글자 크기와 함께 조정하기

제목처럼 크기가 바뀌는 텍스트에는 em 단위가 상대적인 느낌을 유지하기 쉽습니다. 본문에 큰 자간을 일괄 적용하면 줄 길이와 줄바꿈 위치도 달라지므로 실제 내용으로 확인하세요. 두 속성은 상속되므로 하위 버튼이나 코드에도 전달될 수 있습니다.

언어와 읽기 편의성

word-spacing은 한글의 모든 글자 사이를 조정하지 않으며, 띄어쓰기가 있는 구간을 중심으로 작동합니다. 연결 형태가 중요한 문자 체계나 작은 본문에 큰 letter-spacing을 강제하지 마세요. normal과 0은 정렬 과정에서 브라우저가 간격을 조정하는 여지가 다를 수 있습니다.

같은 문장에서 문자·단어 간격 비교

다음 전체 문서를 css-reference-10463-practice.html로 UTF-8 저장한 뒤 브라우저에서 엽니다. 다른 예제 파일에 중첩해서 붙이지 않고 별도 파일로 시험합니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>같은 문장에서 문자·단어 간격 비교</title>
  <style>
    body { margin: 16px; color: #20242b; font: 16px/1.7 sans-serif; }
    main { max-width: 52rem; margin: auto; }
    h1 { font-size: 1.35rem; }
    .samples { display: flex; flex-wrap: wrap; gap: 24px; }
    .samples > * { max-width: 100%; min-width: 0; }
    :focus-visible { outline: 3px solid #005fcc; outline-offset: 3px; }
.sample { padding:12px; background:#e6f2ff; overflow-wrap:anywhere; } .letters { letter-spacing:2px; } .words { word-spacing:12px; }
  </style>
</head>
<body>
<main>
  <h1>같은 문장에서 문자·단어 간격 비교</h1>
<p>기준: normal</p><p class="sample ">Hello CSS world / CSS spacing example.</p><p>letter-spacing: 2px</p><p class="sample letters">Hello CSS world / CSS spacing example.</p><p>word-spacing: 12px</p><p class="sample words">Hello CSS world / CSS spacing example.</p>
</main>
</body>
</html>

세 문장의 내용·크기·너비가 같으므로 바뀐 간격을 분리해 볼 수 있습니다. .letters의 2px만 0으로 바꾸어 기준과 비교하고 되돌립니다. 다음에는 .words의 12px만 0으로 바꾼 뒤 복구하세요.

문자 크기·줄 높이·서체를 함께 조정하려면 글꼴, 글자 크기, 굵기, 줄 간격 설정하기를 참고하세요. 본문의 조건과 함께 비교할 관련 속성은 line-height입니다.

적용되지 않거나 예상과 다를 때

• 차이가 안 보이면 예문에 실제 단어 구분 공백이 있는지 확인합니다.
• 음수 값으로 겹침이 생기면 자간을 되돌리고 글꼴 크기와 컨테이너 너비부터 조정합니다.