화면을 그리다보면 하나의 문장 속에 숫자, 한글, 영문 또는 강조하고 싶은 단어를 다르게 폰트를 주었던 적도 있었다. 무언가 깊은 뜻이 있으니깐 이렇게 넣었겠지? 하면서 넣었지만 실제로 디바이스에서 적용된 화면을 보면 라인이 맞지 않는 경우가 많았다. iOS와 안드로이드, 한글과 영문마다 왜 다르게 그려지는 걸까? 같은 폰트를 적용했는데?
그래서 의식의 흐름대로 찾아보고 이해해보려고 적어본다
글자? 글꼴?
글자: 말을 적는 시작적인 부호
활자: 인쇄용 글자
글씨: 쓴 글자
~체: 무언가의 일정한 모양새
~꼴: 개별적인 모양새
글자체(letter style)
활자체(type style)
글자꼴(letter form)
활자꼴(typeface)
?????????????
폰트
Type - 문자 그 자체
Typeface - Apple SD Gothic, SF Pro Text와 같은 서체 그 자체!
Font Family - Apple SD Gothic이라는 글꼴에 Regular, Bold, Light 등 여러가지 스타일 묶음 (= 글꼴 집합)
Font - ????
그렇다면 폰트는 글꼴은 글꼴인데 하나의 스타일을 갖고 있는 것인가?
Apple SD Gothic-Regular라는 폰트가 있고, Apple SD Gothic-Bold라는 폰트가 있다.
이들을 묶어서 Font Family라고 하는건데...
텍스트 스타일을 넣다보면 fontFamily에 그룹으로 넣지 않고 Apple SD Gothic-Regular라고 폰트를 쓰는데 대체 어디서부터 혼란인걸까...
찾다보니 C#으로 폰트를 생성하는 예시를 찾았다
FontFamily fontFamily = new FontFamily("Arial");
Font font = new Font(
fontFamily,
16,
FontStyle.Regular,
GraphicsUnit.Pixel);
Arial이라는 FontFamily로 16px에 스타일 Regular를 갖고 있는 폰트를 생성하였다.
글꼴 + 크기 + 스타일들을 포함하는 것이 폰트이다.
그럼 피그마, 제플린에서 디자인 가이드에 올라온 FontFamily에 적힌 Apple SD Gothic이랑 SF Pro Text 것들은 Typeface라고 하면 되는 건가?
아니네... Typeface는 FontFamily + FontWeight + FontStyle로 나타내어진다.
??????이게 폰트라며🙀
다시 정리가 필요하겠다
Font? Typeface?
Typeface를 서체라고 하면 Font는 글꼴이다.
Apple SD Gothic은 Typeface이다.
Apple SD Gothic Light나 Apple SD Gothic Bold가 Font이다.
그럼 Typeface가 특정 Font의 이름이고 Font가 Typeface의 특정 스타일을 갖고 있는 것을 말하는 것이다.. 쌍방이네..!
아주 쉬운 예시를 찾았다! Typeface를 정하고 Font를 정한다
시스템 폰트
fontFamily에 Apple SD Gothic이랑 SF Pro Text가 뭐가 다를까!
폰트를 안넣으면 iOS와 안드로이드가 각각 다르게 보이고 폰트를 같이 넣어도 한글, 영문이 다르게 보인다.
이는 선택한 글꼴이 없는 경우 또는 해당 텍스트 문자를 지원하지 않는 경우 fallback 폰트로 대체되어서 그렇다.
SF Pro Text가 한글을 지원하지 않아 fallback 폰트로 대체하는 경우이다.
iOS에서의 시스템 폰트 SF Pro가 CJK언어를 지원하지 않아서 fallback 되고 각각의 지원하는 폰트로 설정되는데, 보통 개발하면서 작성하는 언어가 한글이 메인이고 영어가 중간에 있는 형태이다보니 fallback 폰트와 SF Pro 폰트가 다르기 때문에 스타일이 당연히 다르다! 그럼 한글 + 영문 둘 다 지원하는 폰트를 설정하며 되지 않을까?
그럼 스타일을 언어마다 설정해주면 되지 않을까?
기준선
폰트가 여러개가 섞이게 되면 각자 자신만의 기준선으로 그려져서 뒤죽박죽 UI가 깨져보인다. 그 기준이 되는 기준선이 뭘까?
Baseline: 폰트의 기준선
x-Height: 소문자 x의 높이
Ascender Line: 소문자 b, d, h, i 처럼 소문자 x 위로 튀어나오는 선
Descender Line: 소문자 p, q가 Baseline 아래로 튀어나오는 선
모든 기준은 소문자 x 구나...