이번 포스트부터는 폰트에 대해서 연속으로 정리해 보겠다.
오늘은 폰트 사이즈에 px보다 rem을 권장하는 이유에 대해서 알아보고, 마지막에는 정상 유용한 px을 rem으로 환산하는 방법까지 알아보겠다.
이전 포스트
CSS 가상 클래스 선택자
생활코딩 CSS 수업 영상: 타이포그래피 font-size
이 수업 영상이 10년 전에 업로드된 영상이지만, 이 글을 작성하고 있는 2026년 현재에도 폰트 사이즈 단위에 rem을 사용하는 것은 웹 표준과 접근성의 관점에서 권장되는 방식이다.
<!DOCTYPE html>
<html>
<head>
<style>
#px {
font-size: 16px;
}
#rem {
font-size: 1rem;
}
</style>
</head>
<body>
<div id="px">PX</div>
<div id="rem">REM</div>
</body>
</html>먼저 생활코딩 수업 영상에서 사용한 코드다.
| 단위 | 성격 | 정의 | 특징 |
|---|---|---|---|
| px (픽셀Pixel) | 절대 단위 | 화소 하나를 기준으로 하는 고정된 크기 | 화면 크기나 사용자 설정에 관계없이 항상 똑같은 크기로 보임 |
| em | 상대 단위 | 부모 요소의 폰트 사이즈를 기준으로 함 | 부모가 20px일 때 1em은 20px, 2em은 40px. 중첩될수록 계산이 복잡해짐 |
| rem (Root em) | 상대 단위 | 최상위 요소(<html>)의 폰트 사이즈를 기준으로 함 |
브라우저 기본 설정(보통 16px)을 기준으로 고정됨. 계산이 예측 가능하고 일정함 |
px, em, rem, 각 단위의 차이점을 표로 정리했다.
왜 px 대신 rem을 써야 할까?
1. 사용자 접근성
모든 사람이 브라우저의 기본 폰트 크기를 '보통(16px)'으로 두고 쓰지 않는다.
시력이 좋지 않은 사용자는 브라우저 설정에서 기본 폰트 크기를 '크게'로 설정해 두기도 한다.
그런데 글자의 크기를 px로 고정하면 사용자가 브라우저 설정을 바꿔도 글자 크기가 변하지 않아 읽기 힘들어진다.
반면 rem을 쓰면 사용자가 설정한 기본값에 따라 전체 글자 크기가 유동적으로 변하므로 웹 접근성을 지킬 수 있다.
2. 반응형 디자인의 편의성
기기마다 화면 크기가 다른 반응형 웹에서는 rem이 가장 편리하다.
예를 들어, 모바일 화면에서 전체적인 글자 크기를 줄이고 싶을 때, 수백 개의 px 값을 일일이 고치는 대신 최상위 루트(html)의 폰트 사이즈 하나만 조절하면 모든 글자 크기가 비율에 맞춰 한꺼번에 줄어든다.
3. 유지보수의 일관성
em은 부모 요소의 크기에 영향을 받기 때문에, 태그가 복잡하게 겹치면 뜻하지 않게 글자 크기가 갑자기 커지기도 하는 등 계산하기가 매우 힘들어진다.
반면 rem은 언제나 루트(Root) 기준이기 때문에 어디서 사용하든 크기가 예측 가능하다.
픽셀(px)을 rem으로 환산하는 방법
픽셀px은 초창기부터 지금까지 가장 직관적이라 널리 쓰여왔다.
그렇기 때문에 아무래도 rem보다는 px이라는 단위에 익숙한 사람들이 많다.
그래서 마지막으로 px을 rem으로 환산하는 방법을 정리하고 글을 마치겠다.
일단 기준이 되는 1rem은 16px이다.
15px을 rem으로 환산하면 0.9375rem이고, 14px을 rem으로 환산하면 0.875rem이다.
보통 웹 브라우저의 기본 폰트 사이즈(Root)는 16px이다.
rem은 이 루트 크기를 기준으로 한 상대적인 비율이다.
- 15px ÷ 16px = 0.9375rem
- 14px ÷ 16px = 0.875rem
기준이 16픽셀이라는 것을 기억하자.
그리고 계산기를 열어서 항상 원하는 px ÷ 16을 하면 된다.
현대 웹은 사용자의 환경을 존중하는 방향으로 발전하고 있기 때문에, 접근성과 관리 효율성을 모두 잡은 rem을 쓰는 것이 정석이다.
다음 포스트
CSS 색상 지정 방법 Color Name, HEX, RGB의 차이점과 투명도(RGBA vs Opacity) 비교
응원이나 피드백이 담긴 댓글은 제가 계속 블로그를 해나갈 수 있는 원동력이 됩니다. 😊
지인에게 보여주고 싶은 글이었다면 URL을 복사해서 메신저나 소셜 미디어에 공유해 주세요.
0 Comments
댓글 쓰기
🔸 댓글은 블로그 운영자의 승인 후에 블로그에 표시됩니다.
🔸 비로그인 방문자 분께서는 '익명'보다 이름/URL로 댓글을 남겨주시면 감사하겠습니다. (URL은 생략 가능합니다.)
🔸 구글 로그인 방문자는 '알림 사용'에 체크를 하시면, 남겨주신 댓글에 대한 답글 알림을 메일로 받아볼 수 있습니다. 📩