#Font Weights

Updated
0.7.0

These are classes that set the font weight of an element.

ClassStyles
font-extrathin
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

#Examples

Cirrus comes with a ton of ways to customize your text ranging from changing font weights to changing font styles.

Extrathin (100)

The quick brown fox jumps over the lazy dog.

<p class="font-extrathin">The quick brown fox jumps over the lazy dog.</p>

Thin (200)

The quick brown fox jumps over the lazy dog.

<p class="font-thin">The quick brown fox jumps over the lazy dog.</p>

Light (300)

The quick brown fox jumps over the lazy dog.

<p class="font-light">The quick brown fox jumps over the lazy dog.</p>

Normal (400)

The quick brown fox jumps over the lazy dog.

<p class="font-normal">The quick brown fox jumps over the lazy dog.</p>

Medium (500)

The quick brown fox jumps over the lazy dog.

<p class="font-medium">The quick brown fox jumps over the lazy dog.</p>

Semibold (600)

The quick brown fox jumps over the lazy dog.

<p class="font-semibold">The quick brown fox jumps over the lazy dog.</p>

Bold (700)

The quick brown fox jumps over the lazy dog.

<p class="font-bold">The quick brown fox jumps over the lazy dog.</p>

Extrabold (800)

The quick brown fox jumps over the lazy dog.

<p class="font-extrabold">The quick brown fox jumps over the lazy dog.</p>

Black (900)

The quick brown fox jumps over the lazy dog.

<p class="font-black">The quick brown fox jumps over the lazy dog.</p>