---
layout: docs
title: Font Weight
description: null
---

## Named Values

<p class="font-weight-thin">Font Weight Thin</p>
<p class="font-weight-extra-light">Font Weight Extra Light</p>
<p class="font-weight-light">Font Weight Light</p>
<p class="font-weight-regular">Font Weight Regular</p>
<p class="font-weight-medium">Font Weight Medium</p>
<p class="font-weight-semibold">Font Weight Semibold</p>
<p class="font-weight-bold">Font Weight Bold</p>
<p class="font-weight-extra-bold">Font Weight Extra Bold</p>
<p class="font-weight-black">Font Weight Black</p>
<p class="font-weight">Font Weight</p>

```html
<p class="font-weight-thin">...</p>
<p class="font-weight-extra-light">...</p>
<p class="font-weight-light">...</p>
<p class="font-weight-regular">...</p>
<p class="font-weight-medium">...</p>
<p class="font-weight-semibold">...</p>
<p class="font-weight-bold">...</p>
<p class="font-weight-extra-bold">...</p>
<p class="font-weight-black">...</p>
<p class="font-weight">...</p>
```

## Numerical Values

<p class="font-weight-100">Font Weight 100</p>
<p class="font-weight-200">Font Weight 200</p>
<p class="font-weight-300">Font Weight 300</p>
<p class="font-weight-400">Font Weight 400</p>
<p class="font-weight-500">Font Weight 500</p>
<p class="font-weight-600">Font Weight 600</p>
<p class="font-weight-700">Font Weight 700</p>
<p class="font-weight-800">Font Weight 800</p>
<p class="font-weight-900">Font Weight 900</p>

```html
<p class="font-weight-100">...</p>
<p class="font-weight-200">...</p>
<p class="font-weight-300">...</p>
<p class="font-weight-400">...</p>
<p class="font-weight-500">...</p>
<p class="font-weight-600">...</p>
<p class="font-weight-700">...</p>
<p class="font-weight-800">...</p>
<p class="font-weight-900">...</p>
```