구글과 애플이 바라는 타이포그래피의 세계 : 애플의 Human Interface Guidelines

---

지난 글에서는 구글의 Material 3에 나와있는 타이포그래피 문서들을 읽어보면서 구글이 강조하고 있는 타이포그래피 원칙들에 대해 알아봤었습니다. 오늘은 Material과 함께 양대산맥으로 자리하고 있는 애플의 HIG(Human Interface Guidelines)에 있는 타이포그래피 부분을 살펴보겠습니다.

---

HIG의 Typography

Overview

텍스트의 가독성을 확실하게 하기 위해서는 타이포그래픽적인 선택을 해야 합니다. 이를 통해 정보의 위계 질서를 명확히 할 수 있고, 중요한 컨텐츠를 전달할 수 있으며, 브랜드를 뽐낼 수도 있습니다.

 

HIG의 타이포그래피 문서로 이동하면 가장 먼저 보게 되는 설명입니다. 애플이 프로덕트 디자인에서 타이포그래피를 통해 전달하고자 하는 바는 정보 위계의 명확성, 컨텐츠 전달, 브랜드 표출 3가지인 셈이죠.

---

Best Practices

대부분의 사람들이 쉽게 읽는 최소 폰트 사이즈를 유지하세요.
사람들이 사용하는 기기와 환경, 사용자의 상태에 따라 해당 사용자에게 적합한 폰트 크기가 달라질 수 있습니다. 그렇다면 어떤 폰트 사이즈를 사용하는 것이 적절할까요? 이 글에서는 본문은 16~18pt 정도가 적당하다고 하네요. 지난 글에서봤던 Material 3도 본문에 해당하는 Body는 body.large가 16sp, body.medium이 14sp, body.small이 12sp였습니다. 하지만 이 폰트 사이즈는 서비스의 타겟 유저층에 따라 얼마든지 달라질 수 있습니다. 가령 시니어 유저가 많은 유저라면 본문의 폰트 사이즈는 조금 더 커지겠죠.

강조해야 할 부분은 weight, size, color를 조정해 시각적인 중요도를 나타내세요.
시각적으로 위계를 정해 유저들이 읽는 순서나 호흡을 리드할 수 있습니다. 추가로 Material에서 나왔던 bounding box나 padding 등으로 여백을 더해준다면 한층 더 여유로운 호흡으로 정보를 전달할 수 있겠죠?

최소한의 타입페이스만 사용하세요.
너무 많은 타입페이스(=우리 흔히 말하는 폰트, 글꼴)를 사용하면 정보의 위계를 흔들고, 가독성을 해칩니다. 보통은 한 가지 글꼴만 사용합니다. 토스가 Toss Product Sans만 사용하듯이요. 애플처럼 San Fransisco, New York 등 여러 개를 사용할 수도 있지만, 이정도 규모면 사용처를 명확히 구분합니다. 최소한의 타입페이스만 사용하는 것은 브랜드 아이덴티티와도 직접적으로 연관되어 있기 때문입니다.

다양한 상황에서 가독성을 테스트해보세요.
텍스트가 서비스의 중요한 역할을 한다면 언제, 어디서든 텍스트를 보는 데에 지장이 없어야 합니다. 예를 들면, 밀리의서재를 쓰는 유저가 버스에 탔을 때 프로덕트의 텍스트가 제대로 읽히지 않는다면 큰 문제겠죠. 배경과 텍스트의 대비, 텍스트의 사이즈, 타입페이스 교체 등으로 일관된 가독성을 제공하도록 해봅시다.

일관된 가독성을 유지하고 싶다면 font-weight: light 인 폰트는 피하세요.
보통 regular, bold weight을 많이 선호하는 데에는 이유가 있습니다. 특히 글씨 크기가 작을 때 light weight는 텍스트를 읽기 어렵습니다. 그래도 굳이 light weight을 사용하고 싶다면 폰트 사이즈가 크고, 배경과의 대비가 확실한 상황에서만 사용하는 것이 적절합니다.

텍스트 크기가 변경될 때는 중요한 정보들의 우선순위를 매기세요.
프로덕트 내에서 유저들이 텍스트 크기를 변경할 땐 유저마다의 이유가 있을 겁니다. 가령 텍스트 크기를 키우는 건 제목을 더 크게 보고싶어서가 아니라 본문을 읽고 싶다던지 하는 이유가 있겠죠. 애플에서 말하는 예시는 다음과 같습니다 : 유저들이 큰 텍스트 사이즈를 선택하면, 메일 앱은 메일의 제목과 본문을 크게 보여주지만, 날짜나 보내는 사람은 작게 보여줍니다.

---

시스템 폰트를 사용하세요

애플은 San Fransisco(SF), New York(NY) 2가지 내장 타입페이스를 지원합니다. SF는 산세리프 타입페이스, NY는 세리프 타입페이스입니다. 두 타입페이스 모두 가변 폰트(Variable Font)이기 때문에 다양한 환경을 대응할 수 있습니다.

내장된 시스템 폰트를 사용하면 언제 어디서든 동일한 타이포그래피 경험을 줄 수 있겠지만, 사실 굳이 그럴 필요는 없죠.

---

실제 사용

양이 방대해서 링크에 들어가서 직접 확인하시는 게 숫자 보기에는 더 좋을 것 같습니다. 여기서는 iOS만 확인해보도록 하겠습니다. 아래 표의 Leading은 line height와 비슷한 개념이라고 보시면 될 것 같습니다.

Style	Weight	Size (pt)	Leading (pt)
Large Title	Regular	34	41
Title 1	Regular	28	34
Title 2	Regular	22	28
Title 3	Regular	20	25
Headline	Semibold	17	22
Body	Regular	17	22
Callout	Regular	15	20
Subhead	Regular	13	18
Footnote	Regular	13	18
Caption 1	Regular	12	16
Caption 2	Regular	11	13

%3C/p|CDM|1.3|{"originWidth":0,"originHeight":0,"style":"alignCenter"}_##]

---

 

실제 사용

양이 방대해서 링크에 들어가서 직접 확인하시는 게 숫자 보기에는 더 좋을 것 같습니다. 여기서는 iOS만 확인해보도록 하겠습니다. 아래 표의 Leading은 line height와 비슷한 개념이라고 보시면 될 것 같습니다.

 

Style	Weight	Size (pt)	Leading (pt)
Large Title	Regular	34	41
Title 1	Regular	28	34
Title 2	Regular	22	28
Title 3	Regular	20	25
Headline	Semibold	17	22
Body	Regular	17	22
Callout	Regular	15	20
Subhead	Regular	13	18
Footnote	Regular	13	18
Caption 1	Regular	12	16
Caption 2	Regular	11	13

[##_Image/>

Array

구글은 5가지 Key Type에 각각 3가지씩 Style이 들어가 있는 모습이었으나, 애플은 '사람이 사용하는 것인데 어떻게 그렇게 딱딱 맞게 규정할 수 있느냐'라고 말하고 있는 듯한 모습입니다. 구글의 Material과 비교해보면 대략 이런 구도인 것 같습니다.

Material 3	HIG
Display	Large Title
Title	Title
Headline	Headline
Body	Body
Label	Callout, Subhead, Footnote, Caption

---

결론

1. 애플이 중요시 여기는 것은 명확한 의미의 전달입니다.
2. 다양한 환경과 유저의 상황에도 항상 같은 경험을 전달하는 것을 목표로 합니다.

개인적으로 UXUI 디자이너들의 습관과도 같은 '짝수'로 작업하는 방식을 애플에서는 깨버린 것 같아서 신선한 인사이트를 얻었습니다!