PX↔REM 변환기 (PX to REM Converter)
px를 rem으로, rem을 px로 즉시 변환하는 무료 도구입니다. 루트 요소(html)의 font-size 기준값을 자유롭게 변경하여 실시간으로 변환 결과를 확인할 수 있습니다.
PX→REM 변환표 (기준 16px)
루트 요소의 font-size가 브라우저 기본값인 16px일 때, 자주 쓰는 px 값에 대응하는 rem 값입니다.
| px | rem |
|---|---|
| 8px | 0.5rem |
| 10px | 0.625rem |
| 12px | 0.75rem |
| 14px | 0.875rem |
| 16px | 1rem |
| 18px | 1.125rem |
| 20px | 1.25rem |
| 24px | 1.5rem |
| 28px | 1.75rem |
| 32px | 2rem |
| 36px | 2.25rem |
| 40px | 2.5rem |
| 48px | 3rem |
| 64px | 4rem |
사용 팁
- 브라우저 기본값에서는 1rem이 16px과 같지만, 저시력 사용자는 브라우저의 기본 텍스트 크기를 키워서 사용하는 경우가 많습니다. rem 단위는 이 설정에 자동으로 따라가지만 px 단위는 그렇지 않습니다.
- 미디어 쿼리(@media)의 분기점은 전통적으로 px로 지정하는 경우가 많지만, font-size나 padding·margin 같은 여백에는 rem을 사용하면 사용자가 텍스트 크기 설정을 바꿔도 전체적인 레이아웃 균형이 유지되기 쉽습니다.
- 일부 프로젝트에서는 html { font-size: 62.5%; }로 지정해 1rem을 10px로 맞춰 계산을 쉽게 하기도 합니다(1.6rem = 16px). 위 기준값 입력란에 10을 입력하면 같은 방식으로 변환해 볼 수 있습니다.
- 한 프로젝트 안에서 rem과 em을 함께 쓸 때는, 페이지 전체 레이아웃 값은 rem으로, 재사용 가능한 컴포넌트 내부 여백은 em으로 나누어 사용하면 유지보수가 쉬워집니다.
자주 묻는 질문
여담 ― rem이 CSS 명세에 들어오기까지
rem 단위가 CSS Values and Units Module 명세에 처음 등장한 것은 2011년경으로, 그 이전 웹사이트들은 거의 모두 px 또는 em으로 텍스트와 여백 크기를 지정했습니다. 당시 em은 부모 요소의 font-size를 기준으로 하기 때문에 요소가 중첩될수록 기준이 어긋나 복잡한 레이아웃에서는 의도하지 않은 크기가 되기 쉬웠습니다.
rem은 이 문제를 해결하기 위해 고안된 단위입니다. 언제나 하나만 존재하는 루트 요소를 기준으로 삼기 때문에 요소가 얼마나 중첩되더라도 계산이 흐트러지지 않습니다. Internet Explorer 9가 rem을 지원하지 않던 시기에는 px 값을 먼저 적고 rem 값을 뒤에 함께 적는 방식(font-size: 16px; font-size: 1rem;)이 일반적이었지만, 2010년대 중반 이후 주요 브라우저가 지원하면서 이런 대체 표기는 필요 없어졌습니다.
요즘은 접근성 관점에서 웹사이트 전체의 글자 크기와 여백을 rem으로 통일해, 사용자가 브라우저의 텍스트 크기 설정을 바꾸었을 때 페이지 전체가 깨지지 않고 자연스럽게 확대·축소되도록 설계하는 방식이 정착되어 있습니다. WCAG(Web Content Accessibility Guidelines) 같은 지침에서도 텍스트 크기를 고정 단위에만 의존하지 않도록 권장하고 있습니다.