Sections

Font weight

Utilities for controlling the font weight of an element.

Class Properties
.font-hairline font-weight: 100;
.font-thin font-weight: 200;
.font-light font-weight: 300;
.font-normal font-weight: 400;
.font-medium font-weight: 500;
.font-semibold font-weight: 600;
.font-bold font-weight: 700;
.font-extrabold font-weight: 800;
.font-black font-weight: 900;

Usage

Control the font weight of an element using the .font-{weight} utilities.

.font-hairline

The quick brown fox jumped over the lazy dog.

.font-thin

The quick brown fox jumped over the lazy dog.

.font-light

The quick brown fox jumped over the lazy dog.

.font-normal

The quick brown fox jumped over the lazy dog.

.font-medium

The quick brown fox jumped over the lazy dog.

.font-semibold

The quick brown fox jumped over the lazy dog.

.font-bold

The quick brown fox jumped over the lazy dog.

.font-extrabold

The quick brown fox jumped over the lazy dog.

.font-black

The quick brown fox jumped over the lazy dog.

<p class="font-hairline ...">The quick brown fox jumped over the lazy dog.</p>
<p class="font-thin ...">The quick brown fox jumped over the lazy dog.</p>
<p class="font-light ...">The quick brown fox jumped over the lazy dog.</p>
<p class="font-normal ...">The quick brown fox jumped over the lazy dog.</p>
<p class="font-medium ...">The quick brown fox jumped over the lazy dog.</p>
<p class="font-semibold ...">The quick brown fox jumped over the lazy dog.</p>
<p class="font-bold ...">The quick brown fox jumped over the lazy dog.</p>
<p class="font-extrabold ...">The quick brown fox jumped over the lazy dog.</p>
<p class="font-black ...">The quick brown fox jumped over the lazy dog.</p>

Variants

By default, only responsive variants are generated for font weight utilities.

Responsive

To control the font weight of an element at a specific breakpoint, add a {screen}: prefix to any existing font weight utility.

For example, use .md:font-bold to apply the font-bold utility at only medium screen sizes and above.

Hover-state

To include hover-state variants like .hover:font-bold, add "font-weight" to the $hover-variants variable when recompiling your CSS:

$hover-variants: (
  // ...
  "font-weight",
);