Letter spacing
Set letter spacing with a configured token or arbitrary value; negatives are allowed.
Adjust the spacing between letters. Slightly tight tracking can suit a short display label, while neutral or open spacing is often easier to read in longer passages.
Quick reference
| Example class | Expected declarations |
|---|---|
tracking-tight | letter-spacing: var(--zw-tracking-tight); |
tracking-[0.12em] | letter-spacing: 0.12em; |
Example setup
The shared preview base explicitly selects spec 1, reset none, strict mode, spacingUnit 0.25rem, and no breakpoints. Each example declares tokens.letterSpacings. wind-demo only supplies a border, wrapping safety, labels, and color; the tracking classes control letter spacing.
Examples in use
Compare named letter spacing
The same short bilingual label uses one negative and one positive configured value.
<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>@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);
}Configuration for this example
{
"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"
]
}
}
}Authored demonstration 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; }Apply a one-off value
tracking-[0.12em] gives a short label extra spacing without adding another token.
<p class="wind-demo-tracking-custom tracking-[0.12em]">A little extra space / 少し広めの字間</p>@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;
}Configuration for this example
{
"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]"
]
}
}
}Authored demonstration CSS
.wind-demo-tracking-custom { color: #223247; border-left: 3px solid #6d7f96; padding: 0.5rem 0.75rem; }Custom and named values
tracking-tight resolves through tokens.letterSpacings.tight. Negative values are supported and can pull letters closer together. Arbitrary values such as tracking-[0.12em] are validated as letter-spacing CSS. Use modest changes: wide tracking can make paragraphs and Japanese text harder to read, so reserve it for short labels or deliberate display treatments.
Related guides: Utility grammar · Variants
Catalog details
tracking
| Field | Value |
|---|---|
| Catalog identifier | v1.tracking |
| Class pattern | tracking-<suffix> |
| Grammar | {"acceptedKinds":["token","arbitrary"],"arbitraryProperty":"letter-spacing","allowsFractionSlash":false,"allowsColorOpacity":false} |
| Accepted values | The catalog has no separate accepted-value records for this entry. |
| Token categories | letterSpacings |
| Negative-value policy | allowed |
| Conflict group and rank | tracking (19) |
| Order rank | 0 |
| Selector shape | ownElement |
| Spec version | 1 |
| Emitter properties | letter-spacing |
Accepted values
The catalog has no separate accepted-value records for this entry.
Declaration templates
| Property | Value kind | Fixed value |
|---|---|---|
letter-spacing | resolved | null |
Catalog examples
| Example class | Expected declarations |
|---|---|
tracking-[0.08em] | letter-spacing: 0.08em |