[Text 시리즈 2] Font Metrics 와 Glyph metrics

👋 들어가기 전

이전 시리즈

https://hamp.tistory.com/236

[Text 시리즈 1] Typographical Concepts

 

텍스트 시리즈 두번 째는 바로 Metrics에 대해 알아보자.

실제 코드를 해볼 경험은 많지 않지만, Metrics을 활용해 섬세한 차이를 벌릴 수 있다.

 

텍스트에 예민한 유저나 디자이너에게 이쁨을 받기위해 알고있으면 좋은 정보일 것 같다.

---

🏁 학습할 내용

• Font Metrics
• Glyph Metrics
• Advance width와 Kerning
• 수직 구성요소 관계 정리

---

🖋️ Font Metrics

✅ 정의

Font Metrics는 문자와 줄의 레이아웃을 계산하는데 필요한 정보다.

📏 단위

Font Metrics의 단위는 Point으로, 1 Point = 1/72 인치에 해당한다.

📂 구성 요소

먼저 관련 그림과 함께 각 요소들을 의미와 관계를 살펴보자.

 

속성명	설명
ascent	기준선(baseline)에서 글꼴의 가장 높은 지점까지의 거리
descent	기준선에서 글꼴의 가장 낮은 지점까지의 거리 (음수 값)
leading	줄 간의 기본 간격 (기본 줄 간격 조정용)
capHeight	대문자 높이 (예: “H”의 높이)
xHeight	소문자 “x”의 높이 (소문자 기준 높이)
Baseline	문자의 기준선 = descent - leading
lineHeight	한 줄의 전체 높이 = ascent + |descent| + leading
Advancement	글리프가 그려진 후, 커서가 다음 글리프로 이동할 거리(글자가 차지하는 공간)
Bounding Rectangle	글리프가 실제로 차지하는(그려지는) 픽셀 영역으로, 글리프 외곽을 딱 감싼는 최소환의 사각형
Italic Angle	이탤릭 각도로, 길어진 각도를 의미,  음수는 오른쪽으로 기울어짐을 나타냄

🔎 중요한 이유

• 커스텀 텍스트 엔진을 만들 때, 정확한 텍스트 배치를 위해
• 줄 간격, 텍스트 정렬, 텍스트 박스 크기등을 결정할 때 사용
• 글꼴 마다 ascender와 descender가 다르기 때문에, 시각적으로 일괄된 레이아웃을 위해

---

🔠 Glyph Metrics

✅ 정의

Glyphs는 character의 시각적 표현이라고, 이전 시간에 배웠다.

Glyph metrics는 이런 글리프가 어떻게 텍스트 라인 내에서 배치되는 지를 결정한다.

📂 구성 요소

위에서 살펴본 Font Metrics와 비슷한 부분이 많지만, 한번 더 정리해보자.

속성명	설명
ascent	기준선(baseline)에서 글꼴의 가장 높은 지점까지의 거리
descent	기준선에서 글꼴의 가장 낮은 지점까지의 거리 (음수 값)
Advance Width	현재 글리프 기준에서 다음 글리프의 origin까지 거리. 일반적인 글자 간 간격 기준
Left-side Bearing (LSB)	글리프 도형 왼쪽 끝과 origin 간 거리. 음수일 수도 있음
Right-side Bearing (RSB)	글리프 도형 오른쪽 끝과 advance width 끝 지점 간 거리. 역시 음수일 수 있음
Baseline	문자의 기준선 = descent - leading
Bounding Box	글리프가 실제로 차지하는(그려지는) 픽셀 영역으로, 글리프 외곽을 딱 감싼는 최소환의 사각형

🔎 LSB와 RSB는 어디에 쓰일까?

• 글자 간격 조정(kerning) 계산에 활용됨
• 텍스트 렌더링 시 정렬 정확도를 높임

---

↔️ Advance width와 Kerning

Advance width는 수평 텍스트에서 각 글리프 사이의 기본적인 간격이다.

이건 폰트에서 미리 정의된 기본 간격이다.

 

하지만 우리는 실제 글자 간격을, Kerning이라는 개념으로 조절해왔다.

 

그러면 Kerning은 뭘까 ??

여기서 W와 A 사이를 주목해서 봐보자. 첫번 째 줄은 Advance witdth만으로 거리를 벌린 형태

자세히보면 W의 오른쪽 Serif 끝부분이, A의 왼쪽 Serif를 침범한다.

 

이 때 자연스러운 간격을 주기위해 Kerning을 사용한다.

 

즉, Kerning은 어떤 글자 조합(W와 A 같은)이 Advance witdth만으로 어색할 때, 조절하는 사이 간격이다.

 

정리하면

Advance width는 폰트 고유의 값이므로 글자 간격을 조절할 때, Kerning을 건드릴 수 밖에 없는게 바로 이 때문이다.

---

↕️ 수직 구성요소 관계 정리

지금까지 살펴본 수직 구성요소는 다음과 같다.

• Ascent
• Descent
• Font Size
• Leading (Linegap)
• Line Height

관계식이 있는 구성 요소는 다음 그림으로 한번에 살펴볼 수 있다.

 

Font Size = |Ascent| + |Descent| 

Line Height = |Ascent| + |Descent| + |Leading|

---

😀 소감 및 마무리

이번 시간은 글자의 위치, 크기, 정렬등에 꼭 필요한 정보인 Metrics에 대해 알아봤다.

 

다음 시간에는 실제 iOS에서 글자가 어떻게 랜더링되는 지, 지금까지 배운 개념을 어떻게 이용하는 지 배워보자.

---

출처

https://sujinnaljin.medium.com/swift-label의-line-height-설정-및-가운데-정렬-962f7c6e7512

[Swift] label의 Line Height 설정 및 가운데 정렬

https://developer.apple.com/library/archive/documentation/StringsTextFonts/Conceptual/TextAndWebiPhoneOS/CustomTextProcessing/CustomTextProcessing.html

Using Text Kit to Draw and Manage Text