---
summary: 見出しや本文などのテキストを表示する
category: Data Display
---

# Typography

見出しや本文などのテキストを、サイズ・行間・太さ・色をそろえて表示するコンポーネントです。素の `<h1>`〜`<h6>`、`<p>`、文字を表示する `<span>` の代わりに使います。ステータスやカテゴリをラベルで示すときは Sticker を使います。

## 基本の使い方

```tsx
import { Typography } from 'wip-ui'

<Typography>本文のテキスト</Typography>
```

## 使う場面

- ページタイトルやセクションの見出しを表示するとき
- 本文、説明文、キャプションなどのテキストを表示するとき
- 操作の結果やエラーなど、状態をテキストで示すとき

## 使い方

### サイズ

見た目の役割ごとの size の例です。見出しのレベル（h1〜h6）とは別に決めます。

| 見た目の役割 | size |
|---|---|
| 画面タイトル（画面に1つ） | xxxl |
| セクションのタイトル | xxl |
| ブロックのタイトル（セクションの中のまとまり） | xl |
| カードやダイアログなど、小さなまとまりのタイトル | l |
| 本文、フォームのラベル | m |
| 補足説明、テーブルのセル | s |
| 注釈、キャプション | xs |

- [should] 画面幅が狭いと見出しが大きすぎる場合は、画面幅に応じて size を変える

### 行間

- [should] お知らせ・ヘルプ・規約など、長文の読みやすさを重視するときは density="comfort" を使う
- [should] UI のラベルやテーブルのセルなど、限られたスペースにテキストを収めるときは density="dense" を使う
- [should] どちらにも当てはまらない場合は、既定の density="normal" のままにする

### 太さ

- [should] 見出しやキーワードなど、ほかのテキストと差別化して強調するときは fontWeight="bold" を使う

### テキストカラー

| color | 使う場面 |
|---|---|
| high_emphasis | 最も重要なテキスト。見出し、本文 |
| medium_emphasis | 補足的なテキスト。キャプション、説明文 |
| low_emphasis | 最も控えめなテキスト。プレースホルダー、非活性のラベル |
| informative | ヘルプテキストや案内など、情報提供 |
| positive | 「保存しました」など、成功・完了 |
| notice | 「期限が近づいています」など、警告・注意 |
| negative | バリデーションエラーやシステムエラーなど、エラー・否定 |

- [should] 上の表の場面に合う color を選ぶ

## アクセシビリティ

- [must] 見出しのレベル（h1〜h6）は、見た目の大きさではなく、コンテンツの構造の順に付ける。レベルを飛ばさない（h2 の次に h4 を置かない）
- [avoid] 見た目を変えるために、見出しのレベルを変えない。見た目は size で変える
- [must] positive・notice・negative などの色だけで状態を伝えない。テキストの内容でも状態がわかるようにする

## 実装

- [must] 見出しにするときは、component に h1〜h6 を指定する。見た目のサイズは size で別に指定する（例：`<Typography component="h2" size="xl" fontWeight="bold">`）
- [should] 文章の途中など、段落ではないテキストには component="span" などを指定する
- [should] 画面幅に応じてサイズを変えるときは、size にブレークポイントごとの値を渡す（例：`size={{ xxs: 's', m: 'l', xl: 'xxl' }}`）
- size・density・fontWeight・color・component・className 以外の属性（id、aria-*、onClick など）は、描画される要素に渡されない

## Props（自動生成）

型定義から生成した props の一覧です。react-aria-components から引き継いだ props の説明は英語です。DOM の汎用的な属性・イベントは省略しています。

### Typography

| 名前 | 型 | 既定値 | 説明 |
|---|---|---|---|
| size | Responsive<TypographySize> | m | テキストのサイズ。レスポンシブ対応でブレークポイントごとに指定可能 |
| density | "comfort" \| "normal" \| "dense" | normal | 行間の密度 |
| fontWeight | "normal" \| "bold" | normal | フォントの太さ |
| color | "high_emphasis" \| "medium_emphasis" \| "low_emphasis" \| "informative" \| "positive" \| "notice" \| "negative" | high_emphasis | テキストのセマンティックカラー |
| component | ElementType | p | レンダリングするHTML要素 |