글자 간격 조절기

자간을 눈으로 고르고 CSS·피그마·포토샵 값으로 바꾸는 도구

글자 간격 조절기는 글자와 글자 사이의 간격, 곧 자간(letter-spacing)을 실제 크기 견본에서 바꿔 보며 고르는 도구입니다. 값을 정하면 CSS 코드와 Tailwind 클래스를 만들고, 같은 값을 피그마·포토샵·워드에서 쓰는 단위로 바꿔 보여 줍니다. 예를 들어 16px 글자에 letter-spacing: -0.02em;을 주면 글자마다 0.32px씩 간격이 줄고, 이는 피그마 −2%, 포토샵 트래킹 −20, 워드 12pt 글자의 −0.24pt와 같습니다.

견본 칸에 쓰고 싶은 문장을 직접 넣으면, 확대 투시가 앞 글자 몇 개를 크게 그려 간격이 어디에 붙는지 빗금으로 보여 줍니다. 비교 사다리는 지금 값의 위아래 여섯 줄을 나란히 놓아 눈으로 고르게 돕고, 크기별 기준 그래프는 Apple SF Pro, Inter, Material 3, 정부 디자인 시스템(KRDS)이 글자 크기마다 정한 자간을 지금 값과 함께 보여 줍니다.

자간을 왜, 언제 조절하나

글꼴에는 디자이너가 정한 기본 간격이 있어서 대부분의 문장은 그대로 써도 됩니다. 다만 그 기본 간격은 특정한 크기와 쓰임을 기준으로 맞춘 것이라, 아주 작거나 아주 큰 글자, 대문자만 쓴 글자에서는 간격이 어색해 보일 수 있습니다. 자간 조절은 이런 곳에서 글자 사이를 조금 넓히거나 좁혀 읽기 편하게 만드는 작업입니다.

디자인 시안을 웹으로 옮길 때: 피그마의 −2%나 포토샵의 −20을 CSS에 그대로 적으면 전혀 다른 값이 됩니다. 시안 값을 아래 환산표의 해당 칸에 넣으면 em과 px 값이 바로 나옵니다.
큰 제목이 성겨 보일 때: 글자가 커지면 글자 사이의 빈 곳도 함께 커져 눈에 띕니다. 조금 좁히면 단단해 보이는 경우가 많지만 글꼴에 따라 반대일 수도 있으니, 비교 사다리에서 위아래 값을 견주어 봅니다.
작은 글씨와 대문자 라벨: 사진 설명, 각주, 단추처럼 작은 글씨와 대문자만 쓴 라벨은 간격을 조금 넓히면 글자가 덜 뭉쳐 보입니다. Google Fonts의 타이포그래피 안내도 대문자에는 간격을 넓히는 편이 읽기 좋다고 설명합니다.
로고와 워드마크: 짧은 글자를 넓게 벌려 분위기를 만드는 경우입니다. 0.1em 이상 크게 벌릴 때는 마지막 글자 뒤에 붙는 간격 때문에 가운데 정렬이 어긋나지 않는지 확인합니다.
문서를 한 줄, 한 쪽에 맞출 때: 한글(HWP)이나 워드 문서에서 한두 글자가 다음 줄로 넘어갈 때 자간을 조금 줄여 맞추곤 합니다. 프로그램마다 단위와 메뉴가 달라 아래에 따로 정리했습니다.

쓰는 법

위의 예시(본문, 작은 글씨, 한글 제목, 큰 제목, 대문자 라벨, 로고 글자) 중 비슷한 쓰임을 고르거나, 글꼴·글자 크기·굵기·줄 간격을 직접 정합니다. 이 기기에 설치되지 않은 글꼴은 목록에 '이 기기에 없음'으로 표시됩니다.
실제 크기 견본 칸에 쓸 문장을 넣습니다. 확대 투시와 비교 사다리도 이 문장의 첫 줄로 바뀝니다.
자간 막대를 움직이거나 비교 사다리에서 더 읽기 좋은 줄을 누릅니다. 누른 값이 가운데로 오기 때문에 몇 번 누르면 원하는 값으로 좁혀집니다. 사다리 간격은 0.005em, 0.01em, 0.025em 중에서 고를 수 있습니다.
시안 값이 이미 있으면 '다른 프로그램 값' 표에서 그 칸(피그마 %, 포토샵 트래킹, 워드 pt 등)에 넣습니다. 어느 칸에 넣어도 나머지가 함께 바뀝니다.
CSS 출력 단위를 em이나 px로 고른 뒤 CSS 전체나 자간 한 줄, Tailwind 클래스를 복사합니다. 견본을 사진으로 저장하거나, 지금 설정이 담긴 링크를 복사해 다른 사람과 나눌 수도 있습니다.

