px와 rem 차이: 반응형 CSS에서 글자 크기 단위 고르는 법
px·rem·em의 기준 차이, 브라우저 기본 글자 크기 16px 기준 환산표, 사용자가 글자 크기를 키울 때 rem이 유리한 이유, 62.5% 기법의 장단점과 미디어 쿼리 단위 선택을 정리합니다.
- rem은 문서 최상위(html) 글자 크기를 기준으로 하며, 브라우저 기본값은 보통 16px입니다.
- 사용자가 브라우저 설정에서 글자 크기를 키우면 rem으로 지정한 글자는 따라 커지지만 px은 그대로입니다.
- 글자 크기와 여백은 rem, 1px 테두리처럼 고정돼야 하는 값은 px로 쓰는 조합이 일반적입니다.
디자인 시안은 px로 오는데 CSS는 rem으로 쓰라는 이야기를 자주 듣습니다. 두 단위는 화면에 보이는 크기가 같을 수 있지만, 무엇을 기준으로 크기가 정해지는지가 다릅니다. 이 차이가 접근성과 유지보수에 영향을 줍니다.
세 단위의 기준
| 단위 | 기준 | 특징 |
|---|---|---|
| px | CSS 픽셀(고정) | 예측하기 쉽지만 사용자 글자 크기 설정을 따르지 않음 |
| rem | html 요소의 font-size | 어디서 쓰든 같은 기준, 전체 비율 조절이 쉬움 |
| em | 자기 자신 또는 부모의 font-size | 중첩되면 크기가 누적되어 계산이 복잡해짐 |
16px 기준 환산표
| px | rem | 용도 예시 |
|---|---|---|
| 12px | 0.75rem | 캡션, 보조 정보 |
| 14px | 0.875rem | 작은 본문, 버튼 |
| 16px | 1rem | 기본 본문 |
| 18px | 1.125rem | 큰 본문 |
| 20px | 1.25rem | 소제목 |
| 24px | 1.5rem | h3 |
| 32px | 2rem | h2 |
| 48px | 3rem | 큰 제목 |
계산식은 rem = px ÷ 기준 글자 크기입니다. 기준이 16px이면 px을 16으로 나누면 됩니다.
rem이 접근성에 유리한 이유
시력이 약한 사용자는 브라우저 설정에서 기본 글자 크기를 20px이나 24px로 키웁니다. 글자를 rem으로 지정하면 사이트 전체 글자가 비율대로 커지지만, px로 고정하면 설정을 바꿔도 글자가 그대로입니다. 브라우저 확대(Ctrl + +)는 px과 rem을 모두 키우지만, 글자 크기 설정만 바꾸는 사용자도 많습니다. 웹 접근성 지침(WCAG)도 글자를 200%까지 키워도 내용과 기능이 유지되도록 권장합니다.
62.5% 기법은 써야 할까
html { font-size: 62.5%; }로 기준을 10px로 만들면 1.6rem = 16px처럼 계산이 쉬워집니다. 사용자 설정에 비례하므로 접근성도 유지됩니다. 다만 외부 라이브러리 컴포넌트가 16px 기준 rem을 가정하고 있으면 크기가 작아지고, 본문에 font-size를 다시 지정하지 않으면 기본 글자가 10px이 되는 실수가 생깁니다. 팀 규칙으로 명확히 정할 때만 쓰는 것이 좋습니다.
상황별 단위 선택
- 글자 크기: rem
- 여백·간격: rem(글자 크기와 함께 커지면 레이아웃 균형이 유지됨)
- 테두리 두께, 그림자: px(1px 선은 확대돼도 1px이 자연스러움)
- 버튼 안쪽 여백: 버튼 글자 크기에 비례하게 하려면 em
- 미디어 쿼리: em 또는 rem을 쓰면 사용자가 글자를 키웠을 때 레이아웃도 함께 전환됩니다.
- 화면 크기에 따라 부드럽게 변하는 제목:
clamp(1.5rem, 4vw, 3rem)처럼 rem과 vw 조합. CSS Clamp 계산기로 값을 구할 수 있습니다.
자주 묻는 질문
디자인 시안이 px인데 rem으로 바꿔야 하나요?
시안의 px 값을 16으로 나눠 rem으로 옮기면 기본 상태에서는 시안과 똑같이 보이고, 사용자 설정에는 유연하게 대응합니다.
모바일에서 rem 기준이 달라지나요?
기본값은 대부분 16px로 같습니다. 다만 사용자의 시스템 글꼴 크기 설정에 따라 달라질 수 있어 rem을 쓰는 것이 의도에 맞습니다.
참고한 공식 자료
이 글은 일반적인 기준을 설명하는 정보이며 개인별 법률·세무 판단을 대신하지 않습니다. 중요한 결정 전에는 본문에 적은 공식 기관 자료나 전문가 상담으로 확인하세요. 내용 오류는 문의 페이지로 알려주시면 확인 후 수정합니다.
직접 계산해 보기
본문의 예시를 내 조건으로 바꿔 확인해 보세요.
px ↔ rem 변환기 열기