material-design-3-typography

Material Design 3 タイポグラフィ

概要

このスキルでは、Material Design 3（M3）のタイポグラフィの実装方法を説明します。ベースラインの Material You タイプスケールから、M3 Expressive の30スタイルに拡張されたタイプシステムまでを網羅し、明瞭で読みやすく、感情に訴えるテキスト階層を作成します。

キーワード：Material Design 3、M3、タイポグラフィ、タイプスケール、可変フォント、テキスト階層、読みやすさ、フォントの太さ、行の高さ、文字間隔、強調された文字、中程度のコントラスト、Material You

コア原則

タイポグラフィの考え方

M3 のタイポグラフィは、次の点を重視します。

1. 可変フォント：表現豊かなテキストに向けて、太さと幅を動的に調整できるようにします
2. 明確な階層：コンテンツを読み進めるための、明確に区別されたタイプスケールを設けます
3. 読みやすさ：デバイスや状況を問わず読みやすいよう最適化します
4. 柔軟性：さまざまなコンテンツのニーズや画面サイズに適応します
5. 表現力：個性や感情を伝えるタイポグラフィを使用します
6. 強調：すべてのタイプロールにベースライン版と強調版を用意します（M3 Expressive）

タイプスケール

ベースラインのタイプスケール（15スタイル）

M3 では、さまざまな UI 要素に対応する明確なロールを備えた、包括的なタイプスケールを定義しています。次の15のベースラインスタイルが、すべての M3 タイポグラフィの基盤となります。

ディスプレイスタイル（大きく目を引くテキスト）

ディスプレイ ラージ：

• フォント：Roboto（またはブランドフォント）
• サイズ：57px / 3.562rem
• 行の高さ：64px / 4rem
• 太さ：400（レギュラー）
• 文字間隔：-0.25px
• 用途：最大サイズの見出し、ヒーローテキスト

ディスプレイ ミディアム：

• サイズ：45px / 2.812rem
• 行の高さ：52px / 3.25rem
• 太さ：400
• 文字間隔：0
• 用途：大きなセクション見出し

ディスプレイ スモール：

• サイズ：36px / 2.25rem
• 行の高さ：44px / 2.75rem
• 太さ：400
• 文字間隔：0
• 用途：小さめの見出し、カードタイトル

ヘッドラインスタイル（構造を示す見出し）

ヘッドライン ラージ：

• サイズ：32px / 2rem
• 行の高さ：40px / 2.5rem
• 太さ：400
• 文字間隔：0
• 用途：ページタイトル、主要セクション

ヘッドライン ミディアム：

• サイズ：28px / 1.75rem
• 行の高さ：36px / 2.25rem
• 太さ：400
• 文字間隔：0
• 用途：サブセクションの見出し

ヘッドライン スモール：

• サイズ：24px / 1.5rem
• 行の高さ：32px / 2rem
• 太さ：400
• 文字間隔：0
• 用途：コンポーネントの見出し、ダイアログのタイトル

タイトルスタイル（コンポーネント内での強調）

タイトル ラージ：

• サイズ：22px / 1.375rem
• 行の高さ：28px / 1.75rem
• 太さ：400
• 文字間隔：0
• 用途：大きなリスト項目、強調テキスト

タイトル ミディアム：

• サイズ：16px / 1rem
• 行の高さ：24px / 1.5rem
• 太さ：500（ミディアム）
• 文字間隔：0.15px
• 用途：カードタイトル、リスト見出し

タイトル スモール：

• サイズ：14px / 0.875rem
• 行の高さ：20px / 1.25rem
• 太さ：500
• 文字間隔：0.1px
• 用途：コンパクトなカードタイトル、タブ

ボディスタイル（主要コンテンツ）

ボディ ラージ：

• サイズ：16px / 1rem
• 行の高さ：24px / 1.5rem
• 太さ：400
• 文字間隔：0.5px
• 用途：長文コンテンツ、記事

ボディ ミディアム：

• サイズ：14px / 0.875rem
• 行の高さ：20px / 1.25rem
• 太さ：400
• 文字間隔：0.25px
• 用途：標準の本文テキスト

ボディ スモール：

• サイズ：12px / 0.75rem
• 行の高さ：16px / 1rem
• 太さ：400
• 文字間隔：0.4px
• 用途：キャプション、補助テキスト

ラベルスタイル（UI 要素）

ラベル ラージ：

• サイズ：14px / 0.875rem
• 行の高さ：20px / 1.25rem
• 太さ：500
• 文字間隔：0.1px
• 用途：ボタンのテキスト、ナビゲーション項目

ラベル ミディアム：

• サイズ：12px / 0.75rem
• 行の高さ：16px / 1rem
• 太さ：500
• 文字間隔：0.5px
• 用途：小さなボタン、チップ

