PX ↔ REM/EM Converter

Convert px to rem/em with adjustable base font size.

📖 How to Use

1
Set Base Font Size

Default is 16px. Adjust it to match your design system.

2
Enter a Value

Enter a value in PX, REM, or EM and the other two units are calculated automatically.

3
Apply Result

Copy the converted values and use them directly in your CSS or design tool.

💡 Tip: 1rem equals the root element (html) font size. Using rem is recommended for responsive and accessible web design.

About the PX / REM / EM Converter

CSS gives you three ways to express a length. px is an absolute pixel tied to the screen. rem (root em) is relative to the font-size of the root <html> element, and em is relative to the font-size of the nearest parent. A rem value stays consistent across the document, while em compounds as it inherits down through nested elements — both scale with the user's font settings, which fixed px does not. This converter does the arithmetic so you can move a design token from Figma to a stylesheet without re-doing the math.

How it works

The whole conversion hinges on one number: the root element's font-size. Browsers default the <html> element to 16px, so out of the box 1rem = 16px. The formula is simply px / rem = root font-size. To convert pixels to rem you divide by the root; to go the other way you multiply. em uses the same formula but against the parent element's font-size instead of the root's — which is why an em value can resolve to a different pixel count in two parts of the same page.

rem is the recommended unit for accessible scaling. When a user raises their browser's default font size or zooms the page, the root font-size changes, and every rem-based margin, padding, and breakpoint rescales with it. Hard-coded px ignores that preference and locks the layout to the developer's screen. The one exception is hairline borders and device-physical concerns like 1px lines, where you genuinely want a fixed pixel.

Common use cases

  • Converting a Figma pixel value to rem for an accessible stylesheet
  • Checking what a 0.875rem token resolves to at a 16px root
  • Verifying that a 1.25em heading stays proportional inside a card
  • Building a spacing scale (4 / 8 / 16 / 24px) in rem for a design system

Worked example

Convert 24px to rem at the default 16px root:

rem = px / root
     = 24 / 16
     = 1.5rem

Going back the other way confirms the round trip:

px = rem * root = 1.5 * 16 = 24px

If the project instead sets the root to 20px, the same 24px becomes 24 / 20 = 1.2rem — one reason to keep the base field in sync with your design system.

Frequently asked questions

What is the difference between rem and em?

rem is relative to the root element (html) font-size, so one rem is the same length everywhere in the document. em is relative to the current element's own font-size, which compounds when nested. rem gives you a single, predictable scale; em is useful when a value should scale with its surrounding text.

What is the default browser root font size?

Browsers default the html element to 16px, so 1rem equals 16px out of the box. The formula is px / rem = root font-size: 24px at a 16px root is 24 / 16 = 1.5rem.

Why is rem preferred for accessibility?

rem respects the root font-size, which users can change through browser zoom or a custom default font size in settings. Sizing margins, padding, and media-query breakpoints in rem lets the whole layout scale with that choice, unlike hard-coded px which ignores the user preference.

Does the converter change my CSS?

No. It only performs the arithmetic locally in your browser and shows the result. No file is modified and nothing is uploaded.

What base font size should I set?

Use whatever your design system declares as the root font-size — commonly 16px, but frameworks like Tailwind or custom setups may use a different value. Set the base field to match your project so the rem output is correct.

PX / REM / EM 변환기란?

CSS는 길이를 표현하는 세 가지 방법을 제공합니다. px은 물리적 화면에 묶인 절대 픽셀입니다. rem(root em)은 루트 <html> 요소의 font-size를 기준으로 하고, em은 가장 가까운 부모 요소의 font-size를 기준으로 합니다. rem으로 표현한 크기는 문서 전체에서 일관되지만, em은 중첩되며 상속되면서 합성됩니다 — 둘 다 사용자의 글꼴 설정에 따라 늘어나는데, 이는 고정된 px 값은 하지 못하는 일입니다. 이 변환기는 세 단위 간의 산술을 처리해 Figma의 디자인 토큰을 스타일시트로 직접 옮길 수 있게 해 줍니다.

