CSS RESET - font-size:62.5% 초기화 방법을 선호하지 않는 이유

font-size:62.5%가 갖고 있는 장점

html,body{
    font-size: 62.5%
}

CSS를 초기화하는 많은 방법 중 아직도 사람들이 많이 쓰는 방법 중 하나가 font-size: 62.5%입니다. 특히 우리나라에서 이런 사례들이 심심찮게 보이는데요. 이 방법이 가지고 있는 장점은 html 문서의 1rem 값을 10px로 만들어준다는 것입니다.  - 16 * 62.5 / 100 = 10

이렇게 초기화를 해주고 나면 rem이라는 단위를 사용할 때 10단위로 계산하기 아주 편리해집니다.

• 1rem = 10px
• 2rem = 20px
• 3rem = 30px...

그런데 이 방식에는 최근 디자인 경향과 조금 다른 방향성을 갖고 있습니다.

8pt 그리드 시스템

이미 수 년 전부터 8px 그리드 혹은 8pt 그리드 시스템을 기반으로 디자인하는 사례들을 쉽게 찾아볼 수 있습니다. 8pt 그리드 시스템이 나온 이유가 다양하지만, 레티나 디스플레이가 나오면서 2배수 이상의 고해상도 스크린을 대응해야 한다는 기기적인 요구사항도 한 몫합니다. 8에 2를 곱하면 16px이 됩니다. 공교롭게도 브라우저의 기본 폰트 사이즈 값입니다.

• 0.5rem = 8px
• 1rem = 16px
• 1.5rem = 24px
• 2rem = 32px

2배를 해도, 1/2를 해도 8의 배수로 8px 그리드 시스템을 기반으로 디자인하기에 좋은 기본값입니다. 물론 즉각적으로 계산하기에는 10단위로 끊어서 계산하는 것이 편리할 것입니다. 하지만 8배수 디자인을 하기에 더 용이한 것은 기본 폰트 값 16px = 1rem을 이용하는 방법입니다.

normalize.css나 reset.css와 같은 유명한 css reset 방법들을 찾아봐도 font-size:62.5%를 적용하지 않습니다.

물론 이것이 절대적인 진리를 이야기하는 것은 아닙니다. 이 또한 시간이 지나면 또 다른 , 더 나은 접근법이 나올 수 있습니다.

브라우저 기본값을 활용한 8px 그리드 시스템

62.5%로 폰트사이즈를 고정하는 것이 습관처럼 자리 잡아 있다면, 그냥 기본값으로 세팅되어있는 16px을 이용해 8px 그리드 시스템의 세계로 나아가 보는 것도 나쁘지 않다는 이야기였습니다.

회사라면 정해진 규칙이 있을테고, 개인이라면 선호하는 접근방법이 달라서 한 번 자리잡은 습관은 오래토록 유지되기 마련입니다. 하지만 이런 식으로 접근을 바꿔보면 또 다른 세계가 열리기도 합니다.

처음엔 좀 이질감이 느껴질지 몰라도, 써보면 생각보다 아주 편리하게 딱 떨어지는 화면들을 구성할 수 있어서 좋습니다. 8px 그리드라고 하지만 사용하다보면 실질적으로는 거의 2배수 단위로 움직이기 때문에 계산하기도 쉽습니다.