Applying type

Hierarchy는 글꼴 두께, 크기, 줄 높이 및 문자 간격의 차이를 통해 전달됩니다. 

updated type scale는 스타일을 목적을 설명하기 위해 이름이 지정된 다섯 가지 역할(표시, 헤드라인, 제목, 레이블, 본문)로 구성합니다. 새로운 roles은 device-agnostic, 다양한 사용 사례에 더 쉽게 적용할 수 있습니다.

 

Roles

Display

default type scale에는 large, medium 및 small의 three display styles이 있습니다.

화면에서 가장 큰 텍스트인 display 스타일은 짧고 중요한 텍스트 또는 숫자용으로 사용됩니다.

대형 화면에서 가장 잘 작동합니다.

Display type의 경우 손글씨 또는 스크립트 스타일과 같이 보다 표현력이 풍부한 글꼴을 선택하는 것이 좋습니다.
사용 가능한 경우 적절한 optical size를 용도에 맞게 설정하십시오.

Headline

headline은 작은 화면에서 짧고 강조되는 텍스트에 가장 적합합니다. 

이러한 스타일은 텍스트의 기본 구절이나 콘텐츠의 중요한 영역을 표시하는 데 유용할 수 있습니다.

가독성을 유지하기 위해 적절한 줄 높이와 문자 간격도 통합된 경우 헤드라인도 표현력이 풍부한 서체를 사용할 수 있습니다.

Title

title은 headline 스타일보다 작으며 상대적으로 짧게 유지되는 중간 강조 텍스트에 사용해야 합니다.

예를 들어 title 스타일을 사용하여 텍스트의 보조 구절이나 콘텐츠의 보조 영역을 나누는 것을 고려해 보십시오.

title의 경우,  display, handwritten 및 script styles.을 포함하여 표현적인 글꼴을 사용할 때 주의하십시오.

Body

Body 스타일은 앱에서 긴 텍스트 구절에 사용됩니다.

작은 크기에서 읽을 수 있고 더 긴 구절에서 편안하게 읽을 수 있는 body 스타일용 서체를 사용하십시오.
작은 크기에서는 읽기가 더 어려울 수 있으므로 본문 텍스트에 표현적이거나 decorative 글꼴을 사용하지 마십시오.

 

Label

label스타일은 component 내부의 텍스트 또는 (캡션과 같은) 콘텐츠 본문의 매우 작은 텍스트에 사용되는 더 작고 실용적인 스타일입니다. 예를 들어 버튼은 label large style을 사용합니다.

Typesetting

세로 Typesetting은 모든 크기에서 텍스트 가독성을 보장하기 위해 padding, bounding boxes, and baselines 에 의존합니다.
Typesetting, text resizing, density 및 적응형 레이아웃의 텍스트 사용에 대한 결정을 내릴 때,엔지니어링 고려 사항과 플랫폼의 규칙을 고려하십시오.

Using padding and bounding boxes

applicable 경우, Web 제품 및 iOS 제품에 이 방법을 사용하십시오. 

일부 디자인 도구는 Typesetting을 위해 경계 상자도 사용하지만, 그 방법은 다양하며 엔지니어링 구현과 조화를 이루어야 합니다.

 

웹 UI에서, Line 높이와 bounding box는 동일합니다.

텍스트는 CSS에서 설정한  half-leading  동작에 따라 테두리 상자 내에서 vertically으로 중앙에 배치됩니다.

텍스트의 세로 위치는 직접 제어되지 않고 bounding box와 글꼴 메트릭의 조합을 통해 제어됩니다.

패딩은 이미지와 bounding box 사이 또는 경계 상자의 내부 edge와 텍스트 사이와 같은 UI 요소 사이의 공간입니다.

 

container edge와 같은 고정된 기준점에서 UI 요소까지의 거리를 지정합니다.

웹의 경우 Sass 또는 CSS를 사용하여 이 계산을 자동화하십시오.

