Material Design3でTypographyが変わった

Material3の正式リリース

先日、Android版のmaterial-componentsの1.5.0がリリースされました。 このリリースバージョンからMaterial Design3が含まれるようになりました。

Release 1.5.0 · material-components/material-components-android

Material3のテキスト(Typography)について

Material3(Material Design3対応のテーマ)といえば色周りが(多分)注目されがちですが、Typographyにも大きな変更が入っています。 これまではHeadline / Subtitle / Body / Captionで分けられていた名称がDisplay / Headline / Title / Labelの項目に変わりました。 さらにそれぞれ、Large / Medium / Smallの3種類の大きさが用意されています。

ただしこれらのテキスト設定は、完全に新規で作られたというわけではなく、既存のMaterial Componentsがベースになっています。 今後既存のMaterial Designからのマイグレーションをやったときの事を考え、Material3のそれぞれの設定が過去の何の設定をベースにしているか一覧にしてみました。

Material3Material ComponentsDefault Size(M3)
DisplayLargeHeadline2Regular 57sp
DisplayMediumHeadline3Regular 45sp
DisplaySmallHeadline4Regular 36sp
HeadlineLargeHeadline4Regular 32sp
HeadlineMediumHeadline5Regular 28sp
HeadlineSmallHeadline6Regular 24sp
TitleLargeHeadline6Regular 22sp
TitleMediumSubtitle1Medium 16sp
TitleSmallSubtitle2Medium 14sp
BodyLargeBody1Regular 16sp
BodyMediumBody2Regular 14sp
BodySmallCaptionRegular 12sp
LabelLargeBody2Medium 14sp
LabelMediumCaptionMedium 12sp
LabelSmallCaptionMedium 11sp

とはいえ、これは1.5.0時点での対応表になるので、今後変わる可能性はあります。 またベースと言っても、フォントサイズはMaterial3で微妙に変わっています。 注意してください。

参考

yamacraftを支援する

記事への感謝や応援を、コーヒー1杯分の支援で行うことができます。支援を受けると、さらに頑張って記事を書くようになります。