PX ↔ REM / EM 변환기: 반응형 웹 단위 계산법·CSS 실전 가이드

Last Updated on 2026/08/09 by Tomylove

📐 PX ↔ REM / EM 변환기와 반응형 CSS 단위 실전 가이드

웹 디자인 시안에서 받은 PX 값을 REM이나 EM으로 바꿀 때 숫자만 변환해서는 충분하지 않습니다.
REM과 EM은 서로 기준점이 다르기 때문에 어떤 글꼴 크기를 기준으로 계산하는지 먼저 알아야 실제 CSS에서도 원하는 크기가 나옵니다.

이 페이지에서는 REM의 Root Font-size와 EM의 Context Font-size를 서로 독립적으로 설정하여
PX·REM·EM을 실시간으로 교차 변환할 수 있습니다. 계산 결과 확인뿐 아니라 CSS 코드 복사,
타이포그래피 미리보기, 자주 쓰는 값의 환산표까지 함께 제공합니다.

핵심만 먼저:
Root가 16px이면 16px = 1rem입니다.
하지만 1em은 항상 16px이 아닙니다.
EM이 계산되는 글꼴 문맥이 20px이라면 20px = 1em이 됩니다.

스마트 반응형 웹 PX ↔ REM / EM 계산기

아래 계산기는 일반적인 PX → REM 계산기와 달리 REM Root와 EM Context를 별도로 입력할 수 있도록 설계했습니다. 예를 들어 HTML 루트는 16px이지만 특정 카드나 버튼의 글꼴 문맥이 20px이라면, 두 기준을 각각 16px과 20px으로 입력하면 됩니다.

정밀 계산 모드:
REM은 HTML Root Font-size, EM은 EM Context Font-size를 각각 별도로 계산합니다. 예를 들어 Root가 16px이고 EM 기준 문맥이 20px이면 20px = 1.25rem = 1em입니다.

1. REM / EM 기준 폰트 크기 설정

두 기준값은 서로 독립적입니다. 실제 프로젝트의 CSS 문맥에 맞게 설정하세요.

REM 기준
Root Font-size

HTML 루트 요소(html)의 계산된 글꼴 크기

REM 루트 폰트 크기

px

EM 기준
Context Font-size

EM을 적용할 요소의 기준 글꼴 문맥 크기

EM 기준 폰트 크기

px

2. 변환할 단위 입력 — 마지막으로 수정한 값을 기준으로 다시 계산합니다.

PX CSS 픽셀

REM Root 상대 단위

rem

EM Context 상대 단위

현재 기준: REM 루트 16px · EM 문맥 16px · 마지막 입력 PX

🔍 실시간 타이포그래피 미리보기 16px = 1rem = 1em

반응형 웹 타이포그래피 미리보기

💻 바로 쓰는 CSS 코드

REM 코드

font-size: 1rem; /* 16px · root 16px */

EM 코드

font-size: 1em; /* 16px · EM context 16px */

📊 주요 PX 수치별 독립 환산표

REM Root: 16px · EM Context: 16px

PX	REM	EM	활용 예시

💡 입력값을 클릭하면 기존 숫자가 전체 선택되어 빠르게 교체할 수 있습니다.

PX, REM, EM은 무엇이 다른가?

단위 변환에서 가장 중요한 것은 숫자가 아니라 기준점입니다. 같은 1이라는 숫자라도 1px, 1rem, 1em은 서로 다른 방식으로 계산됩니다.

1. PX: CSS가 사용하는 픽셀 단위

PX는 크기를 직접 지정하기 쉬워 디자인 시안과 CSS를 비교할 때 매우 직관적입니다. 다만 CSS의 px는 고해상도 디스플레이의 물리적 픽셀 하나와 언제나 1:1로 대응한다고 이해하면 안 됩니다. 브라우저가 레이아웃과 렌더링에 사용하는 CSS 픽셀 개념으로 보는 것이 더 정확합니다.

2. REM: HTML 루트 요소를 기준으로 계산

rem은 root em에서 나온 단위입니다. 일반적인 HTML 문서에서는 최상위 <html> 요소의 계산된 font-size가 기준입니다.

예를 들어 Root Font-size가 16px이면 1rem = 16px, 1.5rem = 24px, 2rem = 32px입니다.

3. EM: 현재 요소가 놓인 글꼴 문맥을 기준으로 계산

EM은 REM보다 문맥 의존성이 큽니다. 특히 font-size 속성에 EM을 사용하면 일반적으로 부모로부터 전달된 글꼴 크기를 기준으로 계산합니다.

