웹과 가독성(2) _ 글꼴의 크기

교과서를 중심으로 한 국내의 논문들을 보았을 때 인쇄매체에서 적당한 글꼴 크기는 10포인트에서 12포인트를 전후하여 나타납니다. 이러한 연구에서 중요한 것은 눈과 활자의 거리인데, 인쇄매체를 통한 독서의 경우 정상적인 독서거리는 30에서 35cm정도입니다. 연구자들은 이 거리에서 적당한 글꼴크기를 8 ~ 14포인트로 권장하고 있습니다. 웹은 어떨까요? 웹은 디스플레이와 눈과의 거리, 매체의 종류 등 일반적인 독서와는 다른 점이 많습니다. 차근차근 보도록 하겠습니다.

브라우저에서는 나름 훌륭한 디폴트값을 제공하고 있습니다. 바로 16포인트. 예전에는 많은 개발자와 디자이너들이 이 수치에 의문을 갖지 않았습니다. 16포인트의 글꼴은 사실 가독에 크게 불편한 크기가 아니기 때문입니다. 하지만 시간이 흘러 디스플레이의 종류는 너무나 다양해졌습니다. 사용자는 손바닥만한 모바일 기기를 이용해 당신의 웹 페이지를 볼 수도 있고, 혹은 50인치의 대형 모니터를 두고 의자에 푹 파묻혀 볼 수도 있습니다. 이런 상황에서도 16포인트가 적절히 대응할 수 있을지는 의심스럽습니다.

국내 논문에서도 글꼴의 크기와 획폭은 가독성에 크게 영향을 미치는 요소로 지적되고 있습니다. Does print size matter for reading? A review of findings from vision science and typography¹Gordon E. Legge; Charles A. Bigelow, 2011에 실린 그래프를 잠깐 살펴보겠습니다.

visual arc가 약 0.3에서 0.4 사이일때 가독성은 최대치에 이릅니다.

visual arc가 0.3 정도가 되면 가독성이 상당히 높아지는 걸 확인할 수 있습니다. 그런데 잠깐, 내가 사용하는 폰트의 visual arc가 0.3에서 0.4 사이에 있는지 어떻게 알 수 있을까요? 일단은 visual arc가 무엇을 의미하는지부터 알아보겠습니다.

일정한 높이를 가진 물체를 어떤 거리를 두고 보았을 때, 거리와 높이로 일정한 각을 그리면 위에 있는 그림과 같은 호를 얻을 수 있습니다. 이를 일컬어 visual arc라고 합니다. 다시 말해서 글꼴의 크기와 눈과 디스플레이상의 거리를 통해서 측정값을 얻을 수 있습니다. 차근차근 구해보겠습니다.

글꼴의 크기

그래프의 x축을 보면 x-height라는 단어가 보입니다. 이것은 뜻 그대로 소문자 x의 높이를 의미합니다. 보통 글꼴의 크기를 측정할 때 바로 이 x-height를 많이 씁니다. 예를 들면 16포인트의 글꼴의 x-height가 0.450이라고 하면 폰트의 높이를 7.2 정도로 취급하게 됩니다. x-height는 약 0.36에서 0.55 사이이며 평균적으로 0.45의 값을 가집니다. 소문자 x의 높이로 글꼴의 크기를 취급하는 이유는 약 94.5%의 본문이 소문자로 이루어져 있기 때문²Mewhort, 2004이며, 96%의 소문자가 소문자 x의 높이를 기준으로 하기 때문입니다. 그러나 한글에서는 조금 다릅니다. 왜냐면, 한글은 대문자와 소문자가 없으니까요. 폰트의 x-height가 아닌 capital height를 기준으로 하겠습니다.

예를 들어봅시다

이 블로그 본문에서 사용하고 있는 폰트인 이롭게 바탕체를 폰트포지에서 열어보았습니다.

x-height는 0.5, capital height는 0.7입니다. 글꼴의 크기가 16포인트라면, 7.2로 취급하는 것이 아니라 대문자와 똑같이 11.2가 됩니다.

디스플레이

덧붙여 디스플레이에서 사용하고 있는 픽셀은 디바이스별, 제품별로 천차만별입니다. 디스플레이에 표시되는 텍스트도 이에 비례하여 작아지거나 커집니다. 따라서 ppi(dpi) 값을 쓰도록 하겠습니다. 대표적인 ppi값만 해도 몇가지가 됩니다. 14인치 800 X 600 모니터와 포토샵 기본값인 72ppi부터 레티나 디스플레이의 300ppi까지 다양합니다. 일반적인 27인치 QHD³2560 X 1440 모니터는 108.8의 ppi를 갖지만 27인치 FHD⁴1920 X 1080라면 81.6의 ppi를 갖습니다. 32인치 QHD이거나 24인치 FHD라면 91.79 정도의 ppi를 갖겠네요. 여기서는 많이 사용되는 이 디스플레이들의 평균값 94.1 정도를 사용하겠습니다.

레티나, 혹은 모바일의 경우 (pixel ratio가 1을 초과할 경우)

