Visual Reference
The following table visually represents all the font-weights that are available.
| Reference | Class | Weight |
|---|---|---|
| Uniform | ultralight |
100 |
| Uniform | extralight |
200 |
| Uniform | light |
300 |
| Uniform | regular |
400 |
| Uniform | medium |
500 |
| Uniform | semibold |
600 |
| Uniform | bold |
700 |
| Uniform | extrabold |
800 |
| Uniform | ultrabold |
900 |
Basic Usage
Apply the <weight> utility to any text based element.
<h1 class="extrabold">
Extrabold Heading
</h1>CSS Variables
You can customize each font-weight by overriding the following CSS custom properties.
:root {
--ultralight: 100;
--extralight: 200;
--light: 300;
--regular: 400;
--medium: 500;
--semibold: 600;
--bold: 700;
--extrabold: 800;
--ultrabold: 900;
}