단위 환산: em, px, %, 트래킹, pt

자간은 프로그램마다 단위가 다릅니다. CSS의 em, 피그마의 %, 어도비 프로그램의 트래킹은 모두 글자 크기에 비례하는 단위라서 글자 크기가 바뀌어도 비율이 그대로 유지됩니다. 반면 px와 워드의 pt는 고정된 길이라서, 같은 비율을 유지하려면 글자 크기에 맞춰 다시 계산해야 합니다. 아래 표는 16px(12pt) 글자에 −0.02em을 줄 때 프로그램마다 넣는 값입니다.

어디에 넣나	단위	em으로 바꾸는 식	16px 글자의 −0.02em
CSS letter-spacing, 안드로이드 letterSpacing	em	그대로	−0.02em
CSS px, 피그마 px	px	px ÷ 글자 크기(px)	−0.32px
피그마 Letter spacing(%)	%	% ÷ 100	−2%
포토샵·일러스트레이터·인디자인 트래킹	1/1000 em	트래킹 ÷ 1000	−20
워드 문자 간격(넓게·좁게)	pt	pt ÷ 글자 크기(pt)	−0.24pt

워드의 글자 크기는 pt로 정하므로, 웹의 px 크기와 맞출 때는 1px = 0.75pt로 바꿉니다(16px = 12pt). iOS의 kern과 SwiftUI의 tracking은 pt 단위의 고정 길이라서, 글자 크기 수치가 같다면 px 칸과 같은 수를 넣습니다. Tailwind CSS의 자간 클래스는 아래 여섯 단계이며, 이 도구는 값이 정확히 맞으면 그 이름을, 아니면 tracking-[-0.02em] 같은 임의 값 클래스를 만듭니다.

Tailwind 클래스	em	16px 글자	피그마 %	트래킹
`tracking-tighter`	−0.05em	−0.8px	−5%	−50
`tracking-tight`	−0.025em	−0.4px	−2.5%	−25
`tracking-normal`	0em	0px	0%	0
`tracking-wide`	0.025em	0.4px	2.5%	25
`tracking-wider`	0.05em	0.8px	5%	50
`tracking-widest`	0.1em	1.6px	10%	100

글자 크기마다 다른 자간

같은 글꼴이라도 크기에 따라 알맞은 자간이 달라집니다. Apple은 SF Pro 글꼴에 6pt부터 96pt까지 크기별 트래킹 표를 두고, Inter 글꼴은 글자 크기를 넣으면 자간을 내는 식(−0.0223 + 0.185 × e^{−0.1745 × 크기})을 공개했으며, Material 3은 글자 역할 15가지마다 자간을 정해 둡니다. 작은 글씨일수록 간격을 더 주는 방향은 같지만 세부는 서로 다릅니다. Apple과 Inter는 12px 안팎에서 0이 되고 본문 크기(14~20px)에서는 음수로 줄입니다. Material 3은 본문·라벨 역할과 작은 제목 역할(Title Medium·Small)에 양수(+0.007~+0.045em)를 주고, Title Large와 큰 제목 역할(Headline·Display)에는 0을 둡니다(가장 큰 Display Large만 −0.004em). 큰 글자에서는 Inter가 −0.022em 근처에 머물지만, SF Pro 표는 24pt부터 다시 양수가 되고 80pt 이상에서는 0입니다.

