본문 바로가기
Design System

Typography - iOS, Android

by leejey 2023. 2. 5.

아래 사이트에서 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

 

developer.apple.com에서 가져온 이미지 입니다.

<표 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로 표시하고 있다.

자세한 내용은 아래의 원문링크를 참조하세요

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

 

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