타이포그래피
타이포그래피 (Typography)
명확한 타이포그래피 계층은 콘텐츠를 조직하고 구조화해, 사람들이 경험을 쉽게 헤쳐 나갈 수 있게 해줘요.
출처: 문서
본문
Fluent 폰트 스택 (Fluent font stacks)
Segoe - 분명한 Microsoft (Segoe - unmistakably Microsoft)
친근하고 읽기 쉬운 Segoe는 Microsoft의 시그니처 타입페이스예요. 다양한 크기에서 가독성과 개성을 강조해요. Segoe의 변형들은 Windows OS, Win UI 네이티브 앱, 웹 앱 전반에 걸쳐 사용돼요.
모든 플랫폼의 네이티브 타입 (Native type on every platform)
Segoe UI가 Fluent의 일차 타입페이스지만, 시스템은 기본적으로 네이티브 시스템 폰트를 사용해 플랫폼 전반에서 익숙하고 접근 가능한 경험을 보장해요.
타입 램프 (Type ramp)
- Web
- Windows
- macOS
- iOS
- Android
Web용 Fluent 타입 램프는 Microsoft의 오랜 디자인 역사를 바탕으로 만들어졌어요. 타입 옵션은 훑어볼 수 있는 계층과 균형감을 만들기 위한 명확한 스타일 방향과 의미론적 역할을 제공해요. 이 램프는 기본 타입페이스로 Segoe UI를 사용해요.
| Caption 2 | Regular | 10px / 14px |
|---|---|---|
| Caption 2 Strong | Semibold | 10px / 14px |
| Caption 1 | Regular | 12px / 16px |
| Caption 1 Strong | Semibold | 12px / 16px |
| Caption 1 Stronger | Bold | 12px / 16px |
| Body 1 | Regular | 14px / 20px |
| Body 1 Strong | Semibold | 14px / 20px |
| Body 1 Stronger | Bold | 14px / 20px |
| Subtitle 2 | Semibold | 16px / 22px |
| Subtitle 2 Stronger | Bold | 16px / 22px |
| Subtitle 1 | Semibold | 20px / 26px |
| Title 3 | Semibold | 24px / 32px |
| Title 2 | Semibold | 28px / 36px |
| Title 1 | Semibold | 32px / 40px |
| Large Title | Semibold | 40px / 52px |
| Display | Semibold | 68px / 92px |
Windows용 Fluent 타입 램프는 시그니처 타입페이스의 변형인 Segoe UI Variable을 사용해요. 타입 옵션은 훑어볼 수 있는 계층과 균형감을 위한 명확한 스타일 방향과 의미론적 역할을 제공해요.
| Caption | Regular small | 12px / 16px |
|---|---|---|
| Body | Regular | 14px / 20px |
| Body Strong | Semibold text | 14px / 20px |
| Body large | Regular | 18px / 24px |
| Subtitle | Semibold display | 20px / 28px |
| Title | Semibold display | 28px / 36px |
| Large Title | Semibold display | 40px / 52px |
| Display | Semibold display | 68px / 92px |
MacOS용 Fluent 타입 램프는 Apple의 폰트 패밀리를 바탕으로 Mac 기기 전반에 명확하고 읽기 쉬운 계층을 만들어요. 이 램프는 San Francisco Pro를 사용해요.
| Caption 1 | Regular | 10pt / 13pt |
|---|---|---|
| Caption 1 Strong | Semibold | 10pt / 13pt |
| Body 1 | Regular | 13pt / 16pt |
| Body 1 Strong | Semibold | 13pt / 16pt |
| Subtitle 2 | Regular | 11pt / 14pt |
| Subtitle 1 | Bold | 13pt / 16pt |
| Title 3 | Regular | 15pt / 20pt |
| Title 3 Strong | Semibold | 15pt / 20pt |
| Title 2 | Regular | 17pt / 22pt |
| Title 2 Strong | Bold | 17pt / 22pt |
| Title 1 | Regular | 22pt / 26pt |
| Title 1 Strong | Bold | 22pt / 26pt |
| Large Title | Regular | 26pt / 32pt |
| Display | Bold | 30pt / 40pt |
iOS용 Fluent 타입 램프는 Apple의 폰트 패밀리를 바탕으로 모바일 기기 전반에 명확하고 읽기 쉬운 계층을 만들어요. 이 램프는 네이티브 iOS 폰트인 San Francisco Pro를 사용해요.
| Caption 2 | Regular | 12pt / 16pt |
|---|---|---|
| Caption 1 | Regular | 13pt / 18pt |
| Caption 1 Strong | Semibold | 13pt / 18pt |
| Body 2 | Regular | 15pt / 20pt |
| Body 2 Strong | Semibold | 15pt / 20pt |
| Body 1 | Regular | 17pt / 22pt |
| Body 1 Strong | Semibold | 17pt / 22pt |
| Title 3 | Semibold | 20pt / 25pt |
| Title 2 | Semibold | 22pt / 28pt |
| Title 1 | Bold | 28pt / 34pt |
| Large Title | Bold | 34pt / 41pt |
| Display | Bold | 60pt / 70pt |
Android용 Fluent 타입 램프는 Android의 폰트 패밀리를 바탕으로 모바일 기기 전반에 명확하고 읽기 쉬운 계층을 만들어요. 이 램프는 네이티브 Android 폰트인 Roboto를 사용해요.
| Caption 2 | Regular | 12sp / 16sp |
|---|---|---|
| Caption 1 | Regular | 13sp / 18sp |
| Caption 1 Strong | Medium | 13sp / 18sp |
| Body 2 | Regular | 14sp / 20sp |
| Body 2 Strong | Medium | 14sp / 20sp |
| Body 1 | Regular | 16sp / 24sp |
| Body 1 Strong | Semibold | 16sp / 24sp |
| Title 3 | Medium | 18sp / 24sp |
| Title 2 | Medium | 20sp / 24sp |
| Title 1 | Bold | 24sp / 32sp |
| Large Title | Regular | 34sp / 44sp |
| Display | Regular | 60sp / 72sp |
텍스트 스타일링 (Styling text)
때로는 계층이나 두드러짐을 나타내기 위해 다른 텍스트 서식을 사용해야 할 수도 있어요. 텍스트를 스타일링하고 서식을 지정할 때 가독성을 최우선으로 유지하려면 다음 팁을 따라주세요.
대소문자 (Casing)
대부분의 맥락에 맞으므로 문장부호표기(sentence case)로 작성하세요. 읽기 어렵기 때문에 사용자의 주의를 끌기 위해 모두 대문자(all caps)를 쓰지 마세요. 자세한 내용은 콘텐츠 디자인 안내를 참고하세요.
문장 부호로 작성하기 (Write in sentence case)
모두 대문자 피하기 (Avoid using all caps)
정렬 (Alignment)
Fluent는 세로 공간을 분배하기 위해 기준선 정렬(baseline alignment)을 사용해요. 이렇게 하면 레이아웃 안에서 일관된 시각적 리듬이 만들어져요.
텍스트를 가로로 정렬할 때는 일반적으로 영어 같은 좌우(LTR) 언어에서는 왼쪽 정렬을 고수하세요.
아랍어나 히브리어 같은 우좌(RTL) 언어, 또는 영어에서 사이드 노트 같은 짧은 텍스트 요소를 구분하려면 오른쪽 정렬을 사용하세요. LTR 언어의 긴 텍스트 블록을 오른쪽 정렬하지 마세요.
텍스트를 가운데 정렬할 때도 같은 재량을 사용하세요. 가운데 정렬은 작은 카피 조각에 주의를 끌거나 페이지의 다른 요소를 지지해야 해요.
색상 (Color)
색상을 적용하면 텍스트를 강조하거나 약화시킬 수 있어요. 텍스트에 기본 색(primary color)을 사용하면 표준 텍스트 색보다 더 두드러지게 보여요. 반대로 표준 텍스트보다 더 밝은 중립색을 사용하면 텍스트를 누르고 시각적 계층에서 더 낮게 놓여요.
텍스트에 색을 적용할 때는 색상 안내를 반드시 따르세요.
표준 텍스트는 배경에 대해 최소 4.5:1의 대비 비율(contrast ratio)을 가져야 해요. 큰 텍스트(18.5픽셀 볼드 이상, 또는 24픽셀 레귤러)는 최소 3:1의 대비 비율을 가져야 해요. 디자인이 색상 대비와 다른 접근성 고려 사항을 통과하도록 이 리소스들을 사용하세요.