글자 크기	Apple SF Pro	Inter	Material 3 (가장 가까운 역할)
11px	+0.006em	+0.005em	Label Small 11 · +0.045em
12px	0em	0em	Body Small 12 · +0.033em
14px	−0.011em	−0.006em	Body Medium 14 · +0.014em
16px	−0.02em	−0.011em	Body Large 16 · +0.031em
17px	−0.026em	−0.013em	Body Large 16 · +0.031em
20px	−0.023em	−0.017em	Title Large 22 · 0em
24px	+0.003em	−0.019em	Headline Small 24 · 0em
32px	+0.013em	−0.022em	Headline Large 32 · 0em
48px	+0.008em	−0.022em	Display Medium 45 · 0em
64px	+0.004em	−0.022em	Display Large 57 · −0.004em

Apple 표의 단위는 pt이고 Material 3은 sp라서, 웹에서는 같은 수치의 px로 보고 em으로 바꿨습니다(소수 셋째 자리). Apple 표는 iOS와 macOS가 같은 값입니다. 정부 디자인 시스템 KRDS는 본문과 24px 이하 제목의 자간을 0px로 두고, 32px 이상 제목과 디스플레이 글자에만 1px을 더합니다. 32px 글자의 1px은 0.031em, 60px 글자의 1px은 0.017em입니다. 이처럼 큰 제목의 자간은 기준마다 방향이 달라서, 쓰려는 글꼴로 견본을 만들어 직접 견주어 보는 편이 안전합니다.

한글 문서와 디자인 프로그램에서 자간 바꾸기

W3C의 한국어 텍스트 레이아웃 요구사항(KLREQ)은 "한글, 한자, 가나 등의 문자는 글자사이 0으로 배열하는 것을 기본으로 한다"고 정합니다. 곧 한글 본문의 기준은 자간 0이고, 제목이나 좁은 칸처럼 필요한 곳에서만 조절합니다. 프로그램별로 자간을 바꾸는 곳은 다음과 같습니다.

한글(HWP): [서식]-[글자 모양]의 [기본] 탭에서 자간을 −50%~50%로 정합니다. Alt+Shift+W를 누르면 1%씩 넓어지고 Alt+Shift+N을 누르면 1%씩 좁아집니다. 한글·영문·한자 등 언어마다 자간을 따로 줄 수 있고, 빈칸의 자간은 영문 자간을 따릅니다. 한컴 도움말이 이 %의 기준(글자 크기인지 글자 폭인지)을 밝히지 않아, 이 도구는 한글 값을 CSS로 환산하지 않습니다.
워드: [홈] 탭에서 글꼴 대화 상자를 열고 [고급] 탭의 간격에서 '넓게'나 '좁게'를 고른 뒤 값을 pt로 넣습니다. 선택한 모든 글자 사이가 같은 길이만큼 바뀝니다.
피그마: 텍스트 속성의 Letter spacing에 %나 px로 넣습니다. 피그마 플러그인 문서는 이 값의 단위를 PERCENT와 PIXELS 두 가지로 정합니다.
포토샵·일러스트레이터·인디자인: 문자 패널의 트래킹 칸에 넣습니다. 어도비 도움말은 트래킹과 커닝을 모두 1/1000 em 단위로 잰다고 설명합니다.

WCAG 2.2의 성공 기준 1.4.12 글자 간격(AA)은 사용자가 줄 간격을 글자 크기의 1.5배, 문단 뒤 간격을 2배, 자간을 0.12배, 단어 간격을 0.16배로 바꿔도 내용이나 기능이 사라지지 않아야 한다고 정합니다. 이 값을 디자인에 쓰라는 뜻이 아니라, 읽기에 어려움이 있는 사용자가 간격을 넓혔을 때 글자가 잘리거나 겹치지 않게 만들라는 뜻입니다. 자간 막대의 'WCAG 0.12' 눈금이 그 값이며, 고정 폭 단추나 한 줄로 자른 제목은 이 값에서 넘치지 않는지 확인해 둡니다.

Google Fonts의 타이포그래피 안내는 대문자만 쓴 글자에는 간격을 넓히는 편이 읽기 좋고, 음수 자간은 아주 큰 제목 크기가 아니라면 권하지 않는다고 설명합니다. 본문은 0에서 시작해 비교 사다리로 위아래 값을 견주어 보는 편이 무난합니다.

