[Text 시리즈 1] Typographical Concepts

👋 들어가기 전

Text는 가장 기본적인 UI면서, 가장 중요한 UI라고 생각한다.

이미지가 없는 서비스는 있더라도, Text는 서비스에 필수적인 부분이다.

 

Text를 본격적으로 공부해본적이 없고, 좋은 프론트엔드 개발자가 되려면 반드시 학습하고 갈 부분이라고 생각한다.

 

그래서 당분간 학습은 Text 시리즈를 통해 차근차근 알아보자.

---

🏁 학습할 내용

• character vs glyphs
  • character란
  • glyphs란
  • character와 glyphs의 관계
• typeface와 typestyle
  • typeface란
  • typestyle란 
• font
  • font-family
  • font style
• layout manager
• text layout

---

🥊 character vs glyphs

 

개발자라면 많이 써봤던 개념이다. 글자 하나를 뜻한다고 알고있는데 정확한 개념은 생각보다
큰 차이가 있다..

 

glyphs은 뭐지? 글맆스?? 처음들어보는 개념이다.

한번 천천히 알아보자.

 

🔠 character

 

위에서 잠깐 얘기했던 것처럼 character는 글자 하나를 의미한다고 생각했다.

하지만 character는 문자 언어에서 의미를 전달하는 추상적인 단위이다,.

 

조금 생소하지만, A라는 글자에서 A가 눈에 보이는 순간 이건 character가 아니다.

 

즉, 글자를 표현할 종이, 화면이 없이, 눈을 감고 머릿속에서 A의 의미만 생각한 결과가 character이다.

 

🖥️ glyphs

 

glyphs는 "글리프"라 발음한다.

그렇다면 글리프는 무엇일까??

 

우리가 알고있던 개념이 바로 글리프다.

즉 character가 종이 또는 화면에 표시되는 순간 글리프가 되는 것

 

정확히 말하면 글리프는 화면 또는 인쇄상에 나타나는 시각적 표현이다.

아래와 같은 요소들에 따라 전혀 다른 글리프가 된다.

• 굴기
• 기울기
• serif(글꼴에서 글자 획의 끝 부분에 덧붙여진 작은 장식 선이나 획)
• 등등

 

↔️ character와 glyphs의 관계

 

정말 미묘한 관계인데 ... 일단 내가 이해한 내용대로 정리해보겠다.

일단 결론부터 말하면 1:1 대응이 아니다.

 

Ligature (합자)

합자는 둘 이상의 문자를 하나의 글리프로 결합해 자연스럽게 보이게 만든 형태이다.

위 예를 보면 2개의 글자가 합쳐져 하나의 글리프가 만들어지고 있다.

 Joined Letters (연결된 문자)

문자들이 말그대로 연결된 형태로 보이게 만든 형태이다.

 

대표적으로 필기체 또는 아랍어/ 한문에서 쉽게 볼 수 있다.

 

𝓪𝓫 한번 이 글자들의 조합은 크게 2가지 형태로 나눌 수 있다.

 

각각 개별 글리프로 단지 연결된 것처럼 보일수도 있고 또는 단일 그리프로도 인식할 수도있다.

결론

하나의 character가 여러 glyph로 나뉠 수도 있고, 반대로 여러 character가
하나의 glyph로 합자(ligature)로 표현될 수 있다.

---

✏️ Typeface와 Typestyle

 

🖌️ Typeface (서체)

 

어떤 언어의 문자에 대한 시각적, 형태적 특징의 집합이다.

Mac의 서체관리자에서 보여지는 미리보기 같은 느낌이 바로 서체다.

 

🪮Typestyle (타이포스타일)

 

typeface(서체의) 시각적 특성을 의미한다.

 

예로는 다음과 같다.

• 로만(Roman): 세로 획이 두껍고 글자가 곧게 서 있으며 세리프(장식용 꼬리)가 있음
• 이탤릭(Italic): 글자가 오른쪽으로 기울고 필기체처럼 둥근 느낌

하나의 서체는 여러 스타일을 가질 수 있다.

---

🖊️ Font(폰트)

 

폰트는 간단히 아래 속성등을 통해 character를 표현하는 글리프의 집합이다.

• size(크기)
• Typeface(서체)
• Typestyle(타이포스타일)

 

🏠 FontFamily(폰트 패밀리)

 

폰트 패밀리는 typeface는 같고 style만 다른 폰트들의 묶음이다.

 

Time는 서체이름이자 폰트 패밀리이름이고, Time Roman과 Italic은 같은 Time 폰트 패밀리에서

스타일만 다른 개별 폰트다.

---

😀 소감 및 마무리

텍스트 렌더링의 기초를 알아보는 여형 중, 첫번 째 행선지인 Typographical Concepts에 도착했다.

 

"글리프"라는 생소한 개념도 배웠고, 서체, 폰트등 헷갈려던 개념에 대해 차이를 분형이 정리했다.

---

출처

https://zeddios.tistory.com/605

iOS ) Typographical Concepts

https://developer.apple.com/library/archive/documentation/StringsTextFonts/Conceptual/TextAndWebiPhoneOS/TypoFeatures/TextSystemFeatures.html#//apple_ref/doc/uid/TP40009542-CH6-BBCFAEGE

Typographical Concepts

https://tammist.tistory.com/29

폰트? 폰트패밀리? 타입페이스?