os의 typography guideline

 

https://developer.apple.com/kr/design/human-interface-guidelines/typography

타이포그래피 | Apple Developer Documentation

https://m3.material.io/styles/typography/overview

Typography – Material Design 3

모바일 및 데스크톱 운영체제(OS)의 타이포그래피 가이드라인은 사용자가 화면의 정보를 빠르고 정확하게 읽을 수 있도록 돕는 가독성(Readability)과 시각적 위계(Hierarchy) 구축을 최우선 목표로 합니다. [1, 2]

가장 대표적인 두 OS인 Apple iOS(Human Interface Guidelines)와 Google Android(Material Design 3)의 핵심 가이드라인을 비교하여 정리해 드립니다.

---

1. 양대 OS 타이포그래피 핵심 가이드라인 비교

항목	🍏 Apple iOS (HIG)	🤖 Google Android (Material 3)
기본 시스템 서체	San Francisco (SF Pro) (세리프가 필요할 땐 New York 사용)	Roboto / Roboto Flex (가변 폰트) (구글 기기 기준)
본문 기준 크기	17pt (Large 기준 기본값)	16sp (Body Large 기준 기본값)
크기 단위	pt (Point)	sp (Scale-independent Pixels) (사용자 설정 크기에 맞춰 비례 확장)
위계 분류 방식	텍스트 스타일 기반 (Large Title, Title, Headline, Body, Caption 등)	타입 스케일 토큰 기반 (Display, Headline, Title, Body, Label)
핵심 기능	Dynamic Type (사용자 폰트 크기 변경에 유연하게 대응)	Variable Fonts (두께, 너비 등을 세밀하게 조정 가능한 가변 축 활용)

---

2. Apple iOS (Human Interface Guidelines) 핵심 포인트

Apple은 간결함과 명확함, 그리고 시스템과의 일체감을 중요하게 생각합니다.

• Dynamic Type 지원: 사용자가 OS 설정에서 글자 크기를 키우거나 줄였을 때, 앱 내의 텍스트 크기와 줄간격(Leading)도 그에 맞춰 유동적으로 변해야 합니다. [1, 2]
• SF Pro의 자동 자간 조절: iOS 시스템 폰트인 SF Pro는 20pt 미만(Text)과 20pt 이상(Display)일 때 자간(Tracking)과 폰트 형태를 OS가 자동으로 최적화합니다.
• 최소 크기 준수: 일반적인 본문은 17pt를 권장하며, 캡션 등 가장 작은 텍스트도 11pt 미만으로 내려가지 않도록 유의해야 합니다.

---

3. Google Android (Material Design 3) 핵심 포인트

구글은 M3(Material You)로 진화하면서 5가지 카테고리와 총 15~30개의 명확한 스타일 토큰 체계를 제공합니다.

• 5개 카테고리 (Type Scale):
• 행간 비율 규칙: 큰 텍스트(Display, Headline)는 글자 크기의 1.2배, 작은 텍스트(Body, Label)는 가독성을 위해 1.5배의 줄간격을 권장합니다. [1]
• 문장 부호 및 대소문자: 텍스트 가독성을 높이기 위해 단순 레이블이나 툴팁 끝에 마침표(.)를 찍지 않으며, 영문의 경우 첫 글자만 대문자로 쓰는 Sentence case를 원칙으로 합니다.

---

4. OS 공통 UI/UX 타이포그래피 필수 원칙

두 플랫폼 모두 접근성과 범용성을 위해 아래 규칙을 강력히 권장합니다.

• 가독성 우선 (Legibility First): 너무 얇은 두께(Light, Thin)의 폰트는 작은 크기에서 화면 대비가 낮아져 가독성을 해치므로 본문 사용을 지양합니다.
• 명도 대비(Contrast Ratio) 준수: WCAG 표준에 따라 작은 텍스트는 배경과 최소 4.5:1, 큰 텍스트는 3:1 이상의 명도 대비를 가져야 합니다.
• 텍스트 줄 바꿈 처리: 다국어 환경(한글, 영어, 아랍어 등)을 고려하여 글자가 길어질 때 뒷부분이 잘리거나(... 말줄임표 처리), 자연스럽게 다음 줄로 넘어갈 수 있도록 레이아웃 공간(Padding)을 확보해야 합니다.

---