도구스개발

CSS 텍스트 간격(줄간격·자간) 계산기

글자 크기를 입력하면 WCAG 2.1(1.4.12) 기준 최소 권장 줄간격·문단간격·자간·낱말간격을 px로 계산해 CSS 코드까지 만들어 줍니다.

px
줄 간격(line-height)1.5 (24px)
문단 간격(margin-bottom 등)32px
자간(letter-spacing)1.92px
낱말 간격(word-spacing)2.56px

CSS

font-size: 16px;
line-height: 1.5;
letter-spacing: 1.92px;
word-spacing: 2.56px;
이 문단은 위에서 계산한 간격을 그대로 적용해 보여주는 미리보기입니다. 줄 간격과 자간이 넉넉해지면 읽기가 한결 편해지는 것을 확인할 수 있습니다.
WCAG 2.1 성공 기준 1.4.12(Text Spacing, AA)는 사용자가 이 값까지 간격을 늘려도 콘텐츠가 겹치거나 잘리지 않아야 한다고 요구합니다. 반드시 이 값으로 디자인해야 하는 것은 아니지만, 이보다 좁게 만들 경우 사용자가 간격을 늘렸을 때 레이아웃이 깨지지 않는지 확인해야 합니다.

사용 방법

  1. 1기준이 되는 글자 크기(font-size)를 px로 입력합니다.
  2. 2WCAG 1.4.12 기준 줄간격·문단간격·자간·낱말간격 값을 확인합니다.
  3. 3미리보기로 실제 느낌을 보고, 복사 버튼으로 CSS 코드를 가져갑니다.

자주 묻는 질문

WCAG 2.1 성공 기준 1.4.12(Text Spacing, AA 등급)가 명시한 배수입니다. 줄간격은 글자 크기의 1.5배, 문단 간격은 2배, 자간은 0.12배, 낱말 간격은 0.16배 이상입니다.

아닙니다. 이 기준은 "사용자가 브라우저·확장 프로그램으로 간격을 이 값까지 늘려도 콘텐츠가 겹치거나 잘리면 안 된다"는 뜻입니다. 기본 디자인은 더 좁아도 되지만, 늘어났을 때 레이아웃이 버텨야 통과합니다.

단위 없는 숫자를 권장합니다. font-size가 상속으로 바뀌어도 배수 관계가 그대로 유지되기 때문입니다. px로 고정하면 자식 요소의 글자 크기가 달라졌을 때 줄 간격이 의도와 어긋날 수 있습니다.

color-contrast는 WCAG의 색상 대비 기준(1.4.3 등)을 다룹니다. 이 계산기는 같은 WCAG 안에서도 텍스트 간격 기준(1.4.12)을 다뤄 서로 겹치지 않습니다.

알아두면 좋은 점

  • W3C 공식 문서(w3.org/WAI/WCAG21/Understanding/text-spacing.html)와 dequeuniversity.com·digitala11y.com 등 접근성 전문 자료를 WebSearch로 교차 확인했습니다(2026-09-10). 배수(1.5·2·0.12·0.16)는 스펙 값이라 출처 간 이견이 없었습니다.
  • 문단 간격은 1.4.8(AAA)의 "줄간격의 1.5배"와 1.4.12(AA) 자료가 공통 제시하는 "글자 크기의 2배" 표기가 서로 일치해(줄간격이 이미 글자 크기의 1.5배이므로) 두 표현을 함께 확인했습니다.
  • 입력값은 서버로 전송되지 않고 브라우저 안에서만 계산됩니다.

함께 보면 좋은 도구

CSS 단위 변환px과 rem·em·pt를 서로 변환합니다.색 대비 검사텍스트 색과 배경 색의 명도 대비를 계산해 WCAG 접근성 기준(AA·AAA)을 통과하는지 확인합니다.gitignore 판정.gitignore 규칙과 경로를 넣으면 그 파일이 무시되는지, 어느 줄이 마지막으로 이겼는지 알려줍니다.울프람 규칙규칙 번호 0~255를 8비트로 풀어 세 칸 이웃에 대응시키고 세대를 쌓아 무늬를 그립니다.2-SAT「둘 중 하나는 참」인 조건을 여럿 넣으면 참·거짓 배정이 가능한지 판정하고 배정을 하나 찾아 줍니다.

마지막 검증: 2026년 9월 10일 · 결과는 참고용 추정치입니다.