Font Weight

Utility	Properties
fw-100	font-weight: 100;
fw-200	font-weight: 200;
fw-300	font-weight: 300;
fw-400	font-weight: 400;
fw-500	font-weight: 500;
fw-600	font-weight: 600;
fw-700	font-weight: 700;
fw-800	font-weight: 800;
fw-900	font-weight: 900;

100

This example sets the font weight to 100. This weight is very light and is typically used for fine text.

Sphinx of black quartz, judge my vow.

<div class="bg-indigo-1 p-4 rad-1">
  <p class="bg-white fs-lg fw-100 p-4 rad-1 ta-c tc-lead">Sphinx of black quartz, judge my vow.</p>
</div>

200

This example sets the font weight to 200. This weight is light and is often used for subtle emphasis.

Sphinx of black quartz, judge my vow.

<div class="bg-indigo-1 p-4 rad-1">
  <p class="bg-white fs-lg fw-200 p-4 rad-1 ta-c tc-lead">Sphinx of black quartz, judge my vow.</p>
</div>

300

This example sets the font weight to 300. This weight is slightly bolder than light and is used for emphasis.

Sphinx of black quartz, judge my vow.

<div class="bg-indigo-1 p-4 rad-1">
  <p class="bg-white fs-lg fw-300 p-4 rad-1 ta-c tc-lead">Sphinx of black quartz, judge my vow.</p>
</div>

400

This example sets the font weight to 400. This is the normal weight for body text.

Sphinx of black quartz, judge my vow.

<div class="bg-indigo-1 p-4 rad-1">
  <p class="bg-white fs-lg fw-400 p-4 rad-1 ta-c tc-lead">Sphinx of black quartz, judge my vow.</p>
</div>

500

This example sets the font weight to 500. This weight is medium and is often used for headings or important text.

Sphinx of black quartz, judge my vow.

<div class="bg-indigo-1 p-4 rad-1">
  <p class="bg-white fs-lg fw-500 p-4 rad-1 ta-c tc-lead">Sphinx of black quartz, judge my vow.</p>
</div>

600

This example sets the font weight to 600. This weight is semi-bold and is typically used for prominent headings.

Sphinx of black quartz, judge my vow.

<div class="bg-indigo-1 p-4 rad-1">
  <p class="bg-white fs-lg fw-600 p-4 rad-1 ta-c tc-lead">Sphinx of black quartz, judge my vow.</p>
</div>

700

This example sets the font weight to 700. This weight is bold and is often used for major headings.

Sphinx of black quartz, judge my vow.

<div class="bg-indigo-1 p-4 rad-1">
  <p class="bg-white fs-lg fw-700 p-4 rad-1 ta-c tc-lead">Sphinx of black quartz, judge my vow.</p>
</div>

800

This example sets the font weight to 800. This weight is extra bold and is typically used for very prominent text.

Sphinx of black quartz, judge my vow.

<div class="bg-indigo-1 p-4 rad-1">
  <p class="bg-white fs-lg fw-800 p-4 rad-1 ta-c tc-lead">Sphinx of black quartz, judge my vow.</p>
</div>

900

This example sets the font weight to 900. This weight is the heaviest and is often used for the most impactful text.

Sphinx of black quartz, judge my vow.

<div class="bg-indigo-1 p-4 rad-1">
  <p class="bg-white fs-lg fw-900 p-4 rad-1 ta-c tc-lead">Sphinx of black quartz, judge my vow.</p>
</div>

Conditional styles

Learn how to override existing utilities based on the user's screen size or other factors, such as hover states.

Media modifiers

You can combine responsive breakpoints like sm:fw-*,md:fw-*, lg:fw-*, and xxl:fw-* allows targeting specific utilities in different viewports.

<div class="fw-500 md:fw-600 ..."></div>

Hover modifiers

Alternatively, you can apply :hover by using h:fw-* utility to override elements and change their values when hovering over them.

<div class="fw-500 h:fw-600 ..."></div>