작동 방식

변환 전체는 하나의 숫자에 달려 있습니다. 바로 루트 요소의 font-size입니다. 브라우저는 <html> 요소를 기본적으로 16px로 잡으므로, 별도 설정이 없으면 1rem = 16px입니다. 공식은 단순히 px / rem = 루트 font-size입니다. 픽셀을 rem으로 바꾸려면 루트로 나누고, 반대 방향은 곱합니다. em은 같은 공식을 쓰되 루트가 아니라 부모 요소의 font-size를 기준으로 삼습니다 — 그래서 같은 em 값이 페이지의 위치에 따라 다른 픽셀 수로 풀릴 수 있습니다.

rem이 접근성 스케일링에 권장되는 단위입니다. 사용자가 브라우저 기본 글꼴 크기를 올리거나 페이지를 확대하면 루트 font-size가 바뀌고, rem 기반의 마진·패딩·브레이크포인트가 모두 함께 조정됩니다. 하드코딩된 px은 그 사용자 설정을 무시하고 레이아웃을 개발자의 화면에 고정합니다. 예외는 정말로 고정 픽셀이 필요한 경우, 가령 1px선처럼 얇은 테두리나 기기 물리적 단위가 중요한 곳입니다.

자주 쓰는 경우

  • Figma의 픽셀 값을 접근성을 고려한 rem으로 변환하기
  • 0.875rem 토큰이 16px 루트에서 어떻게 풀리는지 확인하기
  • 카드 안에서 1.25em 제목이 비율을 유지하는지 검증하기
  • 디자인 시스템의 간격 스케일(4 / 8 / 16 / 24px)을 rem으로 만들기

사용 예

기본값 16px 루트에서 24px을 rem으로 변환합니다:

rem = px / root
     = 24 / 16
     = 1.5rem

반대 방향으로 돌리면 왕복이 맞는지 확인할 수 있습니다:

px = rem * root = 1.5 * 16 = 24px

만약 프로젝트가 루트를 20px로 설정했다면 같은 24px은 24 / 20 = 1.2rem이 됩니다 — base 필드를 디자인 시스템과 맞춰야 하는 이유입니다.

자주 묻는 질문

rem과 em의 차이는?

rem은 루트 요소(html)의 font-size를 기준으로 하므로 문서 어디서나 같은 길이입니다. em은 현재 요소 자신의 font-size를 기준으로 하며, 중첩되면 합성됩니다. rem은 하나의 예측 가능한 스케일을 주고, em은 주변 텍스트와 함께 늘어나야 할 값에 적합합니다.

브라우저 기본 루트 글꼴 크기는?

브라우저는 html 요소를 기본적으로 16px로 설정하므로, 별도 설정이 없으면 1rem은 16px입니다. 공식은 px / rem = 루트 font-size이며, 16px 루트에서 24px은 24 / 16 = 1.5rem입니다.

접근성에 rem이 권장되는 이유는?

rem은 루트 font-size를 따르며, 사용자는 브라우저 확대나 설정의 기본 글꼴 크기로 이 값을 바꿀 수 있습니다. 마진, 패딩, 미디어쿼리 브레이크포인트를 rem으로 잡으면 전체 레이아웃이 그 선택에 맞춰 조정됩니다. 하드코딩된 px은 사용자 설정을 무시합니다.

변환기가 제 CSS를 바꾸나요?

아닙니다. 브라우저 안에서 산술만 수행하고 결과를 보여 줄 뿐입니다. 어떤 파일도 수정되지 않고 업로드되는 것도 없습니다.

base 글꼴 크기는 무엇으로 설정해야 하나요?

디자인 시스템이 루트 font-size로 선언한 값을 사용하세요 — 보통 16px이지만, Tailwind 같은 프레임워크나 커스텀 설정은 다른 값을 쓸 수 있습니다. rem 결과가 정확하도록 base 필드를 프로젝트에 맞추세요.