px to rem 계산기, 공식으로 검증하기
CSS 코드에서 px로 지정된 값을 rem이나 em, %, pt로 바꿔야 하는데 계산 공식이 헷갈리는 분들을 위한 글입니다. px→rem 변환은 겉보기엔 단순해 보이지만, rem·em·%·pt가 서로 다른 기준값을 두고 계산된다는 점 때문에 결과를 잘못 읽는 경우가 많습니다. 이 글은 각 단위가 실제로 어떤 수식으로 계산되는지, 그리고 계산 결과를 어떻게 해석해야 하는지를 순서대로 설명합니다.
요약 ① rem·em은 값×기준 폰트 크기, %는 값÷100×기준 폰트 크기, pt는 px×72÷96(=px×0.75)으로 계산됩니다. ② rem은 항상 최상위(html) 요소의 폰트 크기를 기준으로 하지만, em은 부모 요소의 폰트 크기를 기준으로 해서 같은 숫자라도 실제 화면에서는 다르게 렌더링될 수 있습니다. ③ 브라우저 기본 루트 폰트는 16px이지만, 사용자가 브라우저 설정에서 글자 크기를 바꾸면 rem·em·%로 지정한 값의 실제 px 결과도 함께 달라집니다.
왜 이 계산이 자주 헷갈리는가
px→rem 변환이 실제로 헷갈리는 상황은 대체로 이렇습니다. 디자인 시안에는 폰트 크기가 24px, 32px처럼 px 단위로 적혀 있는데, 프로젝트의 CSS 코딩 컨벤션은 폰트 크기를 rem 단위로 쓰도록 정해져 있는 경우입니다.
이때 필요한 건 "24px는 몇 rem인가"라는 단순한 질문처럼 보이지만, 답은 프로젝트의 루트(html) 폰트 크기가 얼마로 설정돼 있는지에 따라 달라집니다. 브라우저 기본값은 16px이지만, 일부 프로젝트는 CSS 리셋에서 html의 font-size를 62.5%(즉 10px)로 낮춰 계산을 쉽게 만들기도 합니다.
기준 폰트 크기를 확인하지 않고 "16px 기준"으로 암산하면, 실제 프로젝트의 기준값이 다를 때 결과가 어긋납니다. 그래서 변환은 항상 "어떤 값을 몇 rem으로"가 아니라 "어떤 기준 폰트 크기에서 몇 rem으로"라는 질문이어야 합니다.
도구 없이 직접 계산하는 방법
모든 변환은 px를 매개로 이루어집니다. 입력값을 먼저 px로 바꾼 다음, 그 px 값을 원하는 단위로 다시 환산하는 두 단계입니다.
1단계 — 입력값을 px로 바꿉니다.
- px: 그대로 씁니다.
- rem, em: 값 × 기준 폰트 크기(px)
- %: 값 ÷ 100 × 기준 폰트 크기(px)
- pt: 값 × 96 ÷ 72 (= 값 × 1.3333…)
2단계 — px 값을 원하는 단위로 다시 바꿉니다.
- rem, em: px ÷ 기준 폰트 크기
- %: px ÷ 기준 폰트 크기 × 100
- pt: px × 72 ÷ 96 (= px × 0.75)
pt 계산에 쓰이는 96과 72라는 숫자는 웹 화면의 해상도 기준(1인치 = 96px)과 인쇄용 포인트 기준(1인치 = 72pt)에서 나옵니다. 두 기준을 1인치로 맞추면 1px = 0.75pt라는 고정 비율이 나옵니다.
예를 들어 기준 폰트 크기가 16px일 때 24px를 변환하면 이렇습니다.
- rem = 24 ÷ 16 = 1.5rem
- em = 24 ÷ 16 = 1.5em
- % = 24 ÷ 16 × 100 = 150%
- pt = 24 × 0.75 = 18pt
기준 폰트 크기가 20px로 바뀌면 같은 24px라도 rem·em은 1.2, %는 120%로 달라집니다. 반면 pt는 기준 폰트와 무관하게 항상 18pt로 고정됩니다. px와 pt의 관계는 96:72라는 고정 비율뿐이고, 기준값이 계산에 개입하지 않기 때문입니다.
저희 도구로 확인하기.
값과 기준 폰트 크기만 입력하면 px·rem·em·%·pt 다섯 단위 결과가 즉시 계산됩니다.
헷갈리기 쉬운 지점
계산 자체는 단순하지만, 결과를 해석할 때 자주 놓치는 지점이 있습니다.
rem과 em의 기준이 다른 이유
rem은 최상위 기준, em은 부모 기준입니다. rem은 html 요소 하나의 폰트 크기만 보고 계산됩니다. 문서 안 어디에 있든 같은 rem 값은 항상 같은 px로 계산됩니다.
반면 em은 해당 요소의 부모 요소 폰트 크기를 기준으로 계산되므로, 똑같이 "1.5em"이라고 적어도 부모의 폰트 크기가 다르면 실제로 렌더링되는 px가 달라집니다.
이 도구는 기준 폰트 크기를 하나만 입력받아 rem과 em 계산에 똑같이 사용합니다. 그래서 도구 안에서는 rem과 em의 결과값이 항상 같게 나옵니다. 실제 페이지에서 em이 다른 값으로 렌더링된다면 계산이 틀린 게 아니라, 그 요소의 부모 폰트 크기가 여기서 입력한 기준값과 다르기 때문입니다.
브라우저 글자 크기 설정에 따라 달라지는 값
기준 폰트 16px은 브라우저 기본값이지 고정값이 아닙니다. 대부분의 브라우저는 사용자가 따로 설정하지 않는 한 루트 폰트 크기를 16px로 둡니다. 그런데 이 값은 사용자가 브라우저 설정(글자 크기 확대·축소, 접근성 설정)에서 바꿀 수 있는 값입니다.
사용자가 루트 폰트 크기를 18px로 키워뒀다면, CSS에 "1.5rem"이라고 적어둔 요소는 24px가 아니라 27px로 렌더링됩니다.
px로 고정한 값은 이 설정과 무관하게 항상 그대로지만, rem·em·%로 지정한 값은 사용자 설정에 따라 실제 px 결과가 달라질 수 있습니다.
| 단위 | 계산 기준 | 문서 안에서 값이 고정되는가 |
|---|---|---|
| px | 없음(고정값) | 항상 고정 |
| rem | 루트(html) 요소의 폰트 크기 | 위치와 무관하게 고정 |
| em | 부모 요소의 폰트 크기 | 중첩 위치에 따라 달라짐 |
| % | 지정한 기준값(주로 부모) | 위치에 따라 달라짐 |
| pt | px와의 고정 비율(96:72) | 항상 고정 |
정리
- rem·em은 값×기준 폰트 크기, %는 값÷100×기준 폰트 크기로 먼저 px를 구하고, 거기서 다시 원하는 단위로 환산합니다.
- pt와 px는 96:72라는 고정 비율(1px = 0.75pt)로 변환되며, 기준 폰트 크기와는 무관합니다.
- rem은 항상 루트(html) 요소 기준이라 값이 고정되지만, em은 부모 요소 기준이라 같은 숫자도 위치에 따라 실제 px가 달라질 수 있습니다.
- 브라우저 기본 루트 폰트는 16px이지만, 사용자가 이 값을 바꾸면 rem·em·%로 지정한 값의 실제 렌더링 결과도 함께 바뀝니다.
- 계산 결과는 입력한 기준 폰트 크기를 부모/루트로 가정한 값이므로, 실제 페이지의 상속 구조와 다르면 참고용으로만 해석해야 합니다.
값과 기준 폰트 크기만 입력하면 px·rem·em·%·pt 다섯 단위 결과가 즉시 계산됩니다.
자주 묻는 질문
rem과 em은 계산 결과가 왜 같게 나오나요?
이 도구가 기준 폰트 크기를 하나만 입력받아 rem과 em 모두 그 값을 기준으로 계산하기 때문입니다. 실제 CSS에서는 rem이 루트 요소, em이 부모 요소를 기준으로 하므로 두 값이 다를 수 있습니다. 도구의 기준 폰트 크기를 해당 요소의 실제 부모(또는 루트) 폰트 크기로 맞춰 입력하면 실제 값과 일치합니다.
pt는 어떻게 px로 변환되나요?
웹 표준에서 1인치는 96px이자 72pt로 정의돼 있어, 1px = 0.75pt라는 고정 비율이 나옵니다. px를 pt로 바꿀 때는 px×72÷96을 계산하고, pt를 px로 바꿀 때는 pt×96÷72를 계산합니다. 이 비율은 기준 폰트 크기와 관계없이 항상 동일합니다.
계산 결과가 실제 화면과 다르게 보일 수 있나요?
네, 있습니다. em과 %는 실제로 해당 요소의 부모 폰트 크기에 따라 계산되는데, 이 도구는 입력한 기준값을 부모로 가정해 계산합니다. 실제 페이지에 적용해보면 그 요소의 부모 폰트 크기가 도구에 입력한 값과 다를 경우 결과가 달라질 수 있습니다.
브라우저 글자 크기 설정이 계산 결과에 영향을 주나요?
도구가 보여주는 rem·em·%·pt 수치 자체는 입력한 기준 폰트 크기를 바탕으로 한 비율 계산이라 그대로입니다. 다만 실제 브라우저에서 사용자가 글자 크기 설정을 바꾸면 루트 폰트 크기 자체가 달라지므로, 같은 rem·em·% 값이라도 실제로 렌더링되는 px 결과는 사용자마다 달라질 수 있습니다.