px 대신 rem을 사용하자
css 단위 중 가장 많이 사용되는 것은 px(픽셀)일 것입니다. 폰트 크기 단위로는 px보다는 rem을 사용하라는 의견이 많아, rem을 사용할 때의 이점을 바탕으로 가장 인기 있는 단위 3가지 px, rem, em을 비교해 보려 합니다.
px
px은 고정된 절댓값으로 화면의 해상도나 디바이스에 상관없이 시각적으로 일정한 크기로 보이도록 설계된 단위입니다.
(단, 실제 렌더링 되는 크기는 디바이스 해상도, 배율 설정에 따라 조금씩 달라질 수 있습니다.)
어떤 디바이스든 비슷한 크기로 보인다는 것은 반응형 웹에서는 스크린 크기별로 값을 유동적으로 조절해야 한다는 의미이기도 합니다.
접근성 저하 문제
일반적으로 브라우저의 기본 루트 글꼴 크기는 16px입니다. 브라우저에서 글꼴 크기를 변경할 수 있는데, 시각 장애가 있는 사용자들은 이를 조정하여 웹 탐색을 편하게 할 수 있습니다.
그러나 px 단위는 사용자가 애플리케이션에서 설정한 글꼴 크기를 무시합니다. 모든 폰트 사이즈가 px 값으로 지정된 애플리케이션의 경우, 루트 글꼴 크기를 변경해도 해당 폰트가 커지거나 작아지지 않고 해당 px 값으로 고정됩니다.
그래서 px은 border나 box-shadow, 고정 크기 이미지처럼 화면 크기 변화나 브라우저 설정에 영향을 받지 않고 동일한 크기를 유지해야 하는 요소에 사용하는 것이 적절합니다.
rem
rem의 경우에는 어떨까요?
rem은 root em(루트 엠)을 말하며, 이름에서 알 수 있듯이 루트 글꼴 크기에 따라 상대적으로 변하는 단위입니다. 1rem은 설정된 루트 글꼴 크기와 같습니다. 루트 글꼴 크기를 변경하지 않았을 경우 대부분 1rem은 16px과 동일합니다. 만약 루트 글꼴 크기를 20px으로 변경했다면 1rem 역시 동일하게 20px입니다.
px과 비교
rem은 상대적인 값이므로 고정된 px과는 달리 위에서 거론된 접근성 문제를 해결할 수 있습니다. 루트 글꼴 크기를 변경했을 때 해당 크기의 배수만큼 화면 내 rem으로 설정된 폰트 크기도 함께 변합니다.
아래 이미지는 content text만 rem 단위로 설정한 경우 입니다. 왼쪽은 루트 글꼴 크기를 기본으로 설정했을 때이고 오른쪽은 20px로 변경했을 때입니다.
.title {
font-size: 24px;
}
.content {
font-size: 1rem;
}
button {
font-size: 16px;
}
content 텍스트 크기는 다른 px로 지정된 title, button 텍스트 등과 다르게 크기가 커진 것을 확인할 수 있습니다. 폰트 사이즈에만 적용되는 것이 아니라 margin, padding과 같은 간격에도 똑같이 적용됩니다.
- 12px = 0.75rem
- 14px = 0.875rem
- 16px = 1rem
- 18px = 1.125rem
- 20px = 1.25rem
- 24px = 1.5rem
em
em은 상대 단위라는 점에서 rem과 비슷하지만, 참조하는 상대가 루트가 아닌 자신의 부모 요소입니다. 감싸는 요소의 크기에 따라 하위 요소의 값이 정해집니다.
예시는 content의 부모 요소인 container에 1.5em을 적용하고 content에 1em을 적용했습니다.
container는 루트의 영향을 받아 루트 크기의 1.5배가 되고 content는 부모 요소 container의 영향을 받아 container 크기의 1배가 됩니다.
.container {
font-size: 1.5em;
}
.content {
font-size: 1em;
}
- 루트 글꼴 크기가 16px일 때, container의 폰트 사이즈는 16*1.5=24px이고 content는 24*1=24px입니다.
- 루트 글꼴 크기가 20px일 때, container의 폰트 사이즈는 20*1.5=30px이고 content는 30*1=30px입니다.
정리
px은 고정 단위, rem과 em은 상대 단위입니다.
px(픽셀)
- px은 화면 크기와 관계없이 일정한 크기를 가지므로 정확한 단위로 요소 크기를 설정할 수 있습니다.
- border나 box shadow처럼 정확한 크기를 설정해야 하는 경우에 사용하는 것이 좋습니다.
em(엠)
- 해당 요소의 부모 요소를 기준으로 크기가 조절됩니다.
- 중첩된 요소에서 상대적인 크기 조절이 가능하므로 텍스트 크기 조정이나 중첩된 요소 간의 배치에 사용하면 좋습니다.
rem(루트 엠)
- root 요소(<html>이나 <body>)의 크기에 따라 상대적으로 조절됩니다.
- 접근성 측면에서 px보다 유리하며, 반응형 웹에서 요소 크기를 일관성 있게 유지하는 데 도움이 됩니다.
브라우저 글꼴 크기를 조절하여 사용하는 사람들은 그렇지 않은 사람들에 비해 소수인 것은 사실입니다. 일반적인 사용자 입장에서는 px과 rem의 차이를 크게 느끼지 못할 수도 있습니다. 그러나 오히려 대상이 소수인 주제이기에 더 신경 써야 한다고 생각합니다.
대부분이 겪는 불편한 문제는 누구나 인지하고 쉽게 개선할 수 있지만, 작은 불편은 직접 겪거나 고민해 보지 않으면 지나치기 쉽습니다. 자신이 만드는 서비스가 특정 사용자층만을 위한 것이 아니라, 소외되는 이 없이 모든 사용자가 접근할 수 있도록 설계되었는지 항상 고민하는 자세가 필요한 것 같습니다.
References
Why designers should move from px to rem (and how to do that in Figma)