아래 사이트에서 Typography외에도 다른 Design system도 볼 수 있다.
Apple iOS - Type
https://developer.apple.com/design/human-interface-guidelines/foundations/typography
Typography - Foundations - Human Interface Guidelines - Design - Apple Developer
Typography In addition to ensuring legible text, your typographic choices can help you clarify an information hierarchy, communicate important content, and express your brand. Best practices Strive to maintain a minimum font size that most people can read
developer.apple.com
iOS Typography의 경우에 표를 보면 font-size와 leading일때의 사이즈가 다른데
font-size는 기본적으로 높이를 나타내는 것이다. 한글같은 경우는 글자의 높이가 모두 동일하다.
하지만 영문자의 경우 상단 하단으로 꾸밈글자들이 있어서 각 부분들을 Ascent, Descent등으로 분류하며
각 부분들을 포함한 것에대한 명칭이 모두 있다.
그 명칭에 관련하여 한번 정리 해 보았다.
About Text Handling in iOS
<표 1. 위 그림의 Font의 각 여백부분의 명칭과 설명 >
Keyword | Description | 추가설명 |
Bounding rectangle | 글자의 기본크기 영역 박스 | |
Line-height | Ascent + Descent + Line gap(leading) | |
Baseline | Ascent와 Descent의 경계부분 | |
x-height | 소문자의 기본 높이(꾸밈 불포함) | |
Cap height | 대문자의 기본높이(꾸밈 불포함) | |
Line gap(leading) | Line-height에서 Ascent, Descent를 뺀 나머지 부분의 여백 | |
Italic angle | 기울임꼴의 각도 | |
Advancement | 글자의 꾸밈이 나온정도의 앞/뒤 거리 | 위 그림의 소문자 J를 참조해보면, 글자중심을 꺽어진 j하단의 좌측만큼을 우측공간을 같이 잡아서 advancement로 표시하고 있다. |
자세한 내용은 아래의 원문링크를 참조하세요
About Text Handling in iOS
About Text Handling in iOS The iOS platform gives you many ways to display text in your apps and let users edit that text. It also lets you display formatted text and web content in your app’s views. The resources at your disposal range from framework ob
developer.apple.com
구글 Material Design System - Type
https://m2.material.io/design/typography/the-type-system.html
Material Design
Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences.
m3.material.io