px ↔ rem 변환기 사용 방법
변환 방향, 기준 폰트 크기와 숫자 값을 입력합니다.
결과에서 확인할 내용
px 또는 rem 환산값과 적용한 계산식을 함께 확인할 수 있습니다.
이 도구가 필요한 상황
디자인 시안의 px 값을 사용자의 글꼴 크기 설정에 따라 변하는 rem 값으로 옮길 때 기준 크기를 함께 확인할 수 있습니다.
실제 사용 예시
루트 글꼴이 16px이면 24px은 1.5rem입니다. 사이트에서 html의 font-size가 20px이라면 같은 24px은 1.2rem이므로 기본값 16을 그대로 쓰지 마세요.
결과를 정확히 읽는 방법
- px → rem은 픽셀값을 루트 글꼴 크기로 나눕니다.
- rem → px은 rem값에 루트 글꼴 크기를 곱합니다.
- 브라우저 확대와 사용자 글꼴 설정을 확인하려면 실제 화면에서도 검수해야 합니다.
계산 방식
rem은 루트(html) 요소의 글꼴 크기를 기준으로 하는 상대 단위입니다. px를 rem으로 바꿀 때는 “px ÷ 루트 글꼴 크기”, rem을 px로 바꿀 때는 “rem × 루트 글꼴 크기”를 씁니다. 브라우저 기본 루트 크기는 16px이지만 사이트가 html의 font-size를 바꾸면 환산도 달라집니다.
상황별 계산 사례
- 루트 16px에서 14px은 0.875rem, 24px은 1.5rem, 40px은 2.5rem입니다.
- 루트를 62.5%(=10px)로 설정한 사이트에서는 14px이 1.4rem이 되어 계산이 쉬워지지만, 기본 글꼴 크기를 바꾼 사용자 설정과 충돌하지 않는지 확인해야 합니다.
- 루트가 20px인 사이트에서 24px은 1.2rem입니다. 같은 1.5rem이 24px이 아니라 30px을 뜻하게 됩니다.
자주 하는 실수
- 모든 사이트의 루트 크기를 16px로 가정하는 실수.
- 테두리·그림자처럼 사용자 글꼴 설정과 무관해야 하는 값까지 rem으로 바꾸는 실수.
- 미디어쿼리 단위를 px와 rem·em으로 섞어 쓰다 확대 시 레이아웃이 어긋나는 실수.
자주 묻는 질문
rem과 em은 어떻게 다른가요?
em은 해당 요소(또는 부모)의 글꼴 크기를 기준으로 해서 중첩될수록 값이 누적될 수 있고, rem은 항상 루트 기준이라 예측하기 쉽습니다.
왜 px 대신 rem을 쓰나요?
사용자가 브라우저의 기본 글꼴 크기를 키웠을 때 글자와 여백이 함께 커져 접근성에 유리합니다. WCAG는 텍스트를 200%까지 확대해도 사용할 수 있어야 한다고 권고합니다.
반응형 글꼴은 어떻게 하나요?
고정값 대신 clamp()를 쓰면 최소·최대 사이에서 부드럽게 변하는 글꼴 크기를 만들 수 있습니다.
완료 전 확인
변환한 CSS를 적용할 페이지의 실제 html font-size와 반응형 변경 규칙을 먼저 확인하세요.
사용 전 꼭 확인하세요
프로젝트의 html 루트 폰트 크기가 16px이 아닐 수 있으므로 실제 CSS 기준값을 먼저 확인하세요.
도구 설명 최종 수정: 2026년 10월 28일