タイポグラフィガイドライン

概要

このドキュメントでは、Aether Design Systemにおけるタイポグラフィの使用方法について説明します。統一感のある読みやすいUIを実現するために、フォントサイズ、行間、ウェイトなどの指針を定めています。

フォントファミリー

プライマリフォント

font-family: "Hiragino Sans", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;

• 日本語: ヒラギノ角ゴを優先し、メイリオをフォールバック
• 英数字: システムフォントを使用

フォントサイズとスケール

見出し

• H1: 32px (2rem) - ページタイトル用
• H2: 24px (1.5rem) - セクションタイトル用
• H3: 20px (1.25rem) - サブセクション用
• H4: 18px (1.125rem) - 小見出し用

本文

• Large: 16px (1rem) - 標準本文サイズ
• Medium: 14px (0.875rem) - 補足テキスト
• Small: 12px (0.75rem) - キャプション、注釈

行間（Line Height）

読みやすさを確保するため、以下の行間を設定します：

• 見出し: 1.2-1.4
• 本文: 1.6-1.8
• 小さなテキスト: 1.4-1.6

フォントウェイト

• Regular (400): 標準的な本文
• Medium (500): 重要な情報、ラベル
• Bold (700): 見出し、強調テキスト

使用例

コード例

// 見出しコンポーネントの例
const Heading = styled.h1`
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
  color: #333;
  margin-bottom: 1rem;
`;

// 本文コンポーネントの例  
const Body = styled.p`
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  color: #666;
`;

アクセシビリティ

• 最小フォントサイズは12px以上を維持
• コントラスト比はWCAG AAレベル（4.5:1以上）を確保
• ユーザーがフォントサイズを変更できるよう、相対単位（rem）を使用

注意事項

• 複数のフォントウェイトを混在させすぎない
• 階層構造を明確にするため、サイズの差を十分に設ける
• モバイルデバイスでは、より大きなフォントサイズを検討する