왜 많은 사람들이 CSS 기본 설정으로 62.5%를 쓰는 걸까?

많은 개발자들이 보일러플레이트(boilerplate)처럼 아래와 같은 구문을 사용한다.

html {
  font-size: 62.5%
}

왜 62.5% 일까?

대부분의 브라우저들이 기본 폰트 크기로 16px을 사용한다. 위와 같이 html 블럭에 font-size를 62.5%로 지정하면 기본 폰트 크기가 10px로 바뀐다. 개발자들은 브라우저의 기본 폰트 크기를 10px로 바꾸고 작업하길 선호한다.

왜 10px일까?

크기를 지정하는 단위로 px 말고도 em 이나 rem 등이 있다. em은 상위 항목(element)의 크기에 비례하여 크기를 지정하는 방식이고 rem(Root em)은 최상위 항목(element)의 크기에 비례하여 크기를 지정한다. 인간을 10진수를 기본으로 사용하기 때문에 기본 폰트를 10px로 조정해두면 상대적으로 계산하기가 쉽고 직관적이다. 20px을 표현하기 위해서는 2rem 으로 하면 된다.

다시, 왜 62.5% 일까?

그렇다면 다시 의문이 생긴다. 왜 10px로 지정하지 않고 굳이 16px * 62.5% = 10px 과 같이 번거롭게 계산하여 기본 폰트를 10px로 지정할까? 실제로 그럴 필요가 없다고 생각하는 개발자들은 62.5% 대신에 10px로 지정하여 사용한다. 이게 더 명시적이라는 것이다. 하지만 사용자의 설정을 존중해야 한다는 입장의 개발자, 그러니까 62.5%를 쓰는게 더 좋다고 말하는 개발자들은 이 설정이 보기엔 큰 차이가 없지만 사용자의 접근성 옵션(accessibility options)을 해친다고 말한다. 글씨가 작아 기본 폰트를 키워 쓰던 사람이 10px로 사용자 브라우저의 기본 폰트를 바꾸면 그 설정에 맞게 동작하지 않고 강제로 10px 설정된 상태에서 사용해야 하기 때문에 불편하다는 것이다. 어차피 하위 항목(element)들은 em 또는 rem으로 지정되어 있기 때문에 유연하게 변하므로 62.5%를 사용하는 것이 개발자의 의도를 기본적으로 전달, 표현하되 사용자의 선택권을 해치지 않는다고 말한다.

결론은

선택은 당신의 몫이다. 아직 이 문제에 관해 절대적으로 정해진 표준은 없다. 위의 이유를 훓어봤다면 무엇을 써야 할지 아마 이미 결정하지 않았을까. : )