タイポグラフィ

INGRED UIは、読みやすさと視覚的階層を重視したタイポグラフィシステムを提供します。

フォントファミリー

デフォルトのフォントファミリーは以下の通りです：

const typography = {
  fontFamily: '"Open Sans", sans-serif',
};

タイポグラフィバリアント

見出し（Headings）

<Typography variant="h1">見出し1</Typography>  // 2.5rem
<Typography variant="h2">見出し2</Typography>  // 2rem
<Typography variant="h3">見出し3</Typography>  // 1.75rem
<Typography variant="h4">見出し4</Typography>  // 1.5rem
<Typography variant="h5">見出し5</Typography>  // 1.25rem
<Typography variant="h6">見出し6</Typography>  // 1rem

本文（Body）

<Typography variant="body1">
  メインの本文テキストです。読みやすさを重視した行間と文字サイズを設定しています。
</Typography>

<Typography variant="body2">
  やや小さめの本文テキストです。補足情報などに使用します。
</Typography>

その他のバリアント

<Typography variant="subtitle1">サブタイトル1</Typography>
<Typography variant="subtitle2">サブタイトル2</Typography>
<Typography variant="caption">キャプション</Typography>
<Typography variant="overline">オーバーライン</Typography>

スタイルのカスタマイズ

インラインスタイル

<Typography
  variant="body1"
  color="primary.main"
  fontWeight="bold"
  fontSize="1.2rem"
>
  カスタマイズされたテキスト
</Typography>

テーマを通じたカスタマイズ

const theme = createTheme({
  typography: {
    h1: {
      fontSize: '3rem',
      fontWeight: 600,
      lineHeight: 1.2
    },
    body1: {
      fontSize: '1rem',
      fontWeight: 400,
      lineHeight: 1.5
    }
  }
});

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

画面サイズに応じて適切なサイズを設定できます：

<Typography
  variant="h1"
  sx={{
    fontSize: {
      xs: '1.5rem',    // モバイル
      sm: '2rem',      // タブレット
      md: '2.5rem',    // デスクトップ
    }
  }}
>
  レスポンシブな見出し
</Typography>

アクセシビリティ

タイポグラフィシステムは以下のアクセシビリティガイドラインに従っています：

十分な文字サイズと行間
適切なコントラスト比
スケーラブルなフォントサイズ
セマンティックなHTML構造

ベストプラクティス

一貫性の維持
- 定義されたバリアントを使用
- カスタムスタイルは最小限に
視覚的階層の確立
- 見出しレベルの適切な使用
- 情報の重要度に応じたスタイリング
レスポンシブ対応
- 画面サイズに応じた適切なサイズ調整
- 読みやすさの確保
アクセシビリティへの配慮
- 適切なフォントサイズの使用
- 十分なコントラスト比の確保

よくある使用例

フォーム要素のラベル

<Box>
  <Typography variant="subtitle2" component="label" htmlFor="name">
    名前
  </Typography>
  <TextField id="name" />
</Box>

エラーメッセージ

<Typography variant="caption" color="danger.main">
  このフィールドは必須です
</Typography>

カード見出し

<Card>
  <Typography variant="h5" component="h2">
    カードタイトル
  </Typography>
  <Typography variant="body2" color="text.secondary">
    カードの説明文
  </Typography>
</Card>