タイポグラフィトークンパターン
問題
Tailwind CSS はデフォルトで13のフォントサイズステップ（text-xs から text-9xl まで）、9つの font-weight 値（font-thin から font-black まで）、6つ以上の line-height 値、複数の font-family オプションを提供しています。チームは本文テキストに text-sm、text-base、text-lg を交互に使い、あるコンポーネントでは font-semibold を使い、別のコンポーネントでは同じ視覚的な強調のために font-bold を使うことになります。
このタイポグラフィのずれは、スペーシングやカラーのずれよりも見つけにくいものです。違いが微妙だからです — 14px vs 16px の本文テキスト、font-medium vs font-semibold など — しかし、誰も正確に指摘できないまま不一致な印象を与えるインターフェースへと蓄積されていきます。
解決方法
すべてのデフォルトタイポグラフィトークンをリセットし、小さなセマンティックセットを定義します：
- フォントサイズ：5サイズ —
caption、body、subheading、heading、display - フォントウェイト：3ウェイト —
normal、medium、bold - 行の高さ：3値 —
tight、normal、relaxed - フォントファミリー：2ファミリー —
sans、mono
@theme タイポグラフィブロック
@theme {
/* Reset ALL default typography */
--font-size-*: initial;
--font-weight-*: initial;
--line-height-*: initial;
--font-family-*: initial;
--letter-spacing-*: initial;
/* ── Font sizes (5 steps) ── */
--font-size-caption: 0.75rem; /* 12px */
--font-size-body: 1rem; /* 16px */
--font-size-subheading: 1.25rem; /* 20px */
--font-size-heading: 1.75rem; /* 28px */
--font-size-display: 2.5rem; /* 40px */
/* ── Font weights (3 steps) ── */
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-bold: 700;
/* ── Line heights (3 steps) ── */
--line-height-tight: 1.25;
--line-height-normal: 1.5;
--line-height-relaxed: 1.75;
/* ── Font families (2 families) ── */
--font-family-sans: "Inter", system-ui, sans-serif;
--font-family-mono: "JetBrains Mono", ui-monospace, monospace;
}
この設定後：
text-sm— ビルドエラー（--font-size-smトークンが存在しない）font-semibold— ビルドエラー（--font-weight-semiboldトークンが存在しない）text-body— 動作する（font-size: 1remに解決される）font-bold— 動作する（font-weight: 700に解決される）leading-normal— 動作する（line-height: 1.5に解決される）
デモ
デフォルトフォントサイズ vs セマンティックタイポグラフィトークン
左のカラムは Tailwind の13のデフォルトフォントサイズステップ — text-xs から text-9xl までを示しています。右のカラムはそれらを置き換える5つのセマンティックサイズです。各セマンティックトークンはタイプ階層内の特定の役割に対応しています。
タイポグラフィスケールカード
5つのセマンティックサイズすべてに対応するウェイトと行の高さを示す視覚的な階層カードです。これがプロジェクトの完全なタイポグラフィ語彙です。
セマンティックタイポグラフィを使った記事レイアウト
5つのセマンティックフォントサイズ、3つのウェイト、3つの行の高さのみを使った完全な記事レイアウトです。text-lg や font-semibold のような数値の Tailwind クラスは使われていません — すべてがセマンティックトークンに対応しています。
使い分け
タイポグラフィトークンは、カラートークンや親記事のスペーシング戦略と自然に組み合わさります。これらを合わせることで、視覚的なずれの最も一般的な3つの原因 — スペーシング、カラー、タイポグラフィ — を制約するタイトなデザイントークンシステムの核を形成します。
タイポグラフィトークンを適用すべきケース：
- プロジェクトで実際に3つ以上のフォントサイズが使われている場合 — ちょうど5つに制約しましょう
- 複数の開発者がマークアップを書き、それぞれが異なるテキストサイズを使っている場合
- デザインシステムがピクセル値ではなく名前でタイプスケールを定義している場合（例：「body」「heading」）