[iOS] 시스템 폰트

systemFont는 한글, 영어에 따라 다른 폰트가 적용되는데, 폰트 크기에 따라서도 정말 다르게 적용되는지 확인하기

시스템 폰트

iOS 9에서 처음으로 San Francisco 폰트가 시스템 폰트로 도입되었고 iOS 11부터 SF Pro라는 이름으로 전환되었음

한글은 SF Pro 폰트 파일에 포함되지 않으며 한글 영역은 대체 폰트(Apple SD Gothic Neo)로 적용됨

 

 

가변 폰트(Variable Font)

OpenType의 확장으로, 하나의 폰트 파일에 두께, 너비, 기울기, 광학 크기 등의 축(axis)을 설정해 두고, 해당 축의 값을 유연하게 조절하여 여러 스타일을 나타내는 폰트

 

광학 크기(Optical Size)

글자 크기에 따라 글자의 굵기, 폭, 자간, 세부 형태 등을 조정하여 가독성을 최적화하는 것.

예를 들어 작은 크기의 텍스트는 화면에서 선이 너무 가늘거나 복잡하게 보이지 않도록 약간 더 넓고 굵게, 큰 크기의 텍스트는 너무 두껍게 보이지 않도록 보정함

SF Pro는 폰트크기 20미만은 SF Pro Text, 20이상부터는 SF Pro Display라는 폰트를 사용하여 표현하고 있음

이렇게 크게 2가지 폰트로 나누어 optical sizing을 하고 있는것 같음

 

SF Pro Text, SF Pro Display

SF Pro Text는 20pt 미만의 작은 글씨에 사용되며 자간이 넓은 편.

SF Pro Display는 20pt 이상의 큰 글씨에 사용되며 자간이 좁은 편.

Text와 Display는 단순히 자간만 차이나는게 아니라, 획 사이의 여유공간 차이도 있음

 

직접 테스트해서 확인하기

1. SF Pro , SF Pro Display, SF Pro Text 폰트를 직접 적용할 수 있는 상태로 만들기
2. 전환이 되는지 확인

 

 

혼합 조합 (”agrfis 123 가나다라”)

• systemFont
  • 숫자, 영어 부분은 SF Pro 의 가변폰트가 적용됨
  • 한글 부분은 대체폰트인 Apple SD Gothic Neo가 적용되며 폰트크기에 따른 폰트변환은 없음

 

요약하면

• systemFont 사용시
  • 영어
    • SF Pro 의 가변폰트가 적용
      • 폰트크기 20미만은 SF Pro Text
      • 폰트크기 20이상은 SF Pro Display
  • 혼합 조합
    • 영어 부분은 SF Pro 의 가변폰트가 적용
    • 한글 부분은 Apple SD Gothic Neo가 적용
  • 한글
    • Apple SD Gothic Neo가 적용
    • 가변 폰트가 아니라서 폰트 크기가 작거나 커도 동일한 폰트가 사용됨
  • 가변폰트는 동일한 폰트를 적용했을 때와 자간 같은게 미묘하게 달라지는게 보이는데 optical sizing 적용때문으로 추측됨... 디자인 팀에서 이를 재현할 때 디자인툴 플러그인 사용해서 이부분을 빠르게 작업할 수 있다고함