Font Weight

Class	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.

The quick brown fox jumps over the lazy dog.

<div class="bg-l-indigo-6 p-4 rad-1">
  <p class="bg-white fs-sm fw-100 p-4 rad-1 ta-c tc-lead">The quick brown fox jumps over the lazy dog.</p>
</div>

200

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

The quick brown fox jumps over the lazy dog.

<div class="bg-l-indigo-6 p-4 rad-1">
  <p class="bg-white fs-sm fw-200 p-4 rad-1 ta-c tc-lead">The quick brown fox jumps over the lazy dog.</p>
</div>

300

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

The quick brown fox jumps over the lazy dog.

<div class="bg-l-indigo-6 p-4 rad-1">
  <p class="bg-white fs-sm fw-300 p-4 rad-1 ta-c tc-lead">The quick brown fox jumps over the lazy dog.</p>
</div>

400

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

The quick brown fox jumps over the lazy dog.

<div class="bg-l-indigo-6 p-4 rad-1">
  <p class="bg-white fs-sm fw-400 p-4 rad-1 ta-c tc-lead">The quick brown fox jumps over the lazy dog.</p>
</div>

500

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

The quick brown fox jumps over the lazy dog.

<div class="bg-l-indigo-6 p-4 rad-1">
  <p class="bg-white fs-sm fw-500 p-4 rad-1 ta-c tc-lead">The quick brown fox jumps over the lazy dog.</p>
</div>

600

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

The quick brown fox jumps over the lazy dog.

<div class="bg-l-indigo-6 p-4 rad-1">
  <p class="bg-white fs-sm fw-600 p-4 rad-1 ta-c tc-lead">The quick brown fox jumps over the lazy dog.</p>
</div>

700

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

The quick brown fox jumps over the lazy dog.

<div class="bg-l-indigo-6 p-4 rad-1">
  <p class="bg-white fs-sm fw-700 p-4 rad-1 ta-c tc-lead">The quick brown fox jumps over the lazy dog.</p>
</div>

800

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

The quick brown fox jumps over the lazy dog.

<div class="bg-l-indigo-6 p-4 rad-1">
  <p class="bg-white fs-sm fw-800 p-4 rad-1 ta-c tc-lead">The quick brown fox jumps over the lazy dog.</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.

The quick brown fox jumps over the lazy dog.

<div class="bg-l-indigo-6 p-4 rad-1">
  <p class="bg-white fs-sm fw-900 p-4 rad-1 ta-c tc-lead">The quick brown fox jumps over the lazy dog.</p>
</div>

---

Utilizing utilities conditionally

Override existing utilities based on the user's screen size or other factors, such as hover states. Learn more about modifiers in our documentation.

Responsive breakpoints

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>

Utilizing utilities conditionally

Override existing utilities based on the user's screen size or other factors, such as hover states. Learn more about modifiers in our documentation.

Hover states

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>