반면 padding:1em, margin:1em, border-radius:.5em처럼 다른 속성에 사용하는 EM은 해당 요소의 계산된 글꼴 크기에 비례하여 적용됩니다. 이 특성 때문에 버튼이나 배지처럼 글자가 커지면 내부 여백도 함께 커져야 하는 UI에 유용합니다.

CSS PX REM EM 단위의 기준 차이와 HTML Root 및 요소 글꼴 문맥 구조 — ▲ REM은 HTML Root Font-size를 기준으로 하고, EM은 적용되는 요소의 글꼴 문맥을 기준으로 계산됩니다.

PX → REM / REM → PX / EM 변환 공식

REM과 EM의 계산 방식은 어렵지 않습니다. 다만 REM과 EM이 서로 다른 분모를 사용한다는 점을 기억해야 합니다.

기본 계산 공식

PX → REM: REM = PX ÷ Root Font-size
REM → PX: PX = REM × Root Font-size
PX → EM: EM = PX ÷ EM Context Font-size
EM → PX: PX = EM × EM Context Font-size

예제 1. Root가 16px일 때 24px을 REM으로 변환

24 ÷ 16 = 1.5이므로 24px = 1.5rem입니다.

예제 2. Root가 20px일 때 24px을 REM으로 변환

24 ÷ 20 = 1.2이므로 24px = 1.2rem입니다. 같은 24px이라도 Root Font-size가 달라지면 REM 값도 달라집니다.

예제 3. EM Context가 20px일 때 24px을 EM으로 변환

24 ÷ 20 = 1.2이므로 24px = 1.2em입니다.

REM과 EM이 실제로 달라지는 예

Root가 16px이고 EM Context가 20px이라고 가정해 보겠습니다. 이때 20px은 다음과 같이 계산됩니다.

20px ÷ 16px = 1.25rem
20px ÷ 20px = 1em

따라서 20px = 1.25rem = 1em입니다. 바로 이 차이 때문에 EM 계산기에는 Root와 별도의 Context 기준값이 필요합니다.

PX vs REM vs EM: 어떤 단위를 어디에 쓰면 좋은가?

세 단위 중 하나가 무조건 더 좋은 것은 아닙니다. 실무에서는 각 값이 어떤 역할을 하는지에 따라 단위를 조합하는 편이 관리하기 좋습니다.

단위	주요 기준	특징	실무 활용 예	주의점
PX	CSS 픽셀	수치가 직관적이고 미세한 시각 조정이 쉽습니다.	테두리, 그림자, 이미지 기준값, 미세 보정	사용자 글꼴 설정과 함께 비례해야 하는 디자인에서는 상대 단위보다 덜 유연할 수 있습니다.
REM	`html` Root Font-size	페이지 전체의 크기 체계를 일관성 있게 만들기 쉽습니다.	본문·제목 폰트, 섹션 간격, 패딩, 마진, 디자인 토큰	Root 값을 변경하면 REM 기반 요소 전체가 함께 영향을 받습니다.
EM	현재 글꼴 문맥	컴포넌트 내부 요소를 글자 크기에 비례해 확장하기 좋습니다.	버튼 패딩, 배지, 아이콘 간격, 컴포넌트 내부 여백	중첩된 `font-size:em`은 값이 누적될 수 있으므로 문맥을 확인해야 합니다.

실무에서 가장 중요하게 보는 기준: “PX를 없애는 것”이 목적이 아니라 사용자 설정이나 컴포넌트 크기와 함께 변해야 하는 값에는 상대 단위를 쓰고, 미세한 시각 경계에는 필요에 따라 PX를 사용하는 것입니다.

웹 접근성 때문에 PX를 쓰면 안 된다는 말은 맞을까?

PX를 사용했다고 해서 그 자체로 바로 웹 접근성 지침을 위반한다고 단정하는 것은 정확하지 않습니다. 중요한 것은 사용자가 글자를 확대했을 때도 내용을 읽고 기능을 사용할 수 있는가입니다.

브라우저의 페이지 확대 기능은 PX로 지정한 텍스트도 시각적으로 확대할 수 있습니다. 다만 사용자가 기본 글꼴 크기를 변경하는 환경과 다양한 사용자 설정까지 폭넓게 고려하려면 REM·EM·퍼센트처럼 글꼴 기준에 반응하는 상대 단위가 유연한 경우가 많습니다.

