文字間隔

クラス

詰める指定のキーには、すでに負の長さが含まれています。tracking-tight をそのまま使ってください。-tracking-tight のように符号を加えたトークン形式には対応していません。

値

ゼロ以外のプリセット値は、letter-spacing を宣言した要素のフォントサイズを基準とする em を使います。tracking-normal はゼロを指定します。ネイティブキーワードには (letter-spacing:normal) を使います。

継承した文字間隔は計算済みの長さを保つ

tracking-widest は .12em を指定し、16px のフォントサイズでは 1.92px と計算されます。32px のフォントを持つ子要素が継承するのはその長さであり、文字間隔が自動で倍になるわけではありません。

両方の子要素は同じフォントとサイズを使います。継承する letter-spacing の長さは 1.92px のままです。クラスを再適用すると、子要素の 32px のフォントサイズで .12em を評価します。

テキストによる説明

1. 親要素は font-md と tracking-widest を使います。ルートのフォントサイズが 16px なら、.12em の文字間隔は 1.92px と計算されます。
2. 両方の子の見本は font-3xl、つまり 32px を使い、単語とフォントも同じです。
3. 最初の子は、計算済みの 1.92px の文字間隔を継承します。2 番目の子は tracking-widest を再適用するため、.12em を 32px に対して計算し、3.84px になります。
4. 字形のサイズが同じでも、2 番目のテキストボックスは広くなります。色付きのガイドはレイアウト上の幅を示し、字形の描画範囲や tracking が出力するボーダーではありません。

子要素に tracking-widest を適用すると、自身の 32px のフォントサイズを基準に .12em を計算し、3.84px になります。これは、行の高さに使う単位なしの比率とは異なります。

文字間隔はテキストの間隔を調整するもので、字形を引き伸ばしません。折り返し位置が変わることもあるため、コンテナーが広がれるようにし、実際のフォントと言語で確認してください。

text-* のテキストスタイルには letter-spacing 宣言が含まれます。同じ要素で条件が同じなら、tracking-* ユーティリティはその組み合わせスタイルより後になり、文字間隔を上書きできます。長さを直接指定するには、(letter-spacing:-.03em) のようなネイティブ宣言を使います。

関連項目： 行の高さ、テキストスタイルの付随トークン、ネイティブの文字間隔の動作.

使用例

同じ語句とフォントサイズで、2 つの文字間隔を比較します。

<div>  <p class="… font-lg tracking-tight">Letter spacing shapes this line.</p>  <p class="… font-lg tracking-widest">Letter spacing shapes this line.</p></div>

@layer theme {  :root,  :host {    --tracking-tight: -.02em;    --tracking-widest: .12em;    --font-size-lg: 1.125rem  }}@layer utilities {  .font-lg {    font-size: var(--font-size-lg)  }  .tracking-tight {    letter-spacing: var(--tracking-tight)  }  .tracking-widest {    letter-spacing: var(--tracking-widest)  }}

カスタマイズ

プリセット値を変更したり、トークンを追加したりできます。--tracking-display を定義すると tracking-display が使えるようになります。

@theme {  --tracking-tight: -.03em;  --tracking-display: -.05em;}

@layer theme {  :root,  :host {    --tracking-display: -.05em  }}@layer utilities {  .tracking-display {    letter-spacing: var(--tracking-display)  }}

関連項目： テーマのディレクティブ、タイポグラフィ.