Android Typography

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


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

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







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의 대비를 가져야 눈에 잘 들어옵니다.







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




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



끝.


카테고리: Android

댓글

이 블로그의 인기 게시물

Python urllib.parse.quote()

KiCad 시작하기 7 (FreeRoute 사용하기 2)

음악 총보(Score), 파트보(Part)

Forensics .pyc 파일 .py로 복구하기

KiCad 시작하기 3 (새로운 소자 추가하기)

Kivy 시작하기 12 (Pyinstaller로 exe 파일 만들기)

딩기 요트 명칭

Android Compose automation for getting localized images to use on Play Store app image

Android Default background color setting

Android App architecture: State holders and UI state