CSS 글꼴 단위 변환기

CSS 글꼴 크기 변환 방법

기존 크기의 숫자를 입력하고 px, em, pt, % 중 단위를 고른 뒤 기준 글꼴 크기를 픽셀로 설정하세요. 글꼴 크기 변환을 누르면 지원하는 네 단위로 같은 계산 크기를 표시해요. 각 행의 복사 버튼으로 1.5em이나 18pt 같은 값을 스타일시트에 바로 붙여 넣을 수 있어요.

기준 입력란은 em과 백분율 변환에 필요해요. 이 페이지가 1em과 100%로 보는 픽셀 크기예요. 부모의 font-size: 20px에 대해 자식의 em이나 % 글꼴 크기를 변환하려면 기준에 20을 넣으세요. 프로젝트의 부모 크기가 다르면 기준을 바꾸고 다시 변환하세요. px와 pt의 관계는 기준이 바뀌어도 같아요.

변환기의 계산 방식

모든 입력을 먼저 픽셀 값으로 바꿔요. px는 그대로 사용하고 em은 기준 크기를 곱해요. 백분율은 기준을 곱하고 100으로 나눠요. 포인트는 CSS 절대 단위 관계를 사용해요. 1in = 96px = 72pt이므로 1pt = 96 ÷ 72px예요. 그런 다음 픽셀 값을 각 대상 단위로 표현해요.

공식은 px = em × 기준, px = % × 기준 ÷ 100, px = pt × 96 ÷ 72예요. 역변환은 같은 계수로 나눠요. 계산은 내부 정밀도를 유지하지만 표시와 복사 값은 0.30000000000000004 같은 부동소수점 잔여값 없이 실용적으로 반올림해요. 0이 아닌 매우 작은 값도 0으로 바꾸지 않고 표시해요.

검산한 변환 예제 두 가지

예제 1: 24를 입력하고 px를 선택한 뒤 기준을 16px로 두세요. 결과는 24px, 1.5em, 18pt, 150%예요. em은 24 ÷ 16, 포인트는 24 × 72 ÷ 96, 백분율은 24 ÷ 16 × 100으로 구해요. 같은 16px 기준에서 1.5em을 변환하면 24px로 돌아와요.

예제 2: 125를 입력하고 %를 선택한 뒤 기준을 20px로 설정하세요. 결과는 25px, 1.25em, 18.75pt, 125%예요. 기준만 16px로 바꾸고 다시 변환하면 같은 125%가 20px, 1.25em, 15pt가 돼요. 상대값을 정확히 변환하려면 글꼴 크기 맥락을 명시해야 하는 이유예요.

활용할 수 있는 경우

픽셀로 받은 디자인을 상대 CSS로 바꾸거나, 부모 글꼴 크기에 맞는 타이포그래피 토큰을 확인하거나, 인쇄용 포인트를 웹 스타일시트용으로 변환할 때 사용하세요. 상속 CSS 검토 시에도 계산된 부모 크기를 기준에 넣으면 em이나 백분율 선언의 실제 크기를 알 수 있어요.

모든 프로젝트가 16px을 쓴다고 가정하지 않고 맥락을 드러내요. 16픽셀은 일반적인 브라우저 시작값이지만 작성자와 사용자가 글꼴 설정을 바꿀 수 있어요. 다른 개발자가 계산을 재현해야 한다면 변환값과 함께 기준도 기록하세요.

한계와 흔한 실수

일반 CSS 해석기가 아닌 글꼴 크기 변환기예요. calc(), clamp(), 변수, 스타일시트, rem, 뷰포트 단위, 컨테이너 단위, 상속된 DOM 스타일을 읽지 않아요. em의 기준은 CSS 속성 정의에 따라 달라지며 이 페이지는 직접 입력한 픽셀 기준을 사용해요. 실제 부모 요소를 검사하지 않아요.

백분율도 속성에 따라 달라져요. 여기서는 %를 글꼴 크기 백분율로만 해석하며 100%는 명시한 기준 크기예요. 다른 포함 블록을 기준으로 하는 너비, 높이, 변환 등 다른 속성에 결과를 사용하지 마세요. 음수 글꼴 크기나 0인 기준은 유효한 변환을 나타낼 수 없어 거절해요.

포인트 변환은 이미지 편집기의 텍스트 픽셀 크기나 프린터 기기 픽셀이 아닌 CSS 단위를 따라요. 글리프의 보이는 높이는 글꼴 메트릭, line-height, 렌더링에도 영향을 받아요. 따라서 계산된 font-size가 같아도 글꼴마다 모양이 같아 보인다고 보장하지 않아요.

복사한 결과 사용

스타일시트 전략에 맞는 단위를 복사한 뒤 실제 컴포넌트와 브라우저 글자 확대 설정에서 시험하세요. 상대 단위는 확장 가능한 글꼴에 도움이 되지만 변환만으로 접근성 명암비, 줄 길이, 줄바꿈, 확대 동작이 보장되지는 않아요. 반올림한 CSS 값을 검토할 수 있도록 원본 값이나 디자인 토큰도 보관하세요.

모든 변환 계산은 이 브라우저에서 실행해요. 계정이 필요하지 않으며 입력값을 분석 매개변수로 보내지 않아요. 클립보드가 차단돼도 결과는 남아 있으므로 보이는 값을 선택해 브라우저나 키보드 명령으로 복사하세요.

지원하는 모든 CSS 글꼴 단위 변환

변환 방향	16px 기준 공식	예시
픽셀 → Em (px → em)	em = px × 0.0625	1px = 0.0625em
픽셀 → 포인트 (px → pt)	pt = px × 0.75	1px = 0.75pt
픽셀 → 백분율 (px → %)	% = px × 6.25	1px = 6.25%
Em → 픽셀 (em → px)	px = em × 16	1em = 16px
Em → 포인트 (em → pt)	pt = em × 12	1em = 12pt
Em → 백분율 (em → %)	% = em × 100	1em = 100%
포인트 → 픽셀 (pt → px)	px ≈ pt × 1.333333333	1pt ≈ 1.333333333px
포인트 → Em (pt → em)	em ≈ pt × 0.08333333333	1pt ≈ 0.08333333333em
포인트 → 백분율 (pt → %)	% ≈ pt × 8.333333333	1pt ≈ 8.333333333%
백분율 → 픽셀 (% → px)	px = % × 0.16	1% = 0.16px
백분율 → Em (% → em)	em = % × 0.01	1% = 0.01em
백분율 → 포인트 (% → pt)	pt ≈ % × 0.12	1% ≈ 0.12pt