役割×サイズ
すべての役割を、文字サイズの全段階で並べました。ピクセル数はおおよその目安です。大きい段階は画面幅に合わせて変わります。
| サイズ | display | body | label | voice | data |
|---|---|---|---|---|---|
| text-caption13px | 意図 | 意図 | 意図 | 意図 | 意図 |
| text-meta14px | |||||
| text-body17px | 意図 | 意図 | 意図 | 意図 | 意図 |
| text-lead21px | 意図 | 意図 | 意図 | 意図 | 意図 |
| text-h426px | 意図 | 意図 | 意図 | 意図 | 意図 |
| text-h333px | 意図 | 意図 | 意図 | 意図 | 意図 |
| text-h241px | Aあ | Aあ | Aあ | Aあ | Aあ |
| text-h152px | Aあ | Aあ | Aあ | Aあ | Aあ |
| text-display52–65px | Aあ | Aあ | Aあ | Aあ | Aあ |
| text-hero41–96px | Aあ | Aあ | Aあ | Aあ | Aあ |
使い方
使っているトークン
| --text-caption | … |
|---|---|
| --text-meta | … |
| --text-body | … |
| --text-lead | … |
| --text-h4 | … |
| --text-h3 | … |
| --text-h2 | … |
| --text-h1 | … |
| --text-display | … |
| --text-hero | … |
値はスタイルシートからその場で読み込んでいるため、サイトの表示テーマに合わせて変わります。