ラベル スモール：

• サイズ：11px / 0.687rem
• 行の高さ：16px / 1rem
• 太さ：500
• 文字間隔：0.5px
• 用途：極小のラベル、タイムスタンプ

強調されたタイプスケール（追加の15スタイル — M3 Expressive）

M3 Expressive では、ベースラインの各スタイルに1つずつ、強調されたバリアントが15種類追加されています。強調スタイルは、重要な場面、行動喚起、編集上の強調を際立たせるために、より太く、大きく、またはダイナミックです。

役割	ベースライン	強調
ディスプレイ ラージ	57px / 400	57px / 700
ディスプレイ ミディアム	45px / 400	45px / 700
ディスプレイ スモール	36px / 400	36px / 700
ヘッドライン ラージ	32px / 400	32px / 700
ヘッドライン ミディアム	28px / 400	28px / 700
ヘッドライン スモール	24px / 400	24px / 600
タイトル ラージ	22px / 400	22px / 700
タイトル ミディアム	16px / 500	16px / 700
タイトル スモール	14px / 500	14px / 700
ボディ ラージ	16px / 400	16px / 700
ボディ ミディアム	14px / 400	14px / 700
ボディ スモール	12px / 400	12px / 700
ラベル ラージ	14px / 500	14px / 800
ラベル ミディアム	12px / 500	12px / 800
ラベル スモール	11px / 500	11px / 800

強調スタイルを使う場面：

• 視覚的な重みを強くした行動喚起や主要ボタン
• ユーザーがすぐに気づくべき重要な見出しや数値
• コンテンツレイアウトにおける編集上の強調
• ダッシュボードや概要における重要なデータポイント
• オンボーディング画面や機能のハイライト

ベースラインと強調の組み合わせ：

• リズムと勢いを生み出すため、ベースラインスタイルと組み合わせて強調スタイルを控えめに使います
• 1つの画面ですべてのスタイルを強調にしないでください。ベースラインと強調のコントラストによって階層が生まれます

ミディアムコントラスト（M3 Expressive のデフォルト）

M3 Expressive では、タイポグラフィのデフォルトのアプローチとして「ミディアムコントラスト」が導入されています。

• 読みやすさと視覚的な魅力のバランスを取ります
• 低コントラストのアプローチよりアクセシビリティに優れ、高コントラストよりも表現力があります
• 表現力のある文字の選択を、デバイスの種類を問わず高いアクセシビリティで実現します
• ベースラインと強調のタイプスケールにおけるウェイトとサイズの慎重な組み合わせによって実現します

フォントの推奨事項

システムフォント

Roboto（M3 のデフォルト）：

• 汎用性が高く、非常に読みやすい
• 可変フォント形式で利用可能
• ウェイト：100〜900
• ディスプレイテキストとボディテキストの両方に使用できます

Roboto Flex（可変フォント）：

• 幅とウェイトの軸に対応
• M3 Expressive に最適
• 動的な調整が可能

ブランドフォント

ブランドフォントを選ぶ際は、以下の特徴を考慮してください。

ディスプレイフォント：

• 個性的な印象
• 大きなサイズでも高い読みやすさ
• 検討するフォント：Poppins、Montserrat、Work Sans、DM Sans

ボディフォント：

• 小さなサイズでも優れた読みやすさ
• 長文コンテンツに適している
• 検討するフォント：Inter、Open Sans、Source Sans Pro、Noto Sans

可変フォントの実装

