6XC

자간 변환기 (트래킹 → CSS)

포토샵/일러스트레이터의 트래킹 값이나 Figma의 % 자간을 CSS em·px 값으로 변환합니다.

조회수 826회

세 가지 도구, 세 가지 단위

Adobe 앱은 트래킹을 em의 1000분의 1 단위로 측정합니다. CSS em = 트래킹 ÷ 1000, 즉 트래킹 50 → letter-spacing: 0.05em. Figma의 퍼센트는 단순히 em × 100입니다. 5% = 0.05em. px 값은 폰트 크기에도 좌우됩니다. 16px에서 0.05em = 0.8px. 디자인 파일에 표시된 값을 입력하면 나머지 값이 자동으로 업데이트됩니다.

CSS에서는 em 값을 사용하는 것이 좋습니다 — 폰트 크기에 맞춰 확장되므로 제목과 캡션이 하나의 규칙으로 비례하는 자간을 유지할 수 있습니다. 일반적인 범위: 큰 디스플레이 제목은 트래킹 −10~−30, 작은 대문자 라벨은 +50~+200.

자주 묻는 질문

Figma에서 자간이 px로 표시되어 있으면 어떻게 하나요?

그렇다면 이미 CSS px 값입니다. 폰트 크기를 설정한 뒤 px 필드에 입력하고, 확장 가능한 CSS를 위해 em 환산값을 확인하세요.

대문자 텍스트에 왜 양수 트래킹이 필요한가요?

대문자는 원래 소문자와 나란히 놓이도록 설계되어, 단독으로 붙여 놓으면 답답해 보입니다. 모두 대문자인 라벨에는 +5%~+15%(트래킹 50-150)가 고전적인 해결책입니다.

비슷한 도구

환율 계산기 (ECB 실시간 환율) USD, EUR, GBP, TRY 등 30개 이상의 통화를 유럽중앙은행의 일일 기준 환율로 환산합니다. 무료, 가입 불필요. 계산하기 파운드 - 킬로그램 변환기 파운드를 킬로그램으로, 킬로그램을 파운드로 즉시 변환합니다 — 두 칸 중 아무 곳에나 입력하세요. 1 lb = 0.4536 kg. 변환하기 피트·인치 - 센티미터 변환기 피트와 인치를 센티미터로, 센티미터를 피트·인치로 즉시 변환 — 5'9"는 몇 cm인지 같은 신장 환산도 바로 확인. 변환하기 화씨 섭씨 변환기 화씨(°F)를 섭씨(°C)로, 섭씨를 화씨로 즉시 변환 — 날씨, 오븐, 체온까지 참고 기준점과 함께. 변환하기