CSS letter-spacing이 실제로 움직이는 방식

em은 선언한 요소에서 px로 굳어 상속됩니다. CSS Text 3은 letter-spacing의 계산값을 절대 길이로 정합니다. 그래서 16px 부모에 letter-spacing: 0.1em을 주면 32px 자식도 1.6px을 그대로 물려받습니다(Chrome 151에서 잰 값). 크기가 다른 자식에서도 비율을 지키려면 자식에 em 값을 다시 적습니다. CSS Text 4가 새로 정한 % 단위는 비율 그대로 물려받으며, MDN 호환성 자료는 Chrome 145, Firefox 45, Safari 7부터 지원한다고 적습니다.
마지막 글자 뒤에도 간격이 붙는 브라우저가 있습니다. 명세는 줄의 처음과 끝에는 자간을 넣지 않도록 정하지만, Chrome 151에서는 마지막 글자 뒤에도 간격이 붙습니다. 그래서 가운데 정렬한 제목이 자간의 절반만큼 왼쪽으로 치우칩니다. 제목 블록에 같은 값의 padding-left를 주거나, 글자를 감싼 요소에 margin-right로 같은 값을 빼면 가운데로 돌아옵니다. 확대 투시에서 흐리게 칠한 마지막 빗금이 그 간격입니다.
합자가 풀릴 수 있습니다. 명세는 자간이 0이 아니면 fi 같은 선택 합자를 쓰지 않도록 권합니다. 합자를 꼭 써야 하면 font-feature-settings로 켤 수 있으며, 명세도 이 설정을 우선한다고 적습니다.
아랍 문자처럼 이어 쓰는 글자에는 간격을 넣지 않습니다. 명세는 이어 쓰는 문자의 글자 사이에 자간을 넣지 않도록 정합니다.

자주 틀리는 경우

포토샵 트래킹을 그대로 px로 쓰기: 트래킹 −20은 −20px이 아니라 −0.02em입니다. 16px 글자라면 −0.32px입니다.
피그마 %를 em으로 쓰기: 피그마 −2%를 −2em으로 적으면 글자가 완전히 겹칩니다. 100으로 나눠 −0.02em으로 씁니다.
px로 정한 뒤 글자 크기만 바꾸기: 16px 글자에서 −0.32px이던 값을 32px 제목에 그대로 쓰면 비율은 절반인 −0.01em이 됩니다. 크기가 바뀌는 곳에는 em을 씁니다.
부모의 em 자간이 자식에게 px로 넘어가는 것을 잊기: 큰 제목에 준 em 자간이 안쪽의 작은 글씨에 px로 넘어가 지나치게 넓어지거나, 그 반대가 됩니다.
대문자에 음수 자간 주기: 대문자만 쓴 라벨은 넓히는 쪽에서 시작합니다. 대문자 라벨 예시는 +0.08em입니다.
고정 폭 단추에 글자를 딱 맞추기: 사용자가 자간을 0.12em으로 넓히면 글자가 넘칩니다(WCAG 1.4.12). 단추 폭은 글자에 맞춰 늘어나게 둡니다.
넓은 자간을 준 글자를 가운데 정렬하기: 로고 글자처럼 0.2em을 주면 Chrome에서는 0.1em만큼 왼쪽으로 치우칩니다. 위의 보정 방법을 함께 씁니다.

한계와 주의