실제 접근성 검토에서는 다음을 확인합니다

글자를 크게 확대했을 때 텍스트가 잘리거나 겹치지 않는가?
버튼과 메뉴가 화면 밖으로 밀려 사용할 수 없게 되지 않는가?
줄 간격이나 문단 간격이 커져도 내용과 기능이 유지되는가?
좁은 화면에서 텍스트를 읽기 위해 불필요한 가로 스크롤이 발생하지 않는가?
텍스트 확대 후에도 입력창, 링크, 버튼 등을 정상적으로 조작할 수 있는가?

REM EM 상대 단위를 활용한 반응형 웹 타이포그래피와 웹 접근성 확대 테스트 예시 — ▲ 웹 접근성에서는 특정 CSS 단위 하나를 고집하기보다 글자 확대와 사용자 설정 변경 후에도 콘텐츠와 기능을 정상적으로 이용할 수 있는지 확인하는 것이 중요합니다.

16px 기준 PX ↔ REM 빠른 변환표

사이트의 Root Font-size가 16px이라면 아래 값이 자주 사용됩니다. 단, 실제 사이트에서 html의 계산된 글꼴 크기가 다른 경우에는 위 계산기의 Root 값을 먼저 변경해야 합니다.

PX	REM	PX	REM
8px	0.5rem	20px	1.25rem
10px	0.625rem	24px	1.5rem
12px	0.75rem	28px	1.75rem
14px	0.875rem	32px	2rem
16px	1rem	40px	2.5rem
18px	1.125rem	48px	3rem

62.5% 방식: 1rem을 10px처럼 계산하는 방법

프론트엔드 작업에서 종종 볼 수 있는 것이 html { font-size:62.5%; } 방식입니다.

브라우저 기본 글꼴 크기가 16px인 환경이라면 16px의 62.5%는 10px이므로 계산상 1rem ≈ 10px 체계를 만들 수 있습니다.

html {
  font-size: 62.5%;
}

body {
  font-size: 1.6rem;
}

62.5% 방식을 사용하는 이유

가장 큰 장점은 계산 편의성입니다. 10px을 1rem으로 생각할 수 있으므로 디자인 시안의 PX 값을 REM으로 옮길 때 직관적입니다.

10px → 1rem
14px → 1.4rem
16px → 1.6rem
24px → 2.4rem
32px → 3.2rem

하지만 무조건 적용해야 하는 방법은 아니다

16px = 1rem 체계를 사용하는 프로젝트도 많습니다. 62.5% 방식은 CSS 표준의 우열 문제가 아니라 프로젝트에서 어떤 계산 체계를 선택할 것인가의 문제에 가깝습니다.

워드프레스 웹사이트 적용 시 주의: 운영 중인 사이트에서 갑자기 html { font-size:62.5%; }를 적용하면 워드프레스 테마나 플러그인이 사용하고 있는 REM 기반 크기도 함께 영향을 받을 수 있습니다. 기존 사이트라면 개발자 도구와 테스트 환경에서 영향 범위를 먼저 확인하는 것이 좋습니다.

실무에서는 PX, REM, EM을 이렇게 조합합니다

실무용 CSS를 정리할 때는 모든 값을 한 단위로 통일하기보다 전체 스케일은 REM, 컴포넌트 내부 비율은 EM, 미세한 경계는 필요에 따라 PX처럼 역할을 나누는 편이 관리하기 좋았습니다.

:root {
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
}

body {
  font-size: 1rem;
  line-height: 1.7;
}

.article-card {
  padding: var(--space-3);
  margin-bottom: var(--space-4);
  border: 1px solid #dbe2ea;
  border-radius: 0.75rem;
}

.button {
  font-size: 1rem;
  padding: 0.75em 1.25em;
  border-radius: 0.5em;
}

.section-title {
  font-size: clamp(1.75rem, 1.3rem + 1.8vw, 3rem);
}

이 코드에서는 전체 페이지의 간격 체계를 REM으로 관리하고, 버튼의 내부 패딩과 모서리는 EM으로 만들어 글자 크기가 변경될 때 함께 비례하도록 했습니다. 또한 제목은 clamp()를 이용해 최소 크기와 최대 크기 사이에서 뷰포트에 따라 유연하게 변화하도록 구성할 수 있습니다.

디자인 시안의 PX를 실제 CSS로 옮기는 순서

1단계. 실제 Root Font-size를 먼저 확인

