UI typography ガイド - 界面フォント設計

UIタイポグラフィファンダメンタルズ

UIタイポグラフィが重要な理由

UIデザインにおけるタイポグラフィは、ユーザー体験、可読性、アプリケーション全体の印象に直接影響を与えます。良いタイポグラフィは、インターフェースを通じてユーザーを導き、使いやすさを向上させます。

可読性を優先

UIフォントは、スタイルよりも可読性を優先する必要があります。ユーザーは、疲れることなく、迅速に情報をスキャンして理解する必要があります。

文字の区別を明確に
適切な行間
良好なコントラスト比
適切なフォントサイズ

一貫性

インターフェース全体で一貫性のあるタイポグラフィを維持して、ユーザー体験を統一させます。

一貫したフォントファミリー
均一なサイズスケール
標準化されたスペーシング
予測可能な階層

UIフォント選定

UIフォント

UIデザインでは、画面上での可読性が高いため、サンセリフフォントが一般的に好まれます。

特徴:

クリーンで現代的
優れた画面可読性
小さいサイズでも優れている
広範な言語サポート

UIフォントの太さ

異なるフォントの太さを使用して、階層と重要な情報を強調します。

ライト (300)

セカンダリテキスト、キャプション

レギュラー (400)

本文、メインコンテンツ

ボールド (700)

見出し、強調

タイポグラフィスケール

レスポンシブタイポグラフィスケール

デスクトップスケール

H1: 48px / 56px行間
H2: 36px / 44px行間
H3: 24px / 32px行間
本文: 16px / 24px行間
小: 14px / 20px行間

モバイルスケール

H1: 32px / 40px行間
H2: 28px / 36px行間
H3: 20px / 28px行間
本文: 16px / 24px行間
小: 14px / 20px行間

可読性最適化

行長

可読性を向上させるための最適な行長は45-75文字です。これにより、目の疲れを防ぎ、読書速度を向上させます。

ガイドライン:

デスクトップ: 50-75文字
タブレット: 40-60文字
モバイル: 30-50文字

行間

適切な行間（リーディング）は、可読性を向上させ、目の疲労を軽減します。

推奨比率:

見出し: 1.1-1.3
本文テキスト: 1.4-1.6
小さいテキスト: 1.5-1.7

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

CSS実装

レスポンシブタイポグラフィには、CSSメディアクエリと相対単位を使用します:

/* 基本スタイル */
body {
  font-size: 16px;
  line-height: 1.5;
}

/* レスポンシブタイポグラフィ */
@media (min-width: 768px) {
  body {
    font-size: 18px;
  }
}

@media (min-width: 1024px) {
  body {
    font-size: 20px;
  }
}

ビューポート単位

画面サイズに応じてスケーリングするために、ビューポート単位（vw）を使用します。

フリッドタイポグラフィ

CSS clamp()を使用して、最小値と最大値の間で滑らかにスケーリングするフリッドタイポグラフィを実装します。

アクセシビリティに関する考慮事項

カラーコントラスト

テキストと背景の色のコントラストを十分に確保します（WCAG AA基準: 4.5:1）。

フォントサイズ

モバイルデバイスでの本文テキストの最小サイズを16pxにして、ユーザーにフォントサイズを増やすオプションを提供します。

スクリーンリーダー

セマンティックHTMLと適切な見出し階層を使用して、スクリーンリーダーとの互換性を確保します。

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

主要原則

はじめに明確なタイポグラフィ階層を作成
一貫性のあるスペーシングとアライメントを使用
異なるデバイスでの可読性をテスト
Webフォントのローディングパフォーマンスを考慮
互換性を向上させるためにフォールバックフォントを提供
強調に適切なフォントの太さを使用
モバイルでの十分なタッチターゲットを確保
実際のユーザーとフィードバックを収集

UIタイポグラフィガイド