견본은 이 기기에 설치된 글꼴로만 그립니다. 목록에서 '이 기기에 없음'으로 표시된 글꼴이나 직접 넣은 이름을 찾지 못하면 대체 글꼴로 보이므로, 실제 사이트의 웹 글꼴과 간격이 다를 수 있습니다.
마지막 글자 뒤 간격이나 소수 px 반올림처럼 브라우저마다 다른 부분이 있습니다. 본문의 측정값은 Chrome 151 기준이며, Safari와 Firefox에서는 직접 재지 않았습니다. 확대 투시는 지금 쓰는 브라우저가 마지막 글자 뒤에 간격을 붙이는지 재서 알려 줍니다.
피그마 문서는 Letter spacing의 단위가 %와 px라고만 적고 %의 기준을 밝히지 않습니다. 이 도구는 %를 글자 크기에 대한 백분율로 계산하므로, 피그마에서 단위를 px로 바꿔 나오는 값과 이 도구의 px 칸을 한 번 대조해 보시기 바랍니다.
한글(HWP)의 자간 %는 기준이 문서에 없어 환산하지 않습니다. 언어별 자간과 장평을 함께 쓰는 한글 문서는 화면으로 견주어 맞춥니다.
사진 저장은 견본을 캔버스에 다시 그린 것이라 줄이 바뀌는 위치가 화면과 다를 수 있습니다. 캔버스 자간(letterSpacing)을 지원하지 않는 브라우저(MDN 기준 Safari 18.4 이전)에서는 글자를 하나씩 그리므로 커닝이 빠집니다.
크기별 기준 그래프의 값은 Apple, Inter, Material 3, KRDS가 각자 쓰는 글꼴을 위해 정한 것입니다. 다른 글꼴에는 출발점으로만 쓰고 견본으로 확인합니다.

