타이포그래피(Typography) - 베이스라인(baseline)의 차이가 디자인의 차이로

 

 

 

 

최근, 스포카 한 산스 네오를 버튼에 사용해보았다.

그랬더니 아래와 같은 모양새가 나왔다.

 

 

스포카 한 산스 네오를 적용한 예시

 

뭔가 이상하다.

 

뭐가 이상할까?

버튼 안의 글자가 조금 위로 올라가 있는 것 같지 않나?

 

그래서 다시 한번 적용한 값을 확인해봤다.

 

 

적용한 버튼 간격과 폰트 설정 값

 

분명히 버튼 안에 글자를 상하좌우 가운데로 정렬하였다.

 

내가 사용한 프로그램은 피그마여서 행간이 폰트 중앙을 기준으로

위아래 동일하게 적용된다.

(CSS 기준 행간)

 

그런데도 폰트 자체가 위로 올라가 보여,

타 폰트와 동일한 값을 적용하여 비교해봤다.

 

 

폰트 비교 예시: 스포카 한 산스 네오(왼쪽), 스포카 한 산스(중간), 노토 산스 KR(오른쪽)

 

스포카 한 산스 네오와 그 전 버전인 스포카 한 산스, 노토 산스 KR을 비교한 모습이다.

폰트 크기, 행간, 자간, 상하좌우 간격 모두 동일하게 적용했다.

그럼에도 스포카 한 산스 네오만이 위쪽으로 치우쳐보인다.

 

폰트 고유의 특징인 것이다.

폰트간 왜 이런 차이가 발생할까?

 

폰트마다 기준선이 다 다르기 때문이다.

 

 

폰트의 기준선에 대한 예시

 

영문에서는 기준선을 baseline이라 부르는데, 대소문자가 서있는 바닥이라고 생각하면 된다.

 

기준선(baseline)에서 대문자가 끝나는 윗선(capline)까지의 높이를 cap height이라고 하며,

소문자가 끝나는 윗선(meanline)까지의 높이를 x-height이라고 한다.

 

이 요소들이 폰트의 위치를 결정하는데,

폰트마다 다 다르며, 같은 폰트여도 영문과 한글이 다르다.

 

 

같은 폰트지만 다른 기준선과 위치

 

이렇게 같은 폰트여도 한글과 영문의 위치가 다르고, 대문자와 소문자의 높이가 다르다.

 

 

노토 산스 KR과 스포카 한 산스 네오 비교

 

노토 산스 KR보다 스포카 한 산스 네오가 훨씬 기준선이 높다.

그래서 같은 마진과 행간을 적용해도 후자가 더 올라가있다.

 

 

소문자 비교

 

반면, 소문자는 기준선이 낮은 노토 산스 KR보다 더 이상적인 위치이다.

 

그렇기 때문에 자신이 디자인할 컨텐츠에 대문자/소문자/한글/숫자 중 무엇이 주로 쓰이는가에 따라

그에 맞는 폰트를 사용하는 것이 좋다.

 

적합한 폰트를 사용하지 않는다면, 

폰트의 고유 높이에 맞춰 상하 간격을 육안으로 다르게 적용해야 하는 불편함이 따를 것이다.