タイポグラフィー

本格的に使用されている一つの変数ファミリーは、Bricolage Grotesqueで、axes opsz 12–96およびweight 200–800です。

Stable Reading time ~ 2 min Edit on GitHub

一つの家族、三つの軸

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

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

したがって、単一のフォントファイルで表示用と本文用の両方のフェイスを提供できます。追加のフォントを読み込む必要はありません。

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	ヒーローの眉、セクション番号

ヒーロー、詳しく説明

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;
}

それはヒーローです。イタリック体の単語は、シングルゴールドリーフアンダースコアが付けられます。それ以外は何も装飾する必要はありません。

本文、詳しく書く

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.”トリックが参考です。