타이포그래피 단위 변환기이란?
타이포그래피 단위 변환기는 픽셀(px), em, rem, 포인트(pt), 퍼센트(%), 뷰포트 단위(vw, vh)를 서로 변환합니다. 기본 글꼴 크기와 뷰포트 크기를 설정하고 아무 필드에 값을 입력하면 나머지 단위가 전부 즉시 업데이트됩니다.
변환은 CSS 표준을 따릅니다. 1pt = 96/72 px, em과 rem은 기준 폰트 크기의 배수, 퍼센트는 기준을 100%로 보며, vw와 vh는 뷰포트 너비와 높이의 비율입니다. 어느 한 필드 값을 바꾸면 나머지 여섯 필드가 실시간으로 다시 계산됩니다. 기준 폰트 크기는 기본 16px(흔히 쓰이는 root 값)이고, 디자인 시스템이 14, 18 같은 root를 쓴다면 그에 맞게 바꿀 수 있으며, 뷰포트 기본값은 1920×1080이라 vw와 vh도 정확하게 유지됩니다.
사용 방법
- 1단계 — 기본 글꼴 크기를 픽셀 단위로 설정합니다(기본값 16px). 이 값이 em, rem, % 같은 상대 단위의 계산 기준이 됩니다.
- 2단계 — 일곱 가지 단위 필드(px, em, rem, pt, %, vw, vh) 중 하나에 숫자 값을 입력하면 나머지 모든 단위가 즉시 업데이트됩니다.
- 3단계 — 변환된 값을 복사하여 CSS, 디자인 사양 또는 인쇄 레이아웃에 사용합니다.
사용 시기
- 인쇄 디자이너가 준 pt 스펙을 스타일시트가 실제로 적용하는 CSS 픽셀 값으로 변환할 때.
- 디자인 시스템 점검: 선택한 root에서 1.25rem 헤딩이 정말 의도한 20px이 되는지 확인할 때.
- 이미 상속된 폰트 크기를 바꾸고 있는 부모 안에서 적절한 em이나 % 값을 고를 때.
결과
디자이너가 포인트 단위로 사양을 전달합니다(본문 14pt). 16px 기준으로 pt 필드에 14를 입력하면 18.67px, 1.167em, 1.167rem, 116.7%에 해당하는 것을 즉시 확인할 수 있어 스타일시트에 바로 사용할 수 있습니다.
자주 묻는 질문
- 왜 1pt가 1px이 아니라 1.333px로 변환되나요?
- CSS는 1pt를 1/72인치, 1in을 96px로 정의하므로 1pt = 96/72 = 1.333px입니다. 모든 브라우저가 같은 식을 씁니다. pt로 잡은 인쇄 크기가 화면에서는 숫자보다 크게 보이는 것은 이 4/3 계수 때문입니다.
- em과 rem은 어떻게 다른가요?
- rem은 항상 루트(<html> 요소)의 폰트 크기를 기준으로 합니다. em은 가장 가까운 부모 요소의 폰트 크기를 기준으로 합니다. 그래서 20px 부모 안의 2em은 40px이지만, 2rem은 부모와 무관하게 늘 2 × root입니다.
- 기준 폰트 크기 설정은 변환에 어떻게 영향을 주나요?
- 1rem과 1em이 몇 px인지가 달라집니다. 기본 16px는 대부분의 브라우저와 같아서 1rem = 16px이고요. root가 18px이면 1rem = 18px, 1.25rem 헤딩은 20px이 아니라 22.5px이 됩니다. pt는 절대 단위라 영향을 받지 않습니다.
- 스타일시트에서 px, rem, em 중 무엇을 써야 하나요?
- 폰트 크기는 rem(사용자가 브라우저 확대나 접근성 설정으로 조정 가능), 정확도가 중요한 테두리·작은 간격은 px, 버튼 안쪽 padding처럼 현재 요소 폰트 크기에 비례해야 하는 간격은 em이 적절합니다.
- px가 base와 같은데 왜 퍼센트가 100%가 아닌가요?
- 실제로는 100%가 됩니다. base가 16일 때 px에 16을 넣으면 %는 100을 보여 줍니다. 다른 값이 보인다면, 다른 필드의 반올림으로 px가 base와 정확히 일치하지 않거나, px를 입력한 뒤에 base를 다시 바꾼 경우입니다.