CSS rem px 변환기
웹 디자인 시 기준 폰트 크기에 따른 rem과 px 값을 상호 변환합니다.
웹 반응형 디자인에서 사용되는 rem 단위와 px(픽셀) 단위를 기준 폰트 크기(기본 16px)에 따라 빠르게 상호 변환합니다. 1rem은 기본 16px, 1.5rem은 24px, 2rem은 32px에 해당합니다.
CSS rem px 변환기
계산 공식 및 예시
px = rem × 기준 폰트 크기(px) / rem = px ÷ 기준 폰트 크기(px)CSS rem px 변환기 사용 안내
CSS rem px 변환기는 웹 디자이너 및 프론트엔드 개발자가 반응형 웹 페이지 제작 시 사용되는 상대 단위 rem과 절대 단위 px(픽셀)을 기준 폰트 크기(Root Font Size)에 맞추어 상호 변환해 주는 계산 도구입니다.
브라우저의 기본 글꼴 크기(기본 16px)를 기준으로 디자인 시스템의 타이포그래피, 여백(Margin/Padding), 그리드 레이아웃을 정확하고 일관성 있게 구성할 수 있습니다.
rem과 px 단위 개요 및 차이점
| 구분 | px (Pixel) | rem (Root em) |
|---|---|---|
| 단위 성격 | 절대 단위 (Absolute Unit) | 상대 단위 (Relative Unit) |
| 기준 대상 | 디스플레이 화면의 독립적 물리 픽셀 | 최상위 HTML 요소의 font-size |
| 웹 접근성 | 사용자의 브라우저 글꼴 크기 변경에 반응 안 함 | 사용자의 브라우저 설정에 맞춰 자동 비율 조절 |
| 주요 사용처 | 고정 크기 테두리(border), 미세 아이콘 크기 | 본문 폰트, 반응형 여백, 컴포넌트 높이/너비 |
rem px 변환 공식
1. rem을 px로 변환하는 공식
- 공식:
px = rem × 기준 폰트 크기 - 예시: 기준 폰트 크기가 16px일 때
1.5rem= 1.5 × 16 =24px
2. px을 rem으로 변환하는 공식
- 공식:
rem = px ÷ 기준 폰트 크기 - 예시: 기준 폰트 크기가 16px일 때
24px= 24 ÷ 16 =1.5rem
자주 사용하는 rem px 환산표 (기준 폰트: 16px)
| rem | px (16px 기준) | em (동일 기준) | pt (포인트) | 주요 웹 UI 적용 추천 대상 |
|---|---|---|---|---|
| 0.75rem | 12px | 0.75em | 9pt | 캡션, 캡션 텍스트, 도움말 힌트 |
| 0.875rem | 14px | 0.875em | 10.5pt | 부가 설명 글꼴, 서브 텍스트 |
| 1rem | 16px | 1em | 12pt | 본문 기본 텍스트 (Body Standard) |
| 1.125rem | 18px | 1.125em | 13.5pt | 소제목, 강조 본문 |
| 1.25rem | 20px | 1.25em | 15pt | 카드 제목, H4 헤더 |
| 1.5rem | 24px | 1.5em | 18pt | 섹션 제목, H3 헤더 |
| 1.75rem | 28px | 1.75em | 21pt | 대형 섹션 제목, H2 헤더 |
| 2rem | 32px | 2em | 24pt | 메인 페이지 타이틀, H1 헤더 |
| 2.5rem | 40px | 2.5em | 30pt | 히어로 세션 대형 헤드라인 |
| 3rem | 48px | 3em | 36pt | 디스플레이 대형 타이포그래피 |
62.5% 폰트 트릭 (10px 기준 폰트 사용법)
웹 개발 시 16px 기준의 복잡한 십진수 계산을 단순화하기 위해 CSS 최상위 요소에 62.5%를 설정하는 기법이 자주 활용됩니다.
- 브라우저 기본 폰트 크기 16px의 62.5%는 10px입니다.
- 기준 폰트 크기가 10px로 변경되면
1rem = 10px,1.4rem = 14px,2.4rem = 24px처럼 10진수 단위로 직관적 계산이 가능해집니다. - 본 변환기에서 기준 폰트 크기(Root Font Size)를
10으로 설정하면 해당 기준에 맞춘 환산 결과를 즉시 확인할 수 있습니다.
Q&A
자주 묻는 질문
rem 단위와 em 단위의 차이점은 무엇인가요?
rem(Root em)은 최상위 HTML 요소(html)의 폰트 크기만을 기준으로 계산되는 상대 단위입니다. 반면 em은 부모 요소의 폰트 크기를 기준으로 상속받기 때문에 중첩된 구조에서 예기치 않은 크기 변화가 발생할 수 있습니다.
왜 웹 디자인에서 px 대신 rem 단위를 권장하나요?
rem 단위를 사용하면 시각 장애인이나 고령자 등 사용자가 브라우저 설정에서 기본 글꼴 크기를 변경했을 때 웹페이지 전체 레이아웃과 글꼴이 비율에 맞춰 유연하게 확대·축소되어 웹 접근성과 반응형 디자인 구현이 용이해집니다.
기본 폰트 크기는 왜 16px인가요?
Chrome, Safari, Firefox, Edge 등 대부분의 현대 웹 브라우저의 기본(Root) 글꼴 크기가 16px로 설정되어 있기 때문입니다. CSS에서 html font-size를 62.5%로 설정하면 10px 기준(1rem = 10px)으로 편리하게 계산할 수 있습니다.