zfb
GitHub リポジトリ

検索したい単語を入力

いつでも検索バーを開ける

字間

設定済みトークンまたは任意の値で字間を設定します。負の値も使えます。

文字と文字の間隔を調整します。短い見出しでは少し詰めたり広げたりできますが、長い文章には標準的で読みやすい間隔が向いています。

クラスと CSS の早見表

クラスの例期待される宣言
tracking-tightletter-spacing: var(--zw-tracking-tight);
tracking-[0.12em]letter-spacing: 0.12em;
例の設定

共通のプレビュー設定では spec 1、reset none、strict モード、spacingUnit 0.25rem、ブレークポイントなしを明示しています。各例は tokens.letterSpacings を宣言します。wind-demo は枠、折り返しの安全策、ラベル、色だけを設定し、文字間隔は tracking クラスが決めます。

使い方の例

名前付きの字間を比べる

同じ短い日英ラベルに、負と正の設定値をそれぞれ適用します。

名前付きの字間を比べる
HTML
<div class="wind-demo-tracking">
  <p><span class="wind-demo-label">Tight</span><span class="tracking-tight">SHORT LABEL / 短いラベル</span></p>
  <p><span class="wind-demo-label">Wide</span><span class="tracking-wide">SHORT LABEL / 短いラベル</span></p>
</div>
CSS
@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-tracking-tight: -.03em;
    --zw-tracking-wide: .1em;
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo-tracking {
  color: #223247;
  border: 1px solid #b7c5d4;
  padding: 1rem;
  overflow-wrap: anywhere;
}

.wind-demo-tracking p {
  margin: 0;
  padding: .45rem 0;
  border-bottom: 1px solid #d8e0e8;
}

.wind-demo-tracking p:last-child {
  border-bottom: 0;
}

.wind-demo-label {
  display: inline-block;
  width: 4rem;
  color: #5d6c7c;
  font-size: .8rem;
}
.tracking-tight {
  letter-spacing: var(--zw-tracking-tight);
}
.tracking-wide {
  letter-spacing: var(--zw-tracking-wide);
}
この例の設定
{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem",
      "letterSpacings": {
        "tight": "-0.03em",
        "wide": "0.1em"
      }
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo-tracking": true,
      "wind-demo-label": true
    },
    "safelist": {
      "docs-preview": [
        "tracking-tight",
        "tracking-wide"
      ]
    }
  }
}
デモ用の自作 CSS
.wind-demo-tracking { color: #223247; border: 1px solid #b7c5d4; padding: 1rem; overflow-wrap: anywhere; }
.wind-demo-tracking p { margin: 0; padding: 0.45rem 0; border-bottom: 1px solid #d8e0e8; }
.wind-demo-tracking p:last-child { border-bottom: 0; }
.wind-demo-label { display: inline-block; width: 4rem; color: #5d6c7c; font-size: 0.8rem; }

一度だけ任意値を使う

tracking-[0.12em] でトークンを増やさず、短いラベルの字間を広げます。

一度だけ任意値を使う
HTML
<p class="wind-demo-tracking-custom tracking-[0.12em]">A little extra space / 少し広めの字間</p>
CSS
@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-tracking-tight: -.03em;
    --zw-tracking-wide: .1em;
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo-tracking-custom {
  color: #223247;
  border-left: 3px solid #6d7f96;
  padding: .5rem .75rem;
}
.tracking-\[0\.12em\] {
  letter-spacing: 0.12em;
}
この例の設定
{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem",
      "letterSpacings": {
        "tight": "-0.03em",
        "wide": "0.1em"
      }
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo-tracking-custom": true
    },
    "safelist": {
      "docs-preview": [
        "tracking-[0.12em]"
      ]
    }
  }
}
デモ用の自作 CSS
.wind-demo-tracking-custom { color: #223247; border-left: 3px solid #6d7f96; padding: 0.5rem 0.75rem; }

任意値と名前付きの値

tracking-tight は tokens.letterSpacings.tight を参照します。負の値で文字を詰めることもできます。tracking-[0.12em] のような任意値は letter-spacing の CSS として検証されます。広い字間は段落や日本語を読みにくくすることがあるため、短いラベルや意図した表示に限って使うとよいでしょう。

関連ガイド: ユーティリティの文法 · バリアント

カタログの詳細

tracking

フィールド値
カタログ識別子v1.tracking
クラスパターンtracking-<suffix>
文法{"acceptedKinds":["token","arbitrary"],"arbitraryProperty":"letter-spacing","allowsFractionSlash":false,"allowsColorOpacity":false}
受け入れる値この項目には独立した値の定義がありません。
トークンカテゴリletterSpacings
負の値の規則allowed
競合グループと順位tracking (19)
並び順の順位0
セレクタの形ownElement
仕様バージョン1
出力するプロパティletter-spacing

受け入れる値

この項目には独立した値の定義がありません。

宣言テンプレート

プロパティ値の種類固定値
letter-spacingresolvednull

カタログの例

クラスの例期待される宣言
tracking-[0.08em]letter-spacing: 0.08em

Revision History

作成更新