Material Design 3 要点まとめ #14 Typography
Material Design 3 ガイドラインの要点をまとめたものです。
第14回はTypographyの章。前回から4ヶ月越しになってしまいました。
一旦最終回です。
Overview
M2からの更新ポイント
バリアブルフォントRoboto FlexとRoboto Serifが登場。
タイプスタイルは役割によって分類された5種類（ディスプレイ、ヘッドライン、タイトル、ボディ、ラベル）に。シンプルになった。
タイポグラフィもデザイントークンで管理。
Fonts
・デフォルトのフォント
・（補足）バリアブルフォントとは？
デフォルトのフォント
基本は今まで通りRoboto。
RobotoをもとにしたバリアブルフォントRoboto Flexが新規追加された。Robotoのプロポーションをベースにカスタマイズできる。
Roboto Serifも追加。セリフ体のバリアブルフォント。
おなじみNotoファミリーもあるよ。Robotoと互換性のある多言語フォント。
（補足）バリアブルフォントとは？
バリアブルフォントとは、カスタマイズ可能ないくつかのパラメータを持つ可変フォント。
従来の「あらかじめ用意されたフォントファミリーから選択する」方法よりも柔軟でバリエーション豊かな書体表現が可能。
詳細は後述。
Type scale & tokens
・タイプスケールとは
・タイポグラフィトークン
・タイプスケールのカスタマイズ
・4つのカスタマイズ軸
タイプスケールとは
アプリ全体で使用できるフォントスタイルの選択肢。
一貫性を保ったまま様々な目的に柔軟に対応できるよう設計されている。
5つのスタイルと3つのサイズの計15種類の組み合わせで構成される。
5つのスタイル：ディスプレイ、ヘッドライン、タイトル、ボディ、ラベル
3つのサイズ：L、M、S
MDのデフォルトではすべてRobotoを使用。
タイポグラフィトークン
フォント、行の高さ、サイズ、トラッキング、ウェイトをそれぞれ個別にデザイントークンで実装することができる。
例えば、「Display large」の初期値は以下のように定義されている。
（デザイントークン）： （値）
md.sys.typescale.display-large.font： Roboto
md.sys.typescale.display-large.line-height： 64
md.sys.typescale.display-large.size： 57
md.sys.typescale.display-large.tracking： -0.25
md.sys.typescale.display-large.weight： 400
タイプスケールのカスタマイズ
用意されたタイプスケールを基準に、スタイルを追加・削除したり、フォントを置き換えたりしてカスタマイズすることができる。
デフォルトのスケールでは 14 を基準に1.125倍ずつ変化していくサイズのラインナップの中から、微妙な差異を避けてコントラストを意識した15種類のサイズが選ばれている。
フォントをカスタマイズする場合は、そのフォントのデザインに合わせて行間や文字間を調整しましょう。
文字サイズの単位はAndroidだと sp 、Webだと rem が標準。最近のブラウザのデフォルトは16pxなので、1.0sp = 0.0625rem になる。
行間の単位はAndroidだと em 、Webだと rem が標準。
4つのカスタマイズ属性
バリアブルフォントは可変可能な4つの属性（ウェイト、グレード、幅、オプティカルサイズ）を持つ。
ウェイト：書体の太さ。レギュラーやボールドが一般的だが、可変書体では無段階での変化が可能。
グレード：文字の太さを微調整する。ウェイトと似ているが、こちらはより細かい調整に使用する。文字幅やレイアウトには影響しない。例えば、ダークモードとライトモードを切り替えると、同じ設定にもかかわらず、同じ文字が重く見えることがある。この対策として、マイナスグレードを使用することができる。
幅：書体の文字が占める水平方向のスペースの大きさのこと。幅が狭いほど一行あたりの文字数が多くなり、幅が広いほど個性が出る。
オプティカルサイズ：さまざまなサイズでの使用に最適化するために微調整されたデザインのこと。フォントサイズに合わせたオプティカルサイズを使用することで、スモールサイズでは読みやすさを重視しつつラージサイズでは字形の複雑さを表現したり、ウェイトや幅のバリエーションをつけたりすることが可能。
グレード、オプティカルサイズあたりを使いこなすことで夢が広がります。今までデジタルプロダクトのデザインでは割り切るしかなかったような、グラフィックデザインっぽい繊細な調整が実現可能になったんだなーと。
Applying type
・5つのスタイルの役割
・組版（レイアウト）
・読みやすさの確保
・アイコンと組み合わせて使う
・アクセシビリティ
5つのスタイルの役割
タイプスケールにおけるディスプレイ、ヘッドライン、タイトル、ボディ、ラベルの5つ。
ディスプレイ：短く重要なテキストに適し、表現豊かなフォントが推奨される。用途に応じた光学サイズの設定が必要。
ヘッドライン：小さな画面での短い強調テキストに適し、主要テキストや重要コンテンツの表示に用いられる。表現力豊かな書体を使うこともできるが、読みやすさを保つために行の高さと文字間隔を適切に設定する必要がある。
タイトル：ヘッドラインより小さく、中程度の強調テキストに適しており、本文やコンテンツの二次的な部分を分割するのに用いられる。個性的なフォントを使う際には、特に注意が必要である。
ボディ：本文スタイルは、アプリ内の長い文章に使用される。小さいサイズでも読みやすく、長い文章でも快適に読むことができる、ボディスタイル用の書体を使用する。個性的だったり装飾的なフォントは、小さいサイズでは読みにくくなるため使用しない。
ラベル：コンポーネント内のテキストや、キャプションなどコンテンツボディ内の非常に小さいテキストに使用される。例えば、ボタンには、label large スタイルを使用する。
組版（レイアウト）
パディング、バウンディングボックス、ベースラインを利用してテキストを読みやすくレイアウトする。
WebとiOSの場合、パディングとバウンディングボックスを使用する。
行の高さとバウンディングボックスの高さが同じ。
パディングでボックス間の間隔を制御する。
Androidの場合、ベースラインを使用する。
ベースラインからベースラインまでの距離でスペーシングする。
読みやすさの確保
行の長さ：本文が長い場合は、40文字から60文字が推奨。短い文章の場合は、20文字から40文字が理想的な長さ。
行の高さ：ディスプレイ、ヘッドライン、タイトルなどでは文字サイズの1.2倍を推奨。ボディやラベルでは1.5倍程度を推奨。
等幅数字：表や時計など数値が頻繁に変化する箇所には、プロポーショナル数字ではなく、等幅の形式を使用する。
この小セクションはM3に限らずデザインの原則として基準にできそうですね。
アイコンと組み合わせて使う
Material Symbolとフォントを組み合わせて使う場合、シンボルはテキストと同じサイズ・同じウェイトを使用する。
記号のベースラインを文字サイズの約11.5%にシフトダウンする。
アクセシビリティ
テキストと背景色のカラーコントラスト比がアクセシビリティ観点で非常に重要。
詳細はこちらの記事のAccessibilityを参照。
この記事が気に入ったらサポートをしてみませんか？