css 단위 중 가장 많이 사용되는 것은 px(픽셀)일 것이다. 폰트 크기 단위로는 px보다는 rem을 사용하라는 의견이 많아, rem을 사용할 때의 이점을 바탕으로 가장 인기 있는 단위 3가지 px, rem, em을 비교해 보려 한다.
px
px은 고정된 절댓값으로 1px은 화면의 점 하나에 해당한다. 어떤 장치에서든지 같은 px이면 같은 크기로 보인다는 의미이다. 이는 다른 의미로 반응형 웹에서는 스크린 크기별로 값을 일일이 설정해야 한다는 말과도 같다. 번거로움+1
그리고 사용자가 애플리케이션에서 설정한 글꼴 크기를 무시하는 특성 때문에 접근성이 떨어진다는 단점도 존재한다.
접근성 저하 문제
일반적으로 브라우저의 기본 루트 글꼴 크기(=스타일을 지정하지 않은 텍스트)는 16px이다. 브라우저 글꼴 설정으로 루트 글꼴 크기를 변경할 수 있는데, 시력에 문제가 있는 사용자들은 이를 조정하여 자신에게 맞는 글꼴 크기를 사용하여 웹 탐색을 편하게 할 수 있다.
그러나 px 단위는 이 설정을 가볍게 무시해 버린다. 가령 모든 font size가 px값으로 지정된 웹의 경우, 루트 글꼴 크기를 변경해도 해당 폰트가 커지거나 작아지지 않는다는 것이다.
rem
rem은 root em(루트 엠)을 말한다. 이름에서 알 수 있듯이 루트 크기에 따라 상대적으로 변하는 단위이다. 1rem은 설정된 루트 글꼴 크기와 같다. 그래서 기본 브라우저 글꼴 크기를 변경하지 않았을 경우, 대부분 1rem = 16px이다.
px과 비교
그러면 rem을 사용하면 뭐가 좋을까?
rem은 상대적인 값이므로 절댓값 px과는 달리 위에서 거론된 접근성 문제를 해결할 수 있다. 루트 글꼴 크기를 변경했을 때 해당 크기의 배수만큼 스크린 내 폰트가 모두 변한다는 것이다.
그림으로 확인해 보자.
title의 폰트 크기는 1.25rem, content 텍스트 크기는 1rem으로 지정했다고 가정하자. 기본 상태일 때 1rem = 16px이므로 title, content 폰트 크기는 각 20px과 16px로 표시된다. 브라우저 기본 글꼴을 20px으로 변경했을 때는 오른쪽 그림과 같이 루트 크기에 영향을 받으므로 title과 content의 폰트 크기가 20px * 1.25 = 25px, 20px * 1 = 20px 순으로 표시된다.
이처럼 시력이 약해 글씨를 전체적으로 크게 봐야 하는 사용자에게는 상대적인 rem 단위가 px보다 적합하다.
또한, 웹 내 폰트 크기를 rem으로 설정하면 반응형 웹을 구현할 때 텍스트마다 크기를 변경할 필요 없이 루트 폰트 크기만 수정하면 알아서 자동 조절되므로 불필요한 미디어 쿼리를 작성하지 않아도 된다는 장점이 있다.
굳이 단점을 고르자면 1rem이 16px이므로 rem으로 변환할 때 값을 기억하기 어렵다는 점인데, 이건 개인적으로 사바사라고 생각한다. 계산이 그다지 복잡하지 않기 때문에 자주 사용하는 폰트 크기만 익혀둬도 개발하기 편하다.
주요 폰트 크기별 px, rem 변환
- 12px = 0.75rem
- 14px = 0.875rem
- 16px = 1rem
- 18px = 1.125rem
- 20px = 1.25rem
- 24px = 1.5rem
- 32px = 2rem
em
em은 상대 댠위라는 점에서 rem과 비슷하지만 참조하는 상대가 root가 아닌 자신의 부모 요소이다. 감싸는 요소의 크기에 따라 하위 요소의 값이 정해진다.
container와 content의 폰트 크기가 각각 1.5em, 1em이라 가정하면, container는 root의 영향을 받아 root font의 1.5배가 되고 content는 부모 요소 container의 영향을 받아 container 폰트 크기의 1배가 된다.
정리
px은 고정 단위, rem과 em은 상대 단위이다.
px(픽셀)은 화면 크기와 관계없이 일정한 크기를 가지므로 정확한 단위로 요소 크기를 설정할 수 있다. border와 같이 정확한 크기를 설정해야 하는 경우에 사용하면 좋다.
em(엠)은 해당 요소의 부모 요소를 기준으로 크기가 조절된다. 중첩된 요소에서 상대적인 크기 조절이 가능하므로 텍스트 크기 조정이나 중첩된 요소 간의 배치에 사용하면 좋다.
rem(루트 엠)은 root 요소(<html>이나 <body>)의 크기에 따라 상대적으로 조절된다. 접근성 측면에서 px보다 유리하며, 반응형 웹에서 요소 크기를 일관성 있게 유지하는 데 도움이 된다.
사실상 브라우저 글꼴 크기를 조절하여 사용하는 사람들은 그렇지 않은 사람들에 비해서 소수이다. 일반 사람들에게는 px이나 rem이나 별 차이를 못 느끼겠지만 오히려 대상이 소수인 주제이기에 더욱 신경 써야 한다고 생각한다.
일반적인 케이스에서 크게 드러나는 불편을 해결하는 것은 대다수가 고려하고 누구나 다 할 수 있다. 그러나 작은 불편은 직접 겪지 않거나 고민해 보지 않으면 알아채기 쉽지 않다. 자신이 서비스하고자 하는 애플리케이션에 소외되는 이 없이 모든 유형의 사용자가 접근할 수 있는지 항상 염두에 두고 개발하는 자세가 필요한 것 같다.
References