Figma에서 24px이라고 표시되어 있다고 무조건 1.5rem으로 바꾸면 안 됩니다. 1.5rem이 되려면 Root가 16px이라는 조건이 필요합니다. 브라우저 개발자 도구에서 html 요소를 선택한 뒤 Computed 영역에서 실제 font-size를 확인하면 됩니다.

2단계. REM인지 EM인지 먼저 결정

사이트 전체에 동일한 크기 체계를 적용해야 하는 제목, 본문, 섹션 간격이라면 REM이 관리하기 편합니다. 반면 버튼이나 배지처럼 컴포넌트의 글자 크기에 맞춰 내부 여백도 함께 변해야 한다면 EM을 고려할 수 있습니다.

3단계. 계산기의 기준값을 실제 CSS와 맞춘다

REM을 계산한다면 Root Font-size를 입력합니다. EM을 계산한다면 해당 컴포넌트가 실제로 사용하는 글꼴 문맥의 px 크기를 EM Context에 입력합니다.

4단계. PX·REM·EM 중 하나만 입력한다

위 계산기는 어느 단위를 입력하든 나머지 두 값이 자동 계산됩니다. 예를 들어 Root 16px, EM Context 20px 환경에서 24px을 입력하면 1.5rem과 1.2em을 동시에 확인할 수 있습니다.

5단계. CSS 복사 후 실제 화면에서 테스트

숫자가 수학적으로 맞아도 UI가 반드시 좋은 것은 아닙니다. 모바일 화면, 브라우저 확대, 긴 텍스트, 사용자 글꼴 설정 등 실제 조건에서도 확인해야 합니다.

PX·REM·EM 변환에서 자주 하는 실수

1. 1rem은 언제나 16px이라고 생각한다

1rem의 px 값은 Root Font-size에 따라 달라집니다. Root가 18px이면 1rem은 18px입니다.

2. 1em은 언제나 16px이라고 생각한다

EM은 현재 글꼴 문맥에 따라 달라집니다. EM Context가 20px이면 1em은 20px입니다.

3. REM과 EM을 같은 공식으로 계산한다

Root와 EM Context가 동일한 상황에서는 결과가 같아 보일 수 있지만, 두 기준이 달라지는 순간 REM과 EM의 값도 달라집니다.

4. PX를 사용하면 무조건 접근성이 나쁘다고 생각한다

단위 자체보다 실제 확대 환경에서 콘텐츠와 기능을 사용할 수 있는지가 중요합니다.

5. 모든 값을 REM으로 바꾼다

1px 테두리처럼 PX가 단순하고 목적에 잘 맞는 곳도 있습니다. 상대 단위는 목적에 따라 선택해야 합니다.

6. EM 중첩을 계산하지 않는다

여러 단계의 부모·자식 요소에서 font-size:1.2em을 반복하면 값이 누적될 수 있습니다.

7. 운영 중인 사이트에 62.5%를 바로 적용한다

테마와 플러그인이 이미 REM을 사용하고 있다면 전체 크기가 변할 수 있습니다. 테스트 환경에서 먼저 확인해야 합니다.

8. 계산 결과만 보고 실제 화면을 테스트하지 않는다

브라우저 확대, 모바일, 긴 한글·영문 문자열, 버튼 줄바꿈 등도 반드시 확인해야 합니다.

워드프레스(WordPress) 사이트에 적용할 때 체크할 것

워드프레스에서 PX·REM·EM 체계를 변경하려면 CSS만 보는 것보다 테마와 플러그인이 어떤 방식으로 크기를 지정하고 있는지 함께 확인하는 것이 좋습니다.

테마 타이포그래피 설정: 본문, 제목, 메뉴 폰트 크기를 별도로 지정했는지 확인합니다.
추가 CSS: html { font-size:... } 선언이 이미 있는지 검색합니다.
플러그인 CSS: 목차, 폼, 팝업, 버튼 플러그인이 자체적으로 REM이나 EM을 사용하는지 확인합니다.
브라우저 개발자 도구: 지정값이 아니라 최종 계산된 font-size를 확인합니다.
캐시: JS나 CSS 수정 뒤 워드프레스 캐시 플러그인과 CDN 캐시가 있다면 함께 갱신합니다.

참고: REM을 사용한다고 Core Web Vitals 점수가 자동으로 좋아지는 것은 아닙니다. 단위 선택은 주로 반응형 설계, 사용자 설정 대응, 디자인 시스템의 일관성과 유지보수에 관한 문제입니다.

