文字與排版
字母間距letter-spacing
Setting the spacing between text characters.
Overview
| Class | Declarations |
|---|---|
tracking:tightest | letter-spacing: var(--tracking-tightest);
|
tracking:tighter | letter-spacing: var(--tracking-tighter);
|
tracking:tight | letter-spacing: var(--tracking-tight);
|
tracking:normal | letter-spacing: var(--tracking-normal);
|
tracking:wide | letter-spacing: var(--tracking-wide);
|
tracking:wider | letter-spacing: var(--tracking-wider);
|
tracking:widest | letter-spacing: var(--tracking-widest);
|
tracking:<value> | letter-spacing: <value>;
|
Examples
Basic usage
Use tokens like tracking:tight and tracking:wider to set letter spacing.
tracking:tightest
LETTERS ALIGN WITH PERFECT RHYTHM
tracking:tighter
LETTERS ALIGN WITH PERFECT RHYTHM
tracking:tight
LETTERS ALIGN WITH PERFECT RHYTHM
tracking:normal
LETTERS ALIGN WITH PERFECT RHYTHM
tracking:wide
LETTERS ALIGN WITH PERFECT RHYTHM
tracking:wider
LETTERS ALIGN WITH PERFECT RHYTHM
tracking:widest
LETTERS ALIGN WITH PERFECT RHYTHM
<div class="tracking:tightest">LETTERS ALIGN WITH PERFECT RHYTHM</div><div class="tracking:tighter">LETTERS ALIGN WITH PERFECT RHYTHM</div><div class="tracking:tight">LETTERS ALIGN WITH PERFECT RHYTHM</div><div class="tracking:normal">LETTERS ALIGN WITH PERFECT RHYTHM</div><div class="tracking:wide">LETTERS ALIGN WITH PERFECT RHYTHM</div><div class="tracking:wider">LETTERS ALIGN WITH PERFECT RHYTHM</div><div class="tracking:widest">LETTERS ALIGN WITH PERFECT RHYTHM</div>Use tracking:* to control letter spacing. Tight tracking is common for large headings, while wider tracking is often used for short uppercase labels.
<h1 class="tracking:tight">Product launch</h1><p class="tracking:wide font:xs text-transform:uppercase">Preview</p>Generated CSS
@layer theme { :root { --tracking-tight: -.02em; --tracking-wide: .02em }}@layer utilities { .tracking\:tight { letter-spacing: var(--tracking-tight) } .tracking\:wide { letter-spacing: var(--tracking-wide) }}Use a custom value
Use tracking:* with an explicit CSS value when the spacing is a local typographic adjustment.
<span class="tracking:.04em">Custom tracking</span>Avoid wide tracking on long paragraphs because it reduces readability.
Apply conditionally
Apply styles based on different states using selectors and conditional queries.
<div class="tracking:normal tracking:tight@sm tracking:wide:hover tracking:normal@print">...</div>