M3 (androidx.compose.material3) のTypographyでTextStyleパラメータを指定する方法

M3 (androidx.compose.material3) のTypographyでTextStyleパラメータを指定する方法をご紹介します。

条件

• Android
• Jetpack Compose Material Design 3

TypographyのTextStyleパラメータ

M3 (androidx.compose.material3)では、Typographyで指定するパラメータ（TextStyle）がM2と比較して大きく変わっています。

M2とM3の相違例

M2では以下のように指定していました。

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

一方、M3では以下のように指定します。

val Typography = Typography(
    displayLarge = TextStyle(
        fontFamily = AbrilFatface,
        fontWeight = FontWeight.Normal,
        fontSize = 30.sp
    ),
    displayMedium = TextStyle(
        fontFamily = Montserrat,
        fontWeight = FontWeight.Bold,
        fontSize = 20.sp
    ),
    displaySmall = TextStyle(
        fontFamily = Montserrat,
        fontWeight = FontWeight.Bold,
        fontSize = 14.sp
    ),
    bodyLarge = TextStyle(
        fontFamily = Montserrat,
        fontWeight = FontWeight.Normal,
        fontSize = 14.sp
    )
)

これまで、見出しと言えば「h1」や「h2」を使用していたことを考えると、このパラメータ名変更は結構なインパクトです。
しかし、新しいパラメータ名をみると「種別 + 大きさ」という感じのネーミングなので、すぐに慣れることが出来ると思います。

対応表

M2とM3の対応表は以下の通りです。

M2	M3
h1	displayLarge
h2	displayMedium
h3	displaySmall
該当なし	headlineLarge
h4	headlineMedium
h5	headlineSmall
h6	titleLarge
subtitle1	titleMedium
subtitle2	titleSmall
body1	bodyLarge
body2	bodyMedium
caption	bodySmall
button	labelLarge
該当なし	labelMedium
overline	labelSmall

参考

developers.android.com：Compose でマテリアル 2 からマテリアル 3 に移行する

https://developer.android.com/jetpack/compose/themes/material2-material3?hl=ja#m2_4