웹 및 iOS에서 타이포그래피를 설정하려면 줄 높이, 패딩 및 컨테이너 측정을 사용하십시오. 웹용으로 개발하는 경우 Figma, 갤러리 또는 마크업의 코드 관리자를 통해 값을 직접 사용할 수 있습니다.

padding 및 bounding box를 사용한 vertical 정렬

1. Line height
bounding box의 높이 측정

 

2. Centering
가운데 정렬을 사용하여 경계 상자의 내부 가장자리 주위에 동일한 상단 및 하단 패딩을 확인합니다.

 

3. Spacing
bounding box의 높이와 상단 및 하단 패딩을 사용하여 간격을 결정합니다.

Using the baseline

Android 제품 또는 플랫폼에 구애받지 않는 사양에 이 방법을 사용하세요.

 

Baseline은 텍스트 줄이 놓이는 보이지 않는 선입니다. 

머티리얼 디자인에서 기준선은 텍스트와 요소 사이의 수직 거리를 측정하는 중요한 사양입니다.

Android의 경우 Baseline을 기준으로 거리를 지정하면 정확한 구현이 가능합니다.
Baseline은 또한 플랫폼이나 디자인 도구에 구애받지 않는 방식으로 디자이너 간에 텍스트 위치를 전달하는 데 사용할 수 있습니다

Baseline을 사용한 수직 정렬

1. Line height
한 줄의 텍스트 기준선에서 다음 줄의 텍스트 기준선까지의 거리 측정

 

2. Centering
텍스트 기준선까지의 거리를 측정하는 대신 가운데 정렬을 reference point로 지정

 

3. Spacing
reference point에서 텍스트 기준선까지의 거리 사용.

Ensuring readability

 

Line length

Line length는 한 줄의 텍스트에 몇 개의 문자가 있는지입니다.
긴 본문 텍스트의 권장 줄 길이는 40~60자입니다.
짧은 텍스트 줄의 경우 이상적인 길이는 20~40자입니다.

Line height

행 높이는 텍스트의 각 행 사이의 간격으로 Text 크기와 직결됩니다.
Material의 type token은 의도한 크기와 용도에 최적화되어 있습니다.

title, headline 및 display와 같은 스타일을 사용하여, 큰 글자의 가독성을 위해 글자 크기의 1.2배의 줄 높이 비율을 권장합니다.

본문 및 lable과 같은 스타일을 사용하는 더 작은 본문 body의 경우 줄 높이 비율을 유형 크기의 약 1.5배로 권장합니다. 줄 높이가 너무 빡빡하면 텍스트 흐름이 손상됩니다. 너무 느슨하면 선이 응집된 느낌이 들지 않습니다.

Tabular numbers 

 

테이블이나 시계와 같이 값이 자주 변경될 수 있는 장소에서는 Proportional numbers

대신 tabular figures(Monospaced tabular numbers라고도 함)를 사용하십시오.

 

더 나은 scanning을 위해 값을 광학적으로 정렬된 상태로 유지하려면 Monospaced tabular numbers를 사용하십시오.

Using Material Symbols with typography

머티리얼 Symbol은 서체와 유사한 고려 사항으로 디자인되었으며 종종 텍스트와 함께 나타납니다.

올바른 아이콘 세트를 선택하면,  인터페이스의 콘텐츠를 함께 묶어 제품의 응집력 있는 브랜드 느낌을 강화할 수 있습니다.

Accessibility

 

Color & contrast

app의 텍스트와 배경 사이에 적절한 색상 대비를 선택하여 시각적 접근성을 지원하세요

대비은 두 색상의 명암 사이에서 인식되는 차이이며 명암비로 정량화됩니다.

주요 대비 비율은 접근성에 충분한 대비 수준을 갖추고 있는가를 나타냅니다.

 

텍스트는 색상과 배경 색상 사이에 충분한 대비가 있어야 합니다. 충분한 대비는 텍스트의 크기와 필요한 accessibility 수준에 따라 다릅니다.

typography의 기본 색상은  on surface이지만, surface variant이 강력한 대안입니다.