Typography
font-weight
Choose named or numeric font weights and understand how the available font affects the result.
Overview
| Class | Declarations |
|---|---|
font-weight:normal | font-weight: normal;
|
font-bolder | font-weight: bolder;
|
font-thin | font-weight: var(--font-weight-thin);
|
font-extralight | font-weight: var(--font-weight-extralight);
|
font-light | font-weight: var(--font-weight-light);
|
font-regular | font-weight: var(--font-weight-regular);
|
font-medium | font-weight: var(--font-weight-medium);
|
font-semibold | font-weight: var(--font-weight-semibold);
|
font-bold | font-weight: var(--font-weight-bold);
|
font-extrabold | font-weight: var(--font-weight-extrabold);
|
font-heavy | font-weight: var(--font-weight-heavy);
|
font-weight:<weight> | font-weight: <weight>;
|
Examples
Basic usage
Compare the same phrase at a constant size and line height.
Basic usage
The local variable font supports 100–900. Every specimen keeps the same text; available faces determine the result in another family.
Use named weight tokens from font-thin to font-heavy. The variable Geist face in this preview supports the full 100–900 range.
<!-- font-thin --><p id="target" class="m:0 font-thin font-xl leading-sm">Design with clarity.</p><!-- font-extralight --><p id="target" class="m:0 font-extralight font-xl leading-sm">Design with clarity.</p><!-- font-light --><p id="target" class="m:0 font-light font-xl leading-sm">Design with clarity.</p><!-- font-regular --><p id="target" class="m:0 font-regular font-xl leading-sm">Design with clarity.</p><!-- font-medium --><p id="target" class="m:0 font-medium font-xl leading-sm">Design with clarity.</p><!-- font-semibold --><p id="target" class="m:0 font-semibold font-xl leading-sm">Design with clarity.</p><!-- font-bold --><p id="target" class="m:0 font-bold font-xl leading-sm">Design with clarity.</p><!-- font-extrabold --><p id="target" class="m:0 font-extrabold font-xl leading-sm">Design with clarity.</p><!-- font-heavy --><p id="target" class="m:0 font-heavy font-xl leading-sm">Design with clarity.</p>Use explicit weights
Use font-weight:* for a numeric value between named steps. A variable font can interpolate supported weights; a static family uses its available faces and may synthesize a heavier appearance.
Use explicit weights
The local variable font supports 100–900. Every specimen keeps the same text; available faces determine the result in another family.
<!-- font-medium --><p id="target" class="m:0 font-medium font-xl leading-sm">Design with clarity.</p><!-- font-weight:550 --><p id="target" class="m:0 font-weight:550 font-xl leading-sm">Design with clarity.</p><!-- font-semibold --><p id="target" class="m:0 font-semibold font-xl leading-sm">Design with clarity.</p>Generated CSS
@layer utilities { .font-weight\:550 { font-weight: 550 }}Apply conditionally
Hover the button or focus it with the keyboard. Both states apply font-semibold; the default remains font-regular.
Apply conditionally
The local variable font supports 100–900. Every specimen keeps the same text; available faces determine the result in another family.
<!-- Pointer and keyboard states --><button type="button" id="target" class="font-md font-regular font-semibold:hover font-semibold:focus-visible">Focus or hover to compare</button>