🌏 html { font-size: 62.5%; } 를 적용하자!

font-size

• 브라우저의 표준 글꼴 크기는 16px 입니다.
  즉, 페이지에 글꼴 크기를 지정하지 않으면 글꼴 크기는 기본적으로 16px로 렌더링 됩니다.
• 개발자와 사용자는 글꼴 크기를 변경할 수 있습니다.
  - 개발자는 CSS를 사용하여 루트 요소(html)의 글꼴 크기를 변경할 수 있습니다.
  - 사용자는 브라우저 설정을 통해 글꼴 크기를 지정할 수 있습니다.
• 중요한 것은 사용자의 기본 설정이 CSS로 적용된 스타일보다 우선시 되어야 한다는 점입니다.
  - 만약 시각 장애가 있는 사용자는 텍스트를 쉽게 읽기 위해 페이지의 글꼴 크기를 조정해야합니다.
  - 이때 글꼴 크기를 px 단위로 설정하면 사용자가 선호하는 글꼴 크기에 관계없이 설정된 px 크기로 렌더링 됩니다.

사용자의 기본 설정을 존중(Respect User Preferences)하려면 px같은 절대 단위보다는 %, em, rem과 같은 상대 단위를 사용해야합니다.

em

• em은 해당 요소의 부모 글꼴 크기에 상대적입니다.
• 부모 요소의 글꼴 크기가 24px일 경우,
  - 글꼴 크기가 1em인 자식요소는 24px의 계산된 글꼴 크기를 가지게 됩니다.
  - 글꼴 크기가 0.5em인 자식요소는 12px로 계산됩니다.

<div class="parent">
  <div class="child"></div>
</div>

.parent {
  /* I'm using pixels for illustrative purposes. */
  font-size: 24px;
}
.child {
  /* 0.5 * 24px = 12px */
  font-size: 0.5em;
}

• 한 요소에 em 단위를 지정하고, 하위 요소에서도 em 단위로 글꼴 크기를 지정한다면 두 값이 복합적으로 적용됩니다.
• 따라서, 요소가 트리의 삽입된 위치에 따라 글꼴의 크기가 달라지므로 독립적이고 재사용 가능한 구성요소를 만들기 어려워집니다.

이러한 이유로 em 단위를 사용하지 않는 것이 좋습니다.

<div class="parent">
  <div class="child">
    <div class="deeply-nested"></div>
  </div>
</div>

.parent {
  /* I'm using pixels for illustrative purposes. */
  font-size: 24px;
}
.child {
  /* 0.5 * 24px = 12px */
  font-size: 0.5em;
}
.deeply-nested {
  /* 0.5 * 0.5 * 24px = 6px */
  font-size: 0.5em;
}

rem

• rem(“root em”)은 문서의 루트 글꼴 크기를 참조합니다.
• rem의 장점은 예측이 가능하다는 것입니다.
• 항상 임의의 상위 글꼴 크기가 아닌 루트 글꼴 크기를 참조하기 때문에 중첩 레이아웃 및 구성요소에서 안전하게 사용할 수 있습니다.
• 사용자가 브라우저 설정을 통해 글꼴 크기를 변경하면 모든 rem 기반 크기가 사용자의 설정에 따라 조정됩니다.

.parent {
  /* 1.5 * 16px = 24px */
  font-size: 1.5rem;
}
.child {
  /* 0.5 * 16px = 8px */
  font-size: 0.5rem;
}
.deeply-nested {
  /* 0.5 * 16px = 8px */
  font-size: 0.5rem;
}

font-size: 62.5%;

• px 값을 rem 값으로 변경하기 위해서는 아래와 같이 번거로운 계산을 해야합니다.
  - 직접 계산한다.
  - 온라인 변환기를 이용한다.
  - pxToRem 함수를 만들어 적용한다.
  

루트(HTML) 글꼴 크기를 62.5%로 설정하면 번거로운 계산없이 간단하게 해결할 수 있습니다.

html {
  /* 62.5% of 16px browser font size is 10px */
  /* 16px * 0.625 = 10px */
  font-size: 62.5%;
}

body {
  /* 1.6 * 10px = 16px */
  font-size: 1.6rem;
}

.some-element {
  /* 1.2 * 10px = 12px */
  font-size: 1.2rem;
}

• html에 font-size: 62.5%;를 적용하면 페이지의 글꼴 크기가 10px로 작아집니다.
• 따라서, body에 font-size: 1.6rem;를 설정하여 다시 페이지의 글꼴 크기를 16px로 조정합니다.
• 사람은 10진수를 기본으로 사용하기 때문에 기본 글꼴 크기를 10px로 설정하면 상대적으로 계산하기 쉽습니다.

마무리

• 나의 경우 pxToRem 함수를 만들어서 적용했었는데 대부분의 페이지 상단에 해당 함수를 import 하고, 글꼴마다 함수를 적용해서 코드가 지저분해 보였습니다.
• 동료 개발자는 rem을 따로 메모해놓고 적용하다가 자주 적용하는 px 단위의 rem 값을 외우는 경지에 이르렀습니다.(pxToRem 함수 사용 전)
• 이번 프로젝트에는 조금 더 쉽게 웹 접근성을 고려한 글꼴 크기를 적용할 수 있게 되었네요 쨔잔!

참고

• Use Rems for Font Size to Respect User Preferences
• The 62.5% Font Size Trick
• How to Override Root Font Size to Create a Better User Experienc