---
title: "タイポグラフィー"
description: "本格的に使用されている一つの変数ファミリーは、Bricolage Grotesqueで、axes opsz 12–96およびweight 200–800です。"
---

## 一つの家族、三つの軸

Nibiruは**Bricolage Grotesque**（無料、Google Fonts）を使用してすべてのテキストを表示しています。このトリックのポイントは、これは2つの意味のある軸を持つ**可変フォント**であることです：

- **光学的サイズ (`opsz`, 12–96)** — 表示サイズはキャラクターが豊かくなり、細くなり、少し四角くなります；本文サイズは穏やかで開けます。
- **ウェイト (`wght`, 200–800)** — 全範囲利用可能です。
- **イタリック** — 真のイタリック体であり、傾斜ではありません。

したがって、単一のフォントファイルで表示用と本文用の両方のフェイスを提供できます。追加のフォントを読み込む必要はありません。
```css
font-family: 'Bricolage Grotesque', system-ui, sans-serif;
font-variation-settings: 'opsz' 96, 'wght' 600;   /* display */
font-variation-settings: 'opsz' 14, 'wght' 400;   /* body */
```
コードは **JetBrains Mono** を使用しています。なぜなら、静かに優れているからです。また、他のフォントと組み合わせても良くなるためです。

## 変形プリセット（ビルディングブロック）

| トークン | 変形 | 使用 |
|---|---|---|
| `--nibiru-fv-display-hero`   | `'opsz' 96, 'wght' 600` | ヒーロー H1 |
| `--nibiru-fv-display-large`  | `'opsz' 64, 'wght' 600` | H2 |
| `--nibiru-fv-display-medium` | `'opsz' 36, 'wght' 600` | H3 |
| `--nibiru-fv-heading-small`  | `'opsz' 18, 'wght' 600` | H4 |
| `--nibiru-fv-lead`           | `'opsz' 24, 'wght' 400` | リード段落 |
| `--nibiru-fv-body`           | `'opsz' 14, 'wght' 400` | 本文 |
| `--nibiru-fv-body-bold`      | `'opsz' 14, 'wght' 600` | 強調 |
| `--nibiru-fv-label`          | `'opsz' 12, 'wght' 600` | ラベル、アイブロウ |

## フォントサイズのスケール

| トークン | サイズ | 使用 |
|---|---|---|
| `--nibiru-text-xs`   | 0.72rem | ブラウザ / ラベル |
| `--nibiru-text-sm`   | 0.85rem | キャプション |
| `--nibiru-text-md`   | 0.92rem | UI コントロール、サイドバー |
| `--nibiru-text-base` | 1.00rem | 本文 |
| `--nibiru-text-lg`   | 1.18rem | リード段落 |
| `--nibiru-text-xl`   | 1.45rem | セクションの紹介 |
| `--nibiru-text-2xl`  | 2.00rem | H3 |
| `--nibiru-text-3xl`  | 2.60rem | H2 |
| `--nibiru-text-hero` | clamp(2.6rem, 1.8rem + 4vw, 4.8rem) | H1、ヒーロー |

## トレッキング

サイズが大きくなるにつれて、追跡が厳しくなる — それがヒーローを濃く感じさせ、ボディを開放感で保つ方法です。

| トークン | 値 | 使用 |
|---|---|---|
| `--nibiru-tracking-display` | −0.04em | ヒーロー / H1 |
| `--nibiru-tracking-heading` | −0.025em | H2, H3 |
| `--nibiru-tracking-body`    | −0.005em | 本文 |
| `--nibiru-tracking-label`   | 0.10em | 大文字ラベル |
| `--nibiru-tracking-eyebrow` | 0.22em | ヒーローの眉、セクション番号 |

## ヒーロー、詳しく説明
```css
h1.atelier-hero__title {
  font-family: var(--nibiru-font-display);
  font-variation-settings: var(--nibiru-fv-display-hero);
  font-size:        var(--nibiru-text-hero);
  letter-spacing:   var(--nibiru-tracking-display);
  line-height:      0.96;
  color:            var(--nibiru-ink);
  max-width:        16ch;
}

h1.atelier-hero__title em {
  font-style: normal;
  color: var(--nibiru-iris-deep);
  position: relative;
}
h1.atelier-hero__title em::after {
  content: '';
  position: absolute;
  inset: auto 0 0.05em 0;
  height: 0.18em;
  background: var(--nibiru-aurum);
  opacity: 0.3;
  z-index: -1;
}
```
それはヒーローです。イタリック体の単語は、シングルゴールドリーフアンダースコアが付けられます。それ以外は何も装飾する必要はありません。

## 本文、詳しく書く
```css
body, .prose p {
  font-family: var(--nibiru-font-text);
  font-variation-settings: var(--nibiru-fv-body);
  font-size: var(--nibiru-text-base);
  line-height: 1.7;
  letter-spacing: var(--nibiru-tracking-body);
  color: var(--nibiru-ink);
}
```
## しないでください

- ブリコラージュ・ゴトスケックをヒーローとボディに同じOPSZで使用しないでください — それはその可変軸を浪費します。
- `wght: 600`以下のボディテキストには太字を使用しないでください。600未満では太字として読み取れないためです。
- ディスプレイテキストのトレーキングを正しく行わないでください。サイズが大きくなるにつれて、より密にします。
- ブリコラージュ・イタリック全体の文章には使用しないでください — 見出し内の単語に対してのみ使用してください。スプラッシュページの"*Impress.*"トリックが参考です。
