[UX 인사이트] 보기 좋은 서체와 x의 높이

x-height를 기준으로 살펴본 웹에 적합한 서체

웹에서 가독성이 높은 서체는 어떤 특징이 있을까요? 가독성을 구성하는 여러 변수들이 있지만 오늘은 x의 높이(x-height)에 대해 이야기해보려고 합니다.

서체의 크기는 위와 같은 형태로 크기를 표현합니다. 아센더와 디센더의 차이, x 높이의 차이에 따라 사람은 글을 읽기 쉽거나 어렵게 느끼게 됩니다. 그 중에서도 x높이는 영어 알파벳에서 가장 작은 높이의 기준이 됩니다. 그러다보니 x높이가 상대적으로 적은 경우 웹에서 글씨가 잘 보이지 않는 문제를 야기합니다.

그럼 위의 내용이 사실인지 대표적으로 웹에서 사용되는 서체를 살펴봅니다.

Roboto와 Noto Sans의 경우 전세계적으로 가장 많이 사용되는 서체답게 x 높이가 큽니다. 정확한 반대 예는 아니지만(세리프와 산세리프 차이가 더해졌으니) Apple Chancery는 x 높이가 비교적 낮고, 어센더와 디센더가 길어 시선이 위아래로 퍼지게 됩니다.