# Font weight

> Utilities for controlling the font weight of an element.

Source: https://www.zenplates.co/documentation/utilities/font-weight (Utilities › Typography)

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

```html
<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](https://www.zenplates.co/documentation/customization/using-sass-source-files):

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