[Material] 서체 스케일(Type Scale)

 서체 스케일은 유연하면서, 일관된 스타일을 앱에 제공하기 위해 사용할 수 있는 스타일 모음이다. Marterial에서 지원하는 해당 시스템을 사용하면 디자인과 내용을 가능한 명확하고 효율적으로 표현할 수 있다.

 

서체 스케일의 종류

https://lh3.googleusercontent.com/GhGMLbfqPXdUgmnflT52VWNSned4U5jLOpTIXZWEDQfwvZGZC2EI0iO0wKxptigoYW79v2PhIdmjTjWDgfdHF8TzcldhSc9pA4BBLhE=w1064-v0

Material 서체 시스템에서 지원하는 글꼴 스타일은 13가지이다. 해당 스타일은 앱에 맞춤설정하려는 경우에 사용한다. 서체 스케일에는 각각 의도된 응용 방법과 의미를 갖는 재사용 가능한 텍스트 카테고리가 있다.

• 제목(H1~6) : 제목은 화면에서 가장 큰 텍스트로, 짧고 중요한 텍스트 또는 숫자에 사용된다.
• 본문(Body 1~2) : 작은 텍스트 크기에 적합하기 때문에 주로 긴 글에 사용된다.
• 글꼴 : Android 플랫폼에서는 몇 가지 글꼴을 제공하지만 기본적으로 제공되지 않는 글꼴을 사용하여 맞춤설정할 수 있습니다. 맞춤 글꼴은 직접 추가하여 브랜딩용으로 사용할 수 있습니다.

https://m2.material.io/design/typography/the-type-system.html#type-scale 에 접속하여 다양한 Font에 대해 확인할 수 있다. 특히 Font를 일일히 고르기 힘들다면 https://fonts.google.com/ 에 접속하여 그리드로 나열된 다양한 폰트를 확인할 수 있다.

 

안드로이드 컴포즈에 글꼴 적용해보기

1. 글꼴 리소스 디렉터리 생성

res 폴더에 Android Resource Directory를 새로 생성합니다. 생성하려는 디렉터리의 이름은 font로 지정하고 Resource type 또한 font로 지정합니다.

 

2. 원하는 글꼴 다운로드

원하는 글꼴을 다운받습니다. 저 같은 경우 https://fonts.google.com/ 를 사용한다. 다운로드 한 글꼴 압축파일을 압축해제 하면 ttf 파일들이 들어 있는 것을 확인할 수 있다. ttf파일은 폰트 파일의 표준 파일 포맷이다. 

다운로드 한 글꼴을 복사하여 생성해 놓은 font 리소스 디렉터리로 복사한다.

 

3. 글꼴 초기화 하기

안드로이드 컴포즈 프로젝트에서 ui.theme > Type.kt 파일을 열고 폰트에 대해 정의한다. 

val Test1Font = FontFamily(
    Font(R.font.test_1_font_regular)
)

val Test2Font = FontFamily(
    Font(R.font.test_2_font_regular),
    Font(R.font.test_2_font_bold, FontWeight.Bold)
)

이렇게 적용한 FontFamily를 실제 Typography에 적용을 한다.

val Typography = Typography(
    h1 = TextStyle(
        fontFamily = Test1Font,
        fontWeight = FontWeight.Normal,
        fontSize = 30.sp
    ),
    h2 = TextStyle(
        fontFamily = Test2Font,
        fontWeight = FontWeight.Bold,
        fontSize = 20.sp
    ),
    h3 = TextStyle(
        fontFamily = Test2Font,
        fontWeight = FontWeight.Bold,
        fontSize = 14.sp
    ),
    body1 = TextStyle(
        fontFamily = Test2Font,
        fontWeight = FontWeight.Normal,
        fontSize = 14.sp
    )
)

마지막으로 Theme에 해당 Typography를 적용하여, 앱에 전체적으로 적용이 가능한다.

MaterialTheme(
   colors = colors,
   typography = Typography,
   shapes = Shapes,
   content = content
)

참고

https://m2.material.io/design/typography/the-type-system.html#type-scale