웹 접근성을 위한 font-size, 16px, 1rem, 87.5%

웹 접근성을 위한 font-size, 16px, 1rem, 87.5%

웹 개발 시 글꼴 크기에 대한 CSS 속성으로 font-size를 많이 사용한다. 여기에서는 웹 접근성과 관련된 font-size에 대한 내용을 학습하고 정리한다.

글꼴 크기를 지정하는 단위

익히 알고 있듯, 글꼴 크기를 지정하는 단위로는 px, rem, em 등이 있다. 글꼴 크기를 지정하는 것 외에도 모든 사이즈와 관련된 속성에는 해당 단위가 사용된다. 물론 "%" 단위도 존재한다. px는 말 그대로 픽셀 단위이며, 나머지 단위와는 성격이 조금 다르다.

절대 단위 px

모니터의 해상도를 보면 1920x1080, 3440x1440과 같은 해상도를 볼 수 있는데, 이 해상도는 픽셀과 관련된 내용이다. 가로로 1920픽셀, 세로로 1080픽셀을 의미한다. 즉, 모니터의 모든 영역에 빨간색 배경을 채우고 싶다면 1픽셀짜리 빨간색 배경 박스를 2,073,600개 채우면 된다.

글꼴 사이즈의 경우 16px이면 해상도를 변경하지 않는 한 브라우저에서 고정적으로 보인다. 해상도가 높으면 물리적으로 픽셀을 보여주는 공간이 촘촘해지므로 글꼴이 작아진 것처럼 느껴진다. 하지만 그 글꼴이 차지하는 영역은 16px이므로 시각적 표현이 달라진 것일 뿐, 실제 크기가 변경되지는 않는다.

이렇듯 px로 설정된 모든 사이즈는 고정적이며, 해상도에 따라 크거나 작게 보일 수 있지만 이는 시각적 표현일 뿐 실질적인 크기가 변경되지 않는다고 볼 수 있다.

브라우저의 텍스트 확대/축소 기능

일부 브라우저에서 텍스트 자체를 확대/축소할 수 있는 기능을 제공하며, 보통 Cmd + '+' 버튼으로 사용할 수 있다. 이 기능은 픽셀 자체를 부풀리는 기능이므로 돋보기를 가져다 대는 행위와 비슷하게 생각하면 된다. 이 기능은 px, rem, em, % 설정과 관련이 없으며, 지금 보이는 픽셀 자체를 부풀리므로 고정적인 단위인 px로 설정해도 크게 보이거나 작게 보인다.

상대 단위 em, rem, %

상대적인 단위로, 어떤 값에 의해서 크기가 변하는 특징을 가진 단위들이다. em은 부모 요소의 font-size 값에 따라 그 값이 정해진다. 예를 들어 p 태그를 감싸는 div 엘리먼트의 font-size가 16px라고 가정하면 1em의 값은 16px이 되고, 18px면 1em은 18px가 된다.

rem은 em과 마찬가지로 기준에 의해 값이 정해지는데, root 요소 즉, html 엘리먼트의 font-size로 값이 결정된다. html 엘리먼트의 font-size가 16px이면 어디에 위치해 있든 내부 엘리먼트의 1rem은 16px로 결정된다. 번외로 html 엘리먼트의 font-size를 rem으로 설정하는 것은 권장되지 않으며, 기준이 기준을 정의하는 꼴이라 혼동을 줄 수 있다. 또한 %를 지정할 수도 있는데 이 방식이 많이 권장된다. font-size를 62.5%로 설정하면 rem을 계산하기 수월해진다. 16px을 표현하고 싶으면 1.6rem과 같이 사용하거나, 24px를 표현하고 싶으면 2.4rem으로 설정하는 등 rem 계산이 편리하다.

%는 font-size 값에는 잘 사용하지 않지만(기준을 잡을 때 제외), em과 동일하게 부모 요소를 기준으로 값이 결정되는 특징을 가지고 있으며 주로 해상도에 따라 레이아웃이 변경되어야 하는 부분에 많이 사용된다.

브라우저의 글꼴 크기 변경 기능

앞서 정리했듯 px는 절대적인 단위라 그 값이 외부 요인에 의해 변경되지 않는다. 브라우저의 글꼴 크기 변경(중간, 크게, 아주 크게 등) 시에도 마찬가지인데, 이는 시력이 좋지 않은 사용자가 글씨를 크게 보기 위해 설정했을 때 대응이 되지 않을 뿐만 아니라, rem과 혼용할 경우 레이아웃이 깨질 수 있어 웹 접근성을 해친다고 볼 수 있다. 따라서 px를 사용하는 것은 웹 접근성 관점에서 좋은 방법이 아니다.

브라우저 글꼴 크기 변경 기능은 html의 기준 사이즈를 변경하는 역할을 한다. 크롬을 기준으로 설명하면 보통 4의 배수를 사용하여 8, 12, 16, 20, 24 (아주 작게, 작게, 중간, 크게, 아주 크게) 옵션이 있다. 만약 html의 기준을 87.5%로 결정하고 크롬에서 아주 작게(8px)로 설정한 경우, 기준 값은 8 x 0.875 = 7px가 된다.

기준이 변경되어야 하는 경우

피그마 자체 설정에서는 rem을 직접 사용할 수 없어서 디자이너가 전달해준 px 기반의 디자인 토큰 값을 rem으로 변경해야 하는데, 이 과정이 번거로울 때가 있다.

html {
  font-size: 87.5%;
}

프로젝트가 14px 기반으로 되어 있어서 87.5%로 설정했다. 이때 전달받은 변수 값을 모두 14로 나누어야 하는 상황이다.

:root {
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  ...
}

14로 나누면 다음과 같다.

:root {
  --spacing-1: 0.2857rem;
  --spacing-2: 0.5714rem;
  --spacing-3: 0.8571rem;
  ...
}

소수점 4자리까지만 표현했지만, 실제로는 더 길어질 수 있다. 이 값이 몇 px를 의미하는지 한눈에 파악하기 어렵고 가독성도 좋지 않다. 변수명을 바꿔서 전달해달라고 할지 고민하던 중, calc 함수를 사용하여 계산식을 그대로 노출해 보면 어떨까 싶었다.

:root {
  --spacing-1: calc(4 / 14 * 1rem);
  --spacing-2: calc(8 / 14 * 1rem);
  --spacing-3: calc(12 / 14 * 1rem);
  ...
}

이렇게 하니 훨씬 깔끔해졌다. 앞의 숫자가 픽셀 값이라는 것을 명시적으로 알 수 있고, 소수점을 길게 나열하는 것보다 더 나은 표현 방식이라고 생각한다. 이제 이 설정을 Tailwind의 @theme 블록으로 옮기면 된다.

--spacing으로 시작하는 변수는 Tailwind가 알아서 처리하여 m-${var}, p-${var} 등으로 만들어주므로 편리하게 사용할 수 있다.