pixel ratio가 1인 일반 모니터와 다르게 레티나와 최신 스마트폰의 경우에는 ppi를 pixel ratio로 나눠주면 됩니다. 아이폰X의 경우 ppi는 458이며, pixel ratio가 3이기 때문에 눈에 보이는 픽셀 하나에는 9개의 디바이스 픽셀이 사용됩니다. 오른쪽에 있는 pixel ratio가 2인 아이폰8보다 선명하지만 크기는 엇비슷합니다. 왜냐하면 논리적 ppi가 비슷하기 때문입니다⁵현재는 디바이스가 표현할 수 있는 픽셀 단계가 논리적 픽셀보다 위에 있습니다.. ppi를 pixel ratio로 나누면 아이폰X는 152.67, 아이폰 8은 163입니다. 차이가 약 10 정도밖에 나지 않습니다. 이 글에서는 글꼴의 선명도가 아닌 글꼴의 크기를 논하므로 논리적 ppi를 사용합니다. 즉, ppi를 pixel ratio로 나눈 값이 최종 결과값이 됩니다.

거리

모니터와 눈의 적정거리는 모니터의 크기와 해상도에 따라 달라지지만 일반적으로는 약 60~70cm입니다. 이 거리를 pt로 변환해서 쓰겠습니다. 적정거리의 중간값인 65cm로 잡고 이를 포인트로 변환하면 약 1842.52pt입니다.

계산해봅시다

이롭게 바탕체와, 제가 사용하고 있는 델 U2715h를 기준으로 하겠습니다. 실제 높이를 구하기 위해서 한글 글꼴크기 $x$ 와 $x$ 의 capital height인 0.7 그리고 디스플레이의 평균 ppi인 94.1을 델 U2715h의 ppi인 109로 나눈 값을 곱합니다.

$0.7 \times x \times \frac{94.1}{109}$

이 값이 우리가 구하고 싶은 글꼴의 실제 높이입니다.

눈이 그려진 삼각형 그림을 기억하시나요? 우리는 지금 거리와 높이를 알고 있습니다. 높이는 약 $0.6x$ 이고 거리는 1842.5pt입니다. 높이와 거리를 바탕으로 각도를 재겠습니다. 탄젠트의 역, 아크탄젠트 함수 Math.atan2(0.6, 1842.5)를 사용합니다.

약 0.00032564449가 나옵니다. 이 아크탄젠트값은 라디안값입니다. 각도를 구하기 위해 아크탄젠트값에 180 / Math.PI를 곱합니다.

라디안값은 반지름의 길이가 r일때 호의 길이가 r이 되는 중심각을 1라디안이라고 합니다. 원을 360등분하는, 우리에게 친숙한 60등법으로는 약 57.2958도가 됩니다. 360도의 원은 호도법으로 약 6.2832라디안이며 이는 $2\pi$ 와 같습니다.

원의 둘레는 $2\pir$ 입니다. 그러므로 중심각이 $1^\circ$ 일때 호의 길이는 $2\pir$ 을 360으로 나눈 값이 됩니다. $\pi r \div 180$ 입니다. 1라디안일 때를 $x^\circ$ 라고 하면, 1라디안은 $\pi r \times x \div 180$ 입니다. 그런데 여기서 1라디안은 반지름과 호의 길이가 같으므로 $\pi r\times x \div 180 = r$ 입니다. 양변을 $r$ 로 나누면 $\pi x \div 180 = 1$ 이며 $x$ 는 $180 \div \pi$ 입니다. $x^\circ$ 는 1라디안과 같기 때문에 1라디안은 $(180 \div \pi)^\circ$ 입니다.

그러면 라디안과 각도의 변환 공식을 다음과 같이 구할 수 있습니다.

$degree = radian \times \frac{180}{\pi}$

$radian = degree\times \frac{\pi}{180}$

약 0.018658이 나옵니다. 여기에 적절한 폰트값 $x$ 를 곱하면 0.3 ~ 0.4 값이 나와야합니다.

0.3을 0.018658로 나누면 약 16, 0.4를 0.018658로 나누면 약 21입니다. 즉, capital height가 0.7이며 디스플레이와의 거리가 65cm이고 디스플레이의 ppi가 109이면 16포인트에서 21포인트 사이에 있는 폰트의 가독성이 가장 높다고 말할 수 있습니다.

이 계산을 매번 하기는 너무 귀찮습니다. 그래서 자바스크립트로 간단한 계산기를 만들었습니다.

See the Pen rJbzae by J.hyeonjin (@Slime) on CodePen.light

잠시만요, 검증해 볼까요?

국내의 글꼴 크기와 가독성에 대한 연구를 살펴보면 10 ~ 14포인트가 가독성이 가장 높은 것으로 나타납니다. 8 ~ 10포인트가 가독성이 가장 높다는 연구⁶유정미, 2002, 12포인트⁷김창희, 1996, 10 ~ 14포인트⁸정찬섭, 1993 등인데요, 위에서 구한 공식이 인쇄물에서도 적용되는지 확인해 보겠습니다. 임의의 한글 폰트의 capital height가 0.7이라고 하고 독서거리는 보통 30 ~ 35이므로 32.5를 적용하겠습니다. 인쇄물의 경우 신문은 70에서 90dpi, 소설책 용지의 경우에는 150~200dpi를 가집니다. 여기서는 150dpi를 적용합니다.

구한 식에 0.7, 32,5cm, 150dpi를 넣어주면 적정 최소크기 11포인트, 적정 최대크기 14.6포인트가 나옵니다. 연구자들이 권장하는 글꼴 크기와 큰 차이가 없는 것을 확인할 수 있습니다.

Post Views: 15,788