Inter 대신 UI 글꼴을 고르는 두 가지 기준

Inter 폰트가 UI에서 쓰기 편한 이유는 단순히 깔끔해서가 아니라, 대문자 높이가 글자 상자 중앙에 놓이는 vertical metrics를 갖췄기 때문 글자 상자의 위아래 여백이 균형을 이루면 버튼 안의 텍스트가 자연스럽게 중앙에 놓이고, 아이콘과도 별도 보정 없이 정렬됨 소문자 높이인 x-height도 대문자의 70~75%, 이상적으로는 75% 정도여야 단어 전체가 한 덩어리처럼 보여 중앙 정렬이 자연스러움 CSS의 text-box-trim으로 vertical metrics는 보정할 수 있지만 x-height는 바꿀 수 없고, Firefox 미지원으로 아직 모든 환경에 적용하기 어려움 Inter와 같은 두 조건을 만족하는 대안으로 Innovator Grotesk, Universal Sans, Plain, SwissNow 등 10개 글꼴을 제시함 깔끔한 산세리프만으로는 부족한 이유 UI 글꼴은 본문을 읽기 좋게 만드는 것뿐 아니라 버튼, 입력창, 메뉴와 아이콘 안에서 별도 조정 없이 정렬되는지가 중요함 비슷하게 생긴 neo-grotesk 계열이라도 글꼴 내부의 vertical metrics가 다르면 같은 line-height와 padding에서 텍스트가 위나 아래로 치우칠 수 있음 이를 보정하려고 위아래 padding을 다르게 주면 글자 크기와 컴포넌트 크기가 달라질 때마다 값을 다시 조정해야 함 UI 글꼴을 고를 때 다음 두 가지를 먼저 확인할 것을 권장 대문자 높이가 글자 상자의 중앙에 놓이는 cap-centered vertical metrics 소문자가 대문자 높이의 70~75%를 차지하는 높은 x-height 두 조건은 독립적인 장점이 아니라 함께 작동함 cap-centering이 단어의 기준 위치를 잡음 높은 x-height가 나머지 소문자를 그 기준에 가까이 채워 단어 전체를 중앙에 놓인 것처럼 보이게 함 버튼과 아이콘 정렬을 결정하는 vertical metrics cap-centered vertical metrics는 글자 상자 안에서 대문자 윗부분의 여백과 baseline 아래의 여백이 같은 상태 이 구조를 가진 글꼴은 버튼 안에 넣었을 때 대문자가 상자의 시각적 중앙에 놓임 왼쪽에 아이콘이 있으면 아이콘과 첫 대문자의 중심도 자연스럽게 맞음 디자인 시스템에서는 위아래에 동일한 spacing token을 사용할 수 있음 .button { padding: var(--space-v) var(--s...