概要
この記事では、少し前に公開されたMaterial Design 3(通称 : M3)のTypographyと、
今までのTypographyを比べて、変わったところ、追加されたところについて解説します。
M3のTypographyでの変更点を簡単にまとめると、
シンプルに、わかりやすく、使いまわすことができるようになった
ということになると思います。
M３のTypographyのアップデート内容
M３のTypographyでは、以下の内容がアップデートされました。
- デフォルトフォントが決められた。
- テキストの種類が単純になった。
- TokenでTypographyを管理することで、デバイスに最適なサイズになった。
これらを順番に解説していこうと思います。
デフォルトフォントが決められた。
デフォルトフォントが決められていなかったのが、不思議ですが、
M３で、デフォルトフォントとして決められたのは、
RobotoとNoto Sansです。
RobotoとNoto SansはGoogleを代表するフォントなので、納得ですね！
Roboto
Robotoは、大体のフォルムが幾何学的に作られ、機械的な骨格持っています。
それだけではなく、自然に見えるような曲線を持っているのも特徴です。
そのため、字形を個別に調整しなくても、違和感なく文字を読むことができます。
Noto Sans
Noto Sansの特徴は、3,741個の文字に対応しているということです。
そのため、フォントが与える印象を全世界で同じにすることができます。
テキストの種類が単純になった。
テキストの種類が単純にだいぶシンプルになりました。
変更点は↓こんな感じです。
- カテゴリーが、Headline、Title、Label、Bodyの4種類になりました。
- M3では、CaptionとOverlineがなくなりました。
- それぞれのカテゴリーのサイズも整理され、M3では、統一され
Large、Medium、Smallの3種類になった。
表にするとこんな感じになります。
| カテゴリー | M2 | M3 |
|---|---|---|
| Headline | H1~H6 | Large、Medium、Small |
| Title | Subtitle1、2 | Large、Medium、Small |
| Label | Button | Large、Medium、Small |
| Body | body1、2 | Large、Medium、Small |
| Caption | Caption | なし |
| Overline | Overline | なし |
TokenでTypographyを管理することで、デバイスに最適なサイズになった。
M3では、Typographyをデザイントークンで管理するようになりました。
そのため、文脈に適したトークンの名前にすることで、
さまざまなサイズのデバイスで流動的にテキストサイズが変えられるようになりました。
イメージはこんな感じです。
デザイントークンでは、↓こんな感じで管理されています。
| Role | Font | font-size | font-Weight | fline-height |
|---|---|---|---|---|
| Display-large | Roboto Regular | 57 | 400 | 64 |
| Display-medium | Roboto Regular | 45 | 400 | 52 |
| Display-small | Roboto Regular | 36 | 400 | 44 |
| Headline-large | Roboto Regular | 32 | 400 | 40 |
| Headline-medium | Roboto Regular | 28 | 400 | 46 |
| Headline-small | Roboto Regular | 24 | 400 | 32 |
| Title-large | Roboto medium | 22 | 500 | 28 |
| Title-medium | Roboto medium | 16 | 500 | 24 |
| Title-small | Roboto medium | 14 | 500 | 20 |
| Label-large | Roboto medium | 14 | 500 | 20 |
| Label-medium | Roboto medium | 12 | 500 | 16 |
| Label-small | Roboto medium | 11 | 500 | 6 |
| Body-large | Roboto medium | 16 | 400 | 24 |
| Body-medium | Roboto medium | 14 | 400 | 20 |
| Body-small | Roboto medium | 12 | 400 | 16 |
※fontsizeの単位は、デバイスごとに Android : sp ・ iOS:pt ・ Web : rem(0.0625) です。
まとめ
この記事では、少し前に公開されたMaterial Design 3(通称 : M3)のTypographyと、
今までのTypographyを比べて、変わったところ、追加されたところについて解説しました。
M3では、Typographをデザイントークで、
テキストの種類がシンプルになり、
それぞれの種類でlarge、medium、smallの3サイズで
管理されるようになりました。
この3サイズが、さまざまな画面サイズのデバイスで、
最適なfont sizeに変化することで、
どのデバイスでも文字が読みやすくなったということです。
最後まで読んでくださってありがとうございます！
普段はデザインやフロントエンドを中心にQiitaに記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。