기준일 2026년 10월 22일. W3C CSS Text Level 3(Candidate Recommendation Draft 2026-08-14)·Level 4(Editor's Draft 2026-08-14), WCAG 2.2(2024-12-12), MDN browser-compat-data 8.1.6, Apple HIG Typography(2025-12-16 갱신), androidx Material 3 TypeScaleTokens, KRDS 타이포그래피, Chrome 151 실측입니다.

출처

01W3C: CSS Text Module Level 3Candidate Recommendation Draft 2026-08-14. letter-spacing 정의(normal | 길이), 줄 처음·끝에는 넣지 않음, 선택 합자, 이어 쓰는 문자
02W3C: CSS Text Module Level 4Editor's Draft 2026-08-14. letter-spacing에 % 허용, 비율은 사용된 글자 크기 기준
03MDN: letter-spacing호환성 자료 browser-compat-data 8.1.6(2026-10-15): % 값 Chrome 145·Firefox 45·Safari 7, 캔버스 letterSpacing Chrome 99·Firefox 115·Safari 18.4
04W3C WAI: Understanding Success Criterion 1.4.12 Text SpacingAA. 줄 간격 1.5배, 문단 뒤 간격 2배, 자간 0.12배, 단어 간격 0.16배로 바꿔도 내용이 사라지지 않아야 함
05Google Fonts Knowledge: Tracking / letter-spacing대문자는 간격을 넓히는 편이 읽기 좋음, 음수 자간은 큰 제목 크기에서만
06Apple: Human Interface Guidelines, TypographySF Pro 크기별 트래킹 표(6~96pt, 1/1000 em), 2025-12-16 갱신 기록
07Inter: Lab (Dynamic Metrics)트래킹 = −0.0223 + 0.185 × e^(−0.1745 × 글자 크기)
08AndroidX: Material 3 TypeScaleTokensDisplay부터 Label까지 역할 15가지의 크기와 자간(sp)
09KRDS 대한민국 정부 디자인 시스템: 타이포그래피디스플레이와 32px 이상 제목 1px, 그 밖의 제목과 본문 0px
10Adobe: Photoshop 행·문자 간격트래킹과 커닝은 1/1000 em 단위(인디자인·일러스트레이터 도움말도 같음)
11Microsoft: Word에서 텍스트 간의 간격 변경글꼴 대화 상자 고급 탭의 간격 넓게·좁게, 값의 단위는 pt(VBA Font.Spacing 문서)
12Figma Plugin API: LetterSpacing자간 단위는 PIXELS와 PERCENT 두 가지
13한컴오피스 도움말: 자간−50~50%, Alt+Shift+W·N으로 1%씩, 언어별 자간, 빈칸은 영문 자간을 따름
14W3C: 한국어 텍스트 레이아웃 요구사항(KLREQ)§7.3.1 한글·한자·가나는 글자사이 0으로 배열하는 것이 기본
15Android Developers: TextView.setLetterSpacingletter-spacing을 em 단위로 정함
16Apple Developer: NSAttributedString.Key.kern글자 사이를 조정하는 값의 단위는 pt(SwiftUI tracking도 pt)
17Tailwind CSS: letter-spacingtracking-tighter −0.05em부터 tracking-widest 0.1em까지 여섯 단계

자주 묻는 질문

자간 −0.02em은 px로 얼마인가요?

em 값에 글자 크기를 곱하면 px가 됩니다. 16px 글자라면 −0.02 × 16 = −0.32px, 14px라면 −0.28px, 24px라면 −0.48px입니다. em은 글자 크기에 비례하므로 같은 −0.02em이라도 글자가 클수록 줄어드는 길이가 커집니다.

피그마의 자간 값을 CSS로 어떻게 바꾸나요?

피그마에서 Letter spacing을 %로 쓴 값은 100으로 나눠 em으로 씁니다. −2%는 letter-spacing: -0.02em이고, px로 쓴 값은 CSS에도 같은 px로 씁니다. 피그마 문서는 %의 기준을 밝히지 않으므로, 피그마에서 단위를 px로 바꿔 나오는 값과 이 도구의 px 칸을 한 번 대조해 보면 확실합니다.

포토샵 트래킹 값을 CSS로 바꾸려면 어떻게 하나요?

포토샵·일러스트레이터·인디자인의 트래킹은 1/1000 em 단위라 1000으로 나누면 em이 됩니다. 트래킹 −25는 −0.025em이고, 16px 글자에서는 −0.4px입니다. 트래킹 값을 그대로 px로 적으면 글자가 크게 겹치므로 주의합니다.

본문 자간은 얼마가 적당한가요?

정해진 값은 없습니다. W3C의 한국어 조판 요구사항은 한글·한자·가나를 글자사이 0으로 배열하는 것을 기본으로 하고, 정부 디자인 시스템 KRDS도 본문 자간을 0px로 둡니다. 0에서 시작해 비교 사다리로 위아래 값을 견주어 보고, 작은 글씨나 대문자만 쓴 글자는 조금 넓히는 쪽을 먼저 봅니다.

한글 제목은 자간을 좁혀야 하나요?

기준마다 다릅니다. KRDS는 32px 이상 제목과 디스플레이 글자에 1px을 더하고, Material 3은 가장 큰 Display Large에 −0.2sp를 줍니다. Apple SF Pro 표도 24pt부터 76pt까지는 양수이고, 80pt 이상은 0입니다. 쓰려는 글꼴로 견본을 만들고 비교 사다리에서 고르는 편이 정확합니다.

letter-spacing에는 em과 px 중 무엇을 써야 하나요?

글자 크기가 바뀌는 곳에는 em을 씁니다. 반응형 제목처럼 크기가 변해도 같은 비율을 유지합니다. 다만 letter-spacing의 계산값은 px 같은 절대 길이라서, 부모에 준 em 값은 자식에게 px로 넘어갑니다. 크기가 다른 자식에는 em을 다시 적거나, % 단위를 씁니다. % 값은 MDN 호환성 자료 기준 Chrome 145, Firefox 45, Safari 7부터 지원됩니다.

자간을 넓힌 제목이 가운데 정렬에서 한쪽으로 치우쳐 보여요.

명세는 줄 끝에 자간을 넣지 않도록 정하지만, Chrome 151에서는 마지막 글자 뒤에도 간격이 붙어 글자가 자간의 절반만큼 왼쪽으로 치우칩니다. 제목 블록에 자간과 같은 값의 padding-left를 주거나, 글자를 감싼 요소에 margin-right로 같은 값을 빼면 가운데로 돌아옵니다.

웹 접근성 기준에서 자간은 얼마로 맞춰야 하나요?

WCAG 2.2의 1.4.12 글자 간격(AA)은 특정 값을 쓰라는 기준이 아닙니다. 사용자가 자간을 글자 크기의 0.12배, 단어 간격을 0.16배, 줄 간격을 1.5배, 문단 간격을 2배로 바꿔도 내용이나 기능이 사라지지 않아야 한다는 기준입니다. 고정 폭 단추나 한 줄로 자른 제목이 0.12em에서 넘치지 않는지 확인합니다.