Jan 20, 2022 - 2 min read
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のそれぞれの設定が過去の何の設定をベースにしているか一覧にしてみました。
| Material3 | Material Components | Default Size(M3) |
|---|---|---|
| DisplayLarge | Headline2 | Regular 57sp |
| DisplayMedium | Headline3 | Regular 45sp |
| DisplaySmall | Headline4 | Regular 36sp |
| HeadlineLarge | Headline4 | Regular 32sp |
| HeadlineMedium | Headline5 | Regular 28sp |
| HeadlineSmall | Headline6 | Regular 24sp |
| TitleLarge | Headline6 | Regular 22sp |
| TitleMedium | Subtitle1 | Medium 16sp |
| TitleSmall | Subtitle2 | Medium 14sp |
| BodyLarge | Body1 | Regular 16sp |
| BodyMedium | Body2 | Regular 14sp |
| BodySmall | Caption | Regular 12sp |
| LabelLarge | Body2 | Medium 14sp |
| LabelMedium | Caption | Medium 12sp |
| LabelSmall | Caption | Medium 11sp |
とはいえ、これは1.5.0時点での対応表になるので、今後変わる可能性はあります。 またベースと言っても、フォントサイズはMaterial3で微妙に変わっています。 注意してください。
参考
yamacraftを支援する
記事への感謝や応援を、コーヒー1杯分の支援で行うことができます。支援を受けると、さらに頑張って記事を書くようになります。