[日本語]マテリアルデザイン 『The type system』#17
はじめに
今回は『マテリアルデザインガイドライン』の『The type system』について解説していきます。
なお、この記事は私が(翻訳機能を使って)ガイドラインを読む中で、日本語訳に違和感を感じたり、理解が難しいな。と思った箇所を分かりやすい言葉に置き換えるなど、一部個人的な解釈が含まれます。
正しい情報は下記のガイドラインをご確認ください。
引用元 Google - Material Design URL：https://material.io/
※動画・画像データ等はこちらから引用させていただいております。
Type scale
マテリアルデザインでは、「Type scale」と呼ばれる、13種類の「文字(Type)の組み合わせ」です。
そして、この「文字(Type)の組み合わせ」には、それぞれに意図された用途と意味があります。
Type scale generator
「Type scale generator」は、「Type scale」に対応するコードを作成するためのツールです。
具体的には、右側のメニューで(Googleが提供している)フォントを選択すると、自動的に「Type scale」と、プログラム用のコードが生成されます。
(↓以下のリンクから是非触ってみてください。)
https://material.io/design/typography/the-type-system.html#type-scale
Font size units(フォントサイズの単位)
Android、iOS、および Web では、フォントサイズを表すために、以下の単位が使用されます。
変換例
作成したUIのプラットフォーム(OS)を変更する際は、以下の表を参考にしてください。
文字の間隔の単位
以下の表は、各プラットフォームにおける文字の間隔の単位です。
type scaleの適用
Headlines(見出し)
type scaleでの「Headline」はH1〜H6の6種類のサイズがあり、重要なテキストに使用します。
「Headline」では、文字の「読みやすさ」も重要ですが、手書きや筆記体など、表現力豊かな「目を引く」フォントを使用することができます。
また、「H6」などの小さな見出しには、セリフまたはサンセリフの体の使用が推奨されています。
Subtitles(サブタイトル)
「Subtitle」は「Headline」よりも小さい文字で、中程度に強調したいテキスト用に使用します。
また、「Subtitle」に手書きや筆記体などの個性的なフォントを使用する場合は、以下の画像のように読みづらくなる可能性があるので、使用する際は注意が必要です。
Body(本文)
「Body(本文)」には2種類のサイズがあり、セリフまたはサンセリフ体の使用が推奨されています。
また、「Body」のフォントは、以下の画像のような個性的なフォントの使用は禁止されています。(読みにくい為)
Caption and overline(キャプションとオーバーライン)
CaptionとOverlineは、「Type scale」の中で最小のフォントサイズです。
これらは、画像に注釈を付けたり、見出しを紹介したりするために使用する為、小さいサイズとなっています。
また、CaptionとOverlineでは、以下の画像のような個性的なフォントの使用は禁止されています。(読みにくい為)
BUTTON(ボタン)
「BUTTON」は、読みやすさを考慮し基本的には「大文字のサンセリフ体」を使用します。
「BUTTON」では、基本的には「大文字のサンセリフ体」を使用しますが、小文字や、セリフ体を使用することもできます。
ただし、以下の画像のような個性的なフォントの使用は禁止されています。(読みにくい為)
まとめ
今回はマテリアルデザイン 『The type system』をまとめました。
Type scale generatorは、今回初めて触ってみたのですが、選んだフォントに
よって「Type scale」のfont sizeやLetter spacingが最適化するように設計されていて感動しました!
このようなツールを活用して、統一感のあるUIを作成していきたいですね!
最後まで読んでいただきありがとうございました!