최근, 스포카 한 산스 네오를 버튼에 사용해보았다.
그랬더니 아래와 같은 모양새가 나왔다.
뭔가 이상하다.
뭐가 이상할까?
버튼 안의 글자가 조금 위로 올라가 있는 것 같지 않나?
그래서 다시 한번 적용한 값을 확인해봤다.
분명히 버튼 안에 글자를 상하좌우 가운데로 정렬하였다.
내가 사용한 프로그램은 피그마여서 행간이 폰트 중앙을 기준으로
위아래 동일하게 적용된다.
(CSS 기준 행간)
그런데도 폰트 자체가 위로 올라가 보여,
타 폰트와 동일한 값을 적용하여 비교해봤다.
스포카 한 산스 네오와 그 전 버전인 스포카 한 산스, 노토 산스 KR을 비교한 모습이다.
폰트 크기, 행간, 자간, 상하좌우 간격 모두 동일하게 적용했다.
그럼에도 스포카 한 산스 네오만이 위쪽으로 치우쳐보인다.
폰트 고유의 특징인 것이다.
폰트간 왜 이런 차이가 발생할까?
폰트마다 기준선이 다 다르기 때문이다.
영문에서는 기준선을 baseline이라 부르는데, 대소문자가 서있는 바닥이라고 생각하면 된다.
기준선(baseline)에서 대문자가 끝나는 윗선(capline)까지의 높이를 cap height이라고 하며,
소문자가 끝나는 윗선(meanline)까지의 높이를 x-height이라고 한다.
이 요소들이 폰트의 위치를 결정하는데,
폰트마다 다 다르며, 같은 폰트여도 영문과 한글이 다르다.
이렇게 같은 폰트여도 한글과 영문의 위치가 다르고, 대문자와 소문자의 높이가 다르다.
노토 산스 KR보다 스포카 한 산스 네오가 훨씬 기준선이 높다.
그래서 같은 마진과 행간을 적용해도 후자가 더 올라가있다.
반면, 소문자는 기준선이 낮은 노토 산스 KR보다 더 이상적인 위치이다.
그렇기 때문에 자신이 디자인할 컨텐츠에 대문자/소문자/한글/숫자 중 무엇이 주로 쓰이는가에 따라
그에 맞는 폰트를 사용하는 것이 좋다.
적합한 폰트를 사용하지 않는다면,
폰트의 고유 높이에 맞춰 상하 간격을 육안으로 다르게 적용해야 하는 불편함이 따를 것이다.
'디자이너가 알아야 할 것들 > UI·UX Design' 카테고리의 다른 글
UI·UX 디자인 스터디 - 제품 개발 프로세스와 포지션 (0) | 2021.06.06 |
---|---|
UI·UX 디자인 스터디 - UI·UX란 무엇인가? (0) | 2021.06.03 |
UI·UX 디자이너를 위한 가이드 - 디바이스와 밀도 (깨지는 이미지) (2) | 2020.12.21 |
UI·UX 디자이너를 위한 가이드 - AOS와 IOS 밀도 (0) | 2020.12.21 |
UI·UX 디자이너를 위한 가이드 - DP·SP와 디스플레이 (0) | 2020.12.21 |