Font Weights

Visual reference of all default font weights.

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

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;