@font-face {
  font-family: 'Roboto Flex';
  src: url('RobotoFlex-Variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-stretch: 75% 125%;
}

.dynamic-text {
  font-family: 'Roboto Flex', sans-serif;
  font-variation-settings: 
    'wght' 400,
    'wdth' 100;
}

実装ガイドライン

CSS タイプトークン

CSS カスタムプロパティを使ってタイポグラフィトークンを定義します。M3 Expressive では、ベースラインとともに強調バリアントが追加されています。

:root {
  /* Font families */
  --md-sys-typescale-font-family-brand: 'Roboto', sans-serif;
  --md-sys-typescale-font-family-plain: 'Roboto', sans-serif;
  
  /* Display Large — Baseline */
  --md-sys-typescale-display-large-font: var(--md-sys-typescale-font-family-brand);
  --md-sys-typescale-display-large-size: 3.562rem;
  --md-sys-typescale-display-large-line-height: 4rem;
  --md-sys-typescale-display-large-weight: 400;
  --md-sys-typescale-display-large-tracking: -0.25px;
  
  /* Display Large — Emphasized (M3 Expressive) */
  --md-sys-typescale-display-large-emphasized-weight: 700;
  
  /* Headline Large — Baseline */
  --md-sys-typescale-headline-large-font: var(--md-sys-typescale-font-family-brand);
  --md-sys-typescale-headline-large-size: 2rem;
  --md-sys-typescale-headline-large-line-height: 2.5rem;
  --md-sys-typescale-headline-large-weight: 400;
  --md-sys-typescale-headline-large-tracking: 0;
  
  /* Headline Large — Emphasized (M3 Expressive) */
  --md-sys-typescale-headline-large-emphasized-weight: 700;
  
  /* Body Large — Baseline */
  --md-sys-typescale-body-large-font: var(--md-sys-typescale-font-family-plain);
  --md-sys-typescale-body-large-size: 1rem;
  --md-sys-typescale-body-large-line-height: 1.5rem;
  --md-sys-typescale-body-large-weight: 400;
  --md-sys-typescale-body-large-tracking: 0.5px;
  
  /* Body Large — Emphasized (M3 Expressive) */
  --md-sys-typescale-body-large-emphasized-weight: 700;
  
  /* Label Large — Baseline */
  --md-sys-typescale-label-large-font: var(--md-sys-typescale-font-family-plain);
  --md-sys-typescale-label-large-size: 0.875rem;
  --md-sys-typescale-label-large-line-height: 1.25rem;
  --md-sys-typescale-label-large-weight: 500;
  --md-sys-typescale-label-large-tracking: 0.1px;
  
  /* Label Large — Emphasized (M3 Expressive) */
  --md-sys-typescale-label-large-emphasized-weight: 800;
}

タイプクラス

ベースラインと強調の両方のスタイルに対応する、再利用可能なタイプクラスを作成します。

/* Baseline styles */
.display-large {
  font-family: var(--md-sys-typescale-display-large-font);
  font-size: var(--md-sys-typescale-display-large-size);
  line-height: var(--md-sys-typescale-display-large-line-height);
  font-weight: var(--md-sys-typescale-display-large-weight);
  letter-spacing: var(--md-sys-typescale-display-large-tracking);
}

.headline-large {
  font-family: var(--md-sys-typescale-headline-large-font);
  font-size: var(--md-sys-typescale-headline-large-size);
  line-height: var(--md-sys-typescale-headline-large-line-height);
  font-weight: var(--md-sys-typescale-headline-large-weight);
  letter-spacing: var(--md-sys-typescale-headline-large-tracking);
}

.body-large {
  font-family: var(--md-sys-typescale-body-large-font);
  font-size: var(--md-sys-typescale-body-large-size);
  line-height: var(--md-sys-typescale-body-large-line-height);
  font-weight: var(--md-sys-typescale-body-large-weight);
  letter-spacing: var(--md-sys-typescale-body-large-tracking);
}

/* Emphasized styles (M3 Expressive) */
.display-large-emphasized {
  font-family: var(--md-sys-typescale-display-large-font);
  font-size: var(--md-sys-typescale-display-large-size);
  line-height: var(--md-sys-typescale-display-large-line-height);
  font-weight: var(--md-sys-typescale-display-large-emphasized-weight);
  letter-spacing: var(--md-sys-typescale-display-large-tracking);
}

.headline-large-emphasized {
  font-family: var(--md-sys-typescale-headline-large-font);
  font-size: var(--md-sys-typescale-headline-large-size);
  line-height: var(--md-sys-typescale-headline-large-line-height);
  font-weight: var(--md-sys-typescale-headline-large-emphasized-weight);
  letter-spacing: var(--md-sys-typescale-headline-large-tracking);
}

.body-large-emphasized {
  font-family: var(--md-sys-typescale-body-large-font);
  font-size: var(--md-sys-typescale-body-large-size);
  line-height: var(--md-sys-typescale-body-large-line-height);
  font-weight: var(--md-sys-typescale-body-large-emphasized-weight);
  letter-spacing: var(--md-sys-typescale-body-large-tracking);
}

.label-large-emphasized {
  font-family: var(--md-sys-typescale-label-large-font);
  font-size: var(--md-sys-typescale-label-large-size);
  line-height: var(--md-sys-typescale-label-large-line-height);
  font-weight: var(--md-sys-typescale-label-large-emphasized-weight);
  letter-spacing: var(--md-sys-typescale-label-large-tracking);
}

タイポグラフィのベストプラクティス

階層

1. スケールを使う：カスタムサイズは作成せず、定義済みのスケールを使います
2. レベルを飛ばす場合は控えめにする：1つのレベルは飛ばせますが、明確な階層は維持してください
3. 一貫して適用する：同じ種類のコンテンツには、同じスタイルを使います
4. 強調には色を使う：テキストには色のロール（on-surface、on-primary など）を使います

読みやすさ

1. 行の長さ：ボディテキストは1行あたり50〜75文字にします
2. 行の高さ：ボディテキストは1.4〜1.6にします（スケールに組み込み済み）
3. コントラスト：ボディテキストは最低4.5:1、大きなテキストは3:1にします
4. テキストの色：セマンティックカラーのトークン（on-surface、on-background）を使います

レスポンシブなタイポグラフィ

/* Mobile-first base sizes */
:root {
  --fluid-display-large: clamp(2.5rem, 5vw + 1rem, 3.562rem);
  --fluid-headline-large: clamp(1.5rem, 3vw + 0.5rem, 2rem);
}

.display-large {
  font-size: var(--fluid-display-large);
}

/* Or use container queries for component-level responsiveness */
@container (min-width: 600px) {
  .card-title {
    font-size: var(--md-sys-typescale-title-large-size);
  }
}

アクセシビリティ

1. ズームへの対応：すべてのサイズに相対単位（rem、em）を使います
2. 明確な階層：色に頼らず、視覚的な階層が明確になるようにします
3. フォーカス状態：テキストリンクに視認できるフォーカスインジケーターがあることを確認します
4. スクリーンリーダー：セマンティック HTML（h1-h6、p など）を使います

パフォーマンス

1. フォントの読み込み：テキストの表示がブロックされないように、font-display: swap を使用します
2. フォントのサブセット化：必要な文字とウェイトのみを読み込みます
3. 可変フォント：複数のウェイトを使う代わりに、単一の可変フォントファイルを使用します
4. システムフォント：パフォーマンス向上のため、システムフォントスタックを検討します

@font-face {
  font-family: 'Roboto';
  src: url('roboto.woff2') format('woff2');
  font-display: swap;
  /* Subset to Latin characters */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153;
}

高度なタイポグラフィ

表現力豊かなテキストエフェクト

可変フォントのアニメーション：

@keyframes weight-shift {
  from { font-variation-settings: 'wght' 300; }
  to { font-variation-settings: 'wght' 700; }
}

.animated-heading {
  animation: weight-shift 2s ease-in-out infinite alternate;
}

グラデーションテキスト：

.gradient-headline {
  background: linear-gradient(
    90deg,
    var(--md-sys-color-primary),
    var(--md-sys-color-tertiary)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

テキストの省略

/* Single line truncation */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Multi-line truncation */
.truncate-multi {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

よく使われるタイポグラフィのパターン

カードのタイトルと本文

<div class="card">
  <h3 class="title-large">Card Title</h3>
  <p class="body-medium">Card description text goes here.</p>
</div>

サブヘッダー付きのページヘッダー

<header>
  <h1 class="headline-large">Page Title</h1>
  <p class="body-large">Supporting description or subtitle</p>
</header>

ボタンのテキスト

<button class="label-large">Action</button>

リスト項目

<li>
  <span class="title-medium">List Item Title</span>
  <span class="body-small">Supporting text</span>
</li>

タイポグラフィ実装のチェックリスト

M3 タイポグラフィを実装する際は、次の点を確認してください。

• スケールに含まれる15種類の基本タイポグラフィスタイルがすべて CSS トークンとして定義されている
• 15種類の強調タイポグラフィスタイルがすべて定義されている（M3 Expressive）
• Roboto または適切なブランドフォントが読み込まれている
• 利用可能な場合は可変フォントを使用している
• 表示のブロックを防ぐため、フォント表示に swap が設定されている
• すべてのテキストでセマンティックカラーのトークンを使用している
• 適切な階層（display > headline > title > body）が確立されている
• 強調スタイルは重要な場面や行動喚起に限定して使用している
• 行の高さと字間が仕様に合っている
• 画面サイズに応じたレスポンシブな拡大・縮小を実装している
• すべてのサイズに相対単位（rem/em）を使用している
• テキストのコントラストが WCAG の要件を満たしている（最低 4.5:1）
• フォントウェイトを一貫して使用している（基本は 400、ラベルは 500、強調は 700 以上）
• セマンティック HTML タグが視覚的な階層に対応している
• 長文コンテンツの行長が適切である（50～75文字）
• すべてのテキストが標準表示時と拡大表示時に読みやすい
• パフォーマンスが最適化されている（フォントのサブセット化、読み込み戦略）
• 読みやすさと表現力のバランスを取るため、中程度のコントラストの方針に従っている

リソース

• examples/type-scale.html — 適切なサイズ、ウェイト、行の高さを使った M3 の完全なタイポグラフィスケール（display、headline、title、body、label）を示すインタラクティブな HTML の例です。階層をプレビューするには、ブラウザーで開いてください。
• M3 タイポグラフィの概要：https://m3.material.io/styles/typography/overview
• Material Design Tokens（タイポグラフィ）：https://github.com/material-foundation/material-tokens
• Google Fonts：https://fonts.google.com/