Font weight
Select a configured font weight or provide an arbitrary weight value.
Control how heavy the glyph strokes appear without changing the selected font family or size. Choose a named weight for a reusable role and an arbitrary numeric weight for a value outside that scale.
Quick reference
| Example class | Expected declarations |
|---|---|
font-medium | font-weight: var(--zw-font-weight-medium); |
font-[550] | font-weight: 550; |
Example setup
The shared preview base explicitly selects spec 1, reset none, strict mode, spacingUnit 0.25rem, and no breakpoints. Each example configures tokens.fontWeights with regular 400, medium 500, and strong 700. wind-demo classes style only labels and borders; they do not set font weight.
Examples in use
Compare named weights
Three configured weights keep the text and surrounding layout steady so the difference in stroke weight is easy to see.
<div class="wind-demo-weight">
<p><span class="wind-demo-label">Regular</span><span class="font-regular">The same words at regular weight</span></p>
<p><span class="wind-demo-label">Medium</span><span class="font-medium">The same words at medium weight</span></p>
<p><span class="wind-demo-label">Strong</span><span class="font-strong">The same words at strong weight</span></p>
</div>@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
:root {
--zw-font-weight-medium: 500;
--zw-font-weight-regular: 400;
--zw-font-weight-strong: 700;
--zw-spacing-unit: .25rem;
}
}
.wind-demo-weight {
color: #223247;
border: 1px solid #b7c5d4;
padding: 1rem;
}
.wind-demo-weight p {
margin: 0;
padding: .45rem 0;
border-bottom: 1px solid #d8e0e8;
}
.wind-demo-weight p:last-child {
border-bottom: 0;
}
.wind-demo-label {
display: inline-block;
width: 5.5rem;
color: #5d6c7c;
font-size: .8rem;
}
.font-medium {
font-weight: var(--zw-font-weight-medium);
}
.font-regular {
font-weight: var(--zw-font-weight-regular);
}
.font-strong {
font-weight: var(--zw-font-weight-strong);
}Configuration for this example
{
"wind": {
"spec": 1,
"reset": "none",
"strict": true,
"tokens": {
"spacingUnit": "0.25rem",
"fontWeights": {
"regular": "400",
"medium": "500",
"strong": "700"
}
},
"breakpoints": {},
"defaultTransitionTimingFunction": "ease",
"authoredClasses": {
"wind-demo-weight": true,
"wind-demo-label": true
},
"safelist": {
"docs-preview": [
"font-regular",
"font-medium",
"font-strong"
]
}
}
}Authored demonstration CSS
.wind-demo-weight { color: #223247; border: 1px solid #b7c5d4; padding: 1rem; }
.wind-demo-weight p { margin: 0; padding: 0.45rem 0; border-bottom: 1px solid #d8e0e8; }
.wind-demo-weight p:last-child { border-bottom: 0; }
.wind-demo-label { display: inline-block; width: 5.5rem; color: #5d6c7c; font-size: 0.8rem; }Specify an intermediate value
font-[550] requests weight 550 while font-medium remains tied to the configured 500 token.
<p class="wind-demo-weight-line">Compare <span class="font-medium">medium</span> with <span class="font-[550]">an arbitrary 550</span>.</p>@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
:root {
--zw-font-weight-medium: 500;
--zw-font-weight-regular: 400;
--zw-font-weight-strong: 700;
--zw-spacing-unit: .25rem;
}
}
.wind-demo-weight-line {
color: #223247;
border-left: 3px solid #6d7f96;
padding: .5rem .75rem;
}
.font-\[550\] {
font-weight: 550;
}
.font-medium {
font-weight: var(--zw-font-weight-medium);
}Configuration for this example
{
"wind": {
"spec": 1,
"reset": "none",
"strict": true,
"tokens": {
"spacingUnit": "0.25rem",
"fontWeights": {
"regular": "400",
"medium": "500",
"strong": "700"
}
},
"breakpoints": {},
"defaultTransitionTimingFunction": "ease",
"authoredClasses": {
"wind-demo-weight-line": true
},
"safelist": {
"docs-preview": [
"font-medium",
"font-[550]"
]
}
}
}Authored demonstration CSS
.wind-demo-weight-line { color: #223247; border-left: 3px solid #6d7f96; padding: 0.5rem 0.75rem; }Custom and named values
font-medium resolves through tokens.fontWeights.medium. A class such as font-[550] supplies a validated arbitrary font-weight value. The browser can only show weights supported by the chosen font; synthetic bolding and variable-font axes can change the appearance.
Related guides: Utility grammar · Variants
Catalog details
font
| Field | Value |
|---|---|
| Catalog identifier | v1.font.weight |
| Class pattern | font-<suffix> |
| Grammar | {"acceptedKinds":["token","arbitrary"],"arbitraryProperty":"font-weight","allowsFractionSlash":false,"allowsColorOpacity":false} |
| Accepted values | The catalog has no separate accepted-value records for this entry. |
| Token categories | fontWeights |
| Negative-value policy | forbidden |
| Conflict group and rank | font-weight (16) |
| Order rank | 0 |
| Selector shape | ownElement |
| Spec version | 1 |
| Emitter properties | font-weight |
Accepted values
The catalog has no separate accepted-value records for this entry.
Declaration templates
| Property | Value kind | Fixed value |
|---|---|---|
font-weight | resolved | null |
Catalog examples
| Example class | Expected declarations |
|---|---|
font-[400] | font-weight: 400 |