FAQ: PX, REM, EM 변환에서 자주 묻는 질문

16px은 몇 rem인가요?

Root Font-size가 16px이라면 16px = 1rem입니다. Root가 20px이면 16px은 0.8rem입니다.

10px은 몇 rem인가요?

Root가 16px이라면 10 ÷ 16 = 0.625rem입니다. Root가 10px이라면 10px = 1rem입니다.

24px은 몇 rem인가요?

Root가 16px이라면 24 ÷ 16 = 1.5rem입니다.

24px은 몇 em인가요?

EM Context에 따라 달라집니다. Context가 16px이면 1.5em, 20px이면 1.2em, 24px이면 1em입니다.

REM과 EM 중 어느 것이 더 좋은가요?

둘 중 하나가 항상 더 좋은 것은 아닙니다. 전체 사이트의 일관된 스케일에는 REM이 편하고, 버튼처럼 글자 크기에 따라 내부 여백도 비례해야 하는 컴포넌트에서는 EM이 유용합니다.

PX는 이제 사용하면 안 되나요?

아닙니다. 테두리, 그림자, 특정 미세 보정처럼 PX가 목적에 잘 맞는 곳도 있습니다. 중요한 것은 값이 어떤 역할을 하는지에 따라 단위를 선택하는 것입니다.

왜 같은 1em인데 요소마다 실제 크기가 다르나요?

EM의 기준이 현재 요소의 글꼴 문맥에 따라 달라질 수 있기 때문입니다. 그래서 EM을 정확히 PX로 환산하려면 Context Font-size를 먼저 알아야 합니다.

62.5% 방식은 꼭 사용해야 하나요?

아닙니다. 1rem을 약 10px처럼 계산하기 쉽도록 만든 프로젝트 설계 방식 중 하나입니다. 16px = 1rem 체계를 그대로 사용해도 문제가 없습니다.

REM을 미디어 쿼리 중단점에도 사용해도 되나요?

프로젝트의 설계 원칙에 따라 사용할 수 있습니다. 다만 폰트 크기, 레이아웃 크기, 브라우저 확대가 서로 어떤 영향을 주는지 실제 환경에서 확인하면서 중단점을 정하는 것이 좋습니다.

좋은 단위 변환기는 숫자보다 기준을 설명해야 합니다

제가 PX·REM·EM 변환기를 만들면서 가장 중요하게 본 부분은 단순히 16px = 1rem이라고 보여주는 것에서 끝내지 않는 것이었습니다.

실제 개발에서는 Root가 16px이 아닐 수도 있고, EM이 사용되는 컴포넌트는 18px이나 20px의 폰트 문맥을 가질 수도 있습니다. 그런 상황에서 REM과 EM을 같은 값으로 보여주는 계산기는 실제 CSS 결과와 맞지 않을 수 있습니다.

그래서 이 계산기에서는 REM Root와 EM Context를 별도로 입력하고, 현재 계산 조건까지 URL에 저장하여 다른 사람에게 동일한 결과를 공유할 수 있도록 구성했습니다.

실무 핵심 정리

PX → REM을 계산할 때는 Root Font-size를 확인하고, PX → EM을 계산할 때는 실제 EM Context Font-size를 확인하세요. 숫자를 변환한 뒤에는 브라우저 확대와 모바일 화면에서도 반드시 테스트하는 것이 좋습니다.

공식 문서와 함께 확인하기

CSS 단위와 접근성처럼 기준이 중요한 내용은 개인 블로그의 설명만으로 판단하기보다 공식 문서도 함께 확인하는 것을 권합니다.

마무리: PX를 REM으로 바꾸는 것보다 중요한 것

PX, REM, EM은 서로 경쟁하는 단위가 아닙니다. 각각 잘 맞는 역할이 있습니다.

REM은 사이트 전체의 일관된 스케일을 만들기 좋고, EM은 컴포넌트 내부를 글자 크기에 비례해 설계하기 좋으며, PX는 미세한 시각적 경계를 지정할 때 여전히 유용합니다.

따라서 좋은 반응형 CSS를 만드는 방법은 “모든 PX를 REM으로 바꾸는 것”이 아니라 어떤 값이 무엇을 기준으로 함께 변해야 하는지 이해하고 적절한 단위를 선택하는 것입니다.

위 PX ↔ REM / EM 계산기는 반복되는 숫자 계산을 줄이는 동시에 REM과 EM의 서로 다른 기준을 실제 값으로 확인하는 용도로 활용해 보세요.