사용자 인터페이스(UI) 디자인에서 글꼴 선택은 단순한 미학을 넘어 기능적인 중요성을 가집니다. 최근 UI 글꼴의 표준처럼 여겨지는 '인터(Inter)' 폰트가 사랑받는 이유와 함께, 이를 대체할 글꼴을 고를 때 반드시 고려해야 할 두 가지 핵심 기준이 제시되었습니다. 바로 '캡-센터드 수직 메트릭스(cap-centered vertical metrics)'와 높은 '엑스-하이트(x-height)'입니다. 이 두 가지 특성을 갖춘 글꼴은 UI 컴포넌트 내에서 텍스트와 아이콘이 별도의 수동 보정 없이도 완벽하게 정렬되도록 돕습니다.
첫 번째 기준인 캡-센터드 수직 메트릭스는 글자 상자(em box) 안에서 대문자의 윗부분 여백과 기준선(baseline) 아래 여백이 동일한 상태를 의미합니다. 이 구조를 가진 글꼴은 버튼 안에 배치했을 때 대문자가 시각적으로 상자의 중앙에 놓이며, 왼쪽에 아이콘이 있을 경우 아이콘과 첫 대문자의 중심이 자연스럽게 맞춰집니다. 반면, 수직 메트릭스가 치우친 글꼴은 텍스트가 위나 아래로 쏠려 보여, 디자인 시스템에서 글꼴 크기나 컴포넌트 종류가 늘어날 때마다 복잡한 패딩(padding) 값을 수동으로 조정해야 하는 번거로움을 초래합니다. 두 번째 기준인 높은 엑스-하이트는 소문자 본체(ascender와 descender를 제외한 부분)의 높이가 대문자 높이의 최소 70%, 이상적으로는 75% 정도인 것을 권장합니다. 엑스-하이트가 낮으면 대문자 아래에 소문자들이 매달린 것처럼 보여 단어 전체가 아래로 처져 보일 수 있습니다. 인터, 샌프란시스코(San Francisco), 이노베이터 그로테스크(Innovator Grotesk), 유니버설 산스(Universal Sans) 등이 이 두 조건을 잘 만족하는 대표적인 글꼴로 꼽힙니다.
이러한 글꼴 선택 기준은 UI 디자인의 효율성과 일관성을 크게 향상시킵니다. 캡-센터드 수직 메트릭스와 높은 엑스-하이트를 갖춘 글꼴을 사용하면 디자이너는 버튼, 입력창, 메뉴 등 반복되는 UI 컴포넌트에서 텍스트 정렬을 위해 수많은 수동 조정을 할 필요가 없어집니다. 이는 디자인 시스템을 간결하게 유지하고 유지보수 비용을 절감하는 데 기여합니다. 또한, 사용자는 시각적으로 안정적이고 일관된 UI를 경험하게 되어 전반적인 사용성이 개선됩니다. 현재 CSS의 '텍스트-박스-트림(text-box-trim)' 속성으로 수직 메트릭스를 보정할 수 있지만, 파이어폭스(Firefox) 미지원 등 브라우저 호환성 문제가 남아있고 엑스-하이트 자체를 바꿀 수는 없으므로, 처음부터 적합한 글꼴을 선택하는 것이 가장 효과적인 해결책입니다.