픽셀 PX보다 REM을 사용 해야 하는 이유
폰트 사이즈 단위
에는 대표적으로 PX, REM, EM이 있다.
- PX은 고정 단위 (브라우저 설정 미반영)
- REM 과 EM 가변 단위 (브라우저 설정에 따라 변함. 즉 환경에 따라 변화될 수 있는 단위)
그러므로 사용자 배려 측면에서 가변단위 (REM or EM)를 쓰는게 원론적으로는 바람직하다.
특히 다양한 사용자층을 위한 서비스라면 이 기준을 따르는게 좋다. (고령자나, 시각에 문제가 있는 사람을 위해)
추가요약정보
- 브라우저의 기본 폰트 사이즈는 일반적으로 16px 이고 1rem = 16px이다.
- 폰트 크기를 62.5% 로 설정하게 되면 기본 폰트 크기는 10px
- 계산 편의를 위해 62.5%를 곱해서 1rem=10px로 수정해서 사용하기도한다.
html { font-size:16px; } 에서
16px = 1rem
17px = 1.063rem 이렇게 되면 계산이 어렵다.
따라서
html { font-size:62.5%; }, 또는 html { font-size:10px; } 로 하면
16px = 1.6rem
17px = 1.7rem 이 되기 때문에 편하게 사용할 수 있다.
- 최소 폰트 사이즈는 10px이고 이보다 작게 제작하더라도 브라우저에서는 10px로 보인다.
- REM은 루트 요소(html)의 font-size 를 기준으로 크기가 설정된다.
- EM은 해당 요소(element)의 font-size 를 기준으로 크기가 설정된다.
- REM은 EM과 달리 기준값이 변하지 않으므로 훨씬 덜 복잡하다. (이전 회사에서는 REM을 주로 사용함)
하지만 현재. 일반적인 기업의 웹에서는 대부분 PX 단위를 사용하고 있다. 내가 현재 몸담고 있는 회사와 게임업계 또한 마찬가지이며, 국내에서 가장 잘나간다는 게임사의 웹 서비스 조차 여전히 PX을 사용하고있다. 한국은 아직 웹 접근성에 대해 엄격하지 않음이 한몫한다.
물론 가변단위를 사용하는것이 원론적으로는 옳다고 하겠으나 현재 운영중인 서비스의 이용자 층은 극소수를 제외하면 대부분 젊은 층이며 굳이 REM으로 전환하는것은 인력 및 시간 낭비가 될 수 있다.
새로운 웹 서비스를 처음부터 제작해야 한다면 항상 사용해오던 PX에서 벗어나보길 바란다.