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

## Example

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

### CSS

```scss
--font-weight-thin: 100;
--font-weight-extra-light: 200;
--font-weight-light: 300;
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--font-weight-extra-bold: 800;
--font-weight-black: 900;
--font-weight: normal;
```