Android Typography

안드로이드 Typography를 알아보겠습니다.

Typography(타이포그래피)는 글자와 관련된 내용입니다.

Material3에 가면 이렇게 적혀있습니다.
Typography는 글을 아름답고 읽기 쉽게 만들어준다.

출처:

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

Material(머티리얼)에서 기본으로 제공해 주는 Type style에는 5가지가 있습니다.

• Display

• Headline

• Title

• Body

• Label

Typography token(토큰)을 사용합니다.

실제 값의 크기가 아닌 역할로 구분돼 있습니다.

• Small

• Medium

• Large

그래서 Typography를 사용할 때에는 스타일과 토큰을 사용해서 쉽게 접근할 수 있습니다.

예) Display-medium

이제, 각 스타일마다의 역할을 알아봅시다.

• Display(디스플레이)

3가지 type scale이 존재합니다. Large, medium 그리고 small.

화면에서 가장 큰 글자이며, 짧고 중요한 글자 또는 숫자에 사용됩니다.

큰 화면에 적합합니다.

Display type에는 풍부한 표현이 가능한 폰트가 좋습니다. 예를 들면 손글씨나 필기체가 있습니다.

적절한 크기를 설정하여 사용합니다.

• Headline(헤드라인)

Headline은 높은 관심이 필요한 짧은 글에 사용됩니다.

작은 화면에 적합합니다.

Headline은 첫 구절이나 강조하고 싶은 영역에 사용하면 좋습니다.

Headline은 풍부한 표현이 가능한 글꼴을 사용해도 됩니다. 적절한 글 높이와 글자 간격을 설정하여 읽기 쉽게 만들어야 합니다.

• Title(타이틀)

headline보다 작은 스타일입니다.

중간 정도의 주목이 필요한 중간 정도 길이의 글에 좋습니다.

예를 들어, title 스타일을 사용하여 첫 구절과 두 번째 구절을 구분할 수 있습니다.

표현이 풍부한 폰트(디스플레이, 손글씨, 필기체)를 사용할 시 주의가 필요합니다.

• Body(보디)

Body styles는 긴 구절에 사용됩니다.

작은 글씨의 긴 글에도 읽기 쉽고 편한 글꼴을 써야 합니다. 

표현이 풍부하거나 장식적인 글꼴은 피해야 합니다. 이러한 글꼴들은 작은 글씨를 읽기 어렵게 만듭니다.

• Label(레이블)

Label 스타일은 작고 실용적입니다. 그래서 컴포넌트 안의 글자나 본문의 캡션같이 아주 작은 글자에 사용됩니다.

버튼의 예로는 label의 large style을 사용합니다.

글자 색깔은 작은 글씨의 경우 배경과 7:1 대비를 가지고, 큰 글씨의 경우 4.5:1의 대비를 가져야 눈에 잘 들어옵니다.

해당 대비를 확인하는 사이트는 아래에 있습니다.

https://webaim.org/resources/contrastchecker/

아직 알면 좋은 주제가 많이 남았기 때문에 Material 사이트를 탐방하시며 습득하시길 추천드립니다.

끝.

카테고리: Android