[iOS] Custom Font 사용에 따른 Text 위치 보정

앱을 개발하다보면 시스템 폰트가 아닌 폰트를 사용하는 경우가 있습니다.

Apple에서 제공해주는 Preinstalled Font가 될수도 있고 서드파티에서 제공하는 폰트가 될수도 있습니다.

일반적으로 시스템 폰트를 사용하는경우는 UILabel등에서 우리가 원하는대로 텍스트가 위치하지만

이외의 경우에는 폰트마다 Baseline이 달라지기때문에 시스템폰트와는 다르게 텍스트가 위치하는 경우가 있습니다.

아래는 해당 예시입니다.

 

아래 UILabel중 좌측은 AppleSDGothicNeo-Bold이고 우측은 일반 시스템 폰트입니다.

Width, Height는 모두 동일하구요.

묘하게 좌측 텍스트가 위쪽에 붙어있는 것을 알수있는데 이는 해당 폰트의 Baseline이 시스템폰트보다 약간 위쪽에 잡혀있기 때문입니다.

이는 폰트 특성이기 때문에 한글이 아닌 영어로봐도 동일합니다.

일반적으로 Layout을 구성할때 Auto-Layout을 사용한다면 상대적으로 A뷰는 B뷰의 CenterY에 위치한다 등의 표현을 종종쓰는데

이런경우 텍스트가 기준점이 되는 뷰보다 살짝 위에 위치하여 보기에 이상한 UI가 될수있습니다.

폰트의 Base자체를 수정하는것은 어려워보이므로 UILabel의 padding을 적당히 조절하는 방법을 쓰는게 나아보입니다.

(UILabel의 경우 자체적으로 padding을 주는 기능이 없으므로 PaddingLabel이라는 클래스를 정의하시면 됩니다.)

참고 : https://stackoverflow.com/questions/27459746/adding-space-padding-to-a-uilabel

 

 

아래는 Font를 구성하는 스니펫들인데,

빨간줄로 그어져있는 Baseline이 폰트마다 다르기 때문에 위와같이 폰트들의 중앙위치가 변경됩니다.

폰트마다 정확히 가운데에 위치시키는 방법을 찾지못하여 Padding을 주기로 하였는데

StackoverFlow에서 뒤져보니 간단하게 구현하는 방법은 'Ascent - Capheight'를 하는것으로 보여집니다.

모든 폰트에 대해서 적용이 되는지는 모르겠으나 

일단 Ascent는 Baseline으로부터 Font 소문자의 가장높은부분까지의 길이고

Capheight는 Baseline부터 Font 대문자의 가장높은부분까지의 길이입니다.

아무래도 위 방법보다는 수동으로 적당히 계산하여 패딩을 주는게 나아보입니다.

어쨌든 위와같이 적용하면 다음과같이 보여집니다.

패딩음 줌으로서 UILabel의 Height는 조금 커졌지만 폰트의 Alignment는 중앙으로 된것을 볼수있습니다.