# Font size

> Utilities for controlling the font size of an element.

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

| Class             | Properties             |
| ----------------- | ---------------------- |
| `.font-size-xs`   | `font-size: .75rem;`   |
| `.font-size-sm`   | `font-size: .875rem;`  |
| `.font-size-md`   | `font-size: .9375rem;` |
| `.font-size-base` | `font-size: 1rem;`     |
| `.font-size-lg`   | `font-size: 1.125rem;` |
| `.font-size-xl`   | `font-size: 1.25rem;`  |
| `.font-size-2xl`  | `font-size: 1.5rem;`   |
| `.font-size-3xl`  | `font-size: 1.875rem;` |
| `.font-size-4xl`  | `font-size: 2.25rem;`  |
| `.font-size-5xl`  | `font-size: 3rem;`     |
| `.font-size-6xl`  | `font-size: 4rem;`     |

## Usage

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

```html
<p class="font-size-xs ...">The quick brown fox jumped over the lazy dog.</p>
<p class="font-size-sm ...">The quick brown fox jumped over the lazy dog.</p>
<p class="font-size-md ...">The quick brown fox jumped over the lazy dog.</p>
<p class="font-size-base ...">The quick brown fox jumped over the lazy dog.</p>
<p class="font-size-lg ...">The quick brown fox jumped over the lazy dog.</p>
<p class="font-size-xl ...">The quick brown fox jumped over the lazy dog.</p>
<p class="font-size-2xl ...">The quick brown fox jumped over the lazy dog.</p>
<p class="font-size-3xl ...">The quick brown fox jumped over the lazy dog.</p>
<p class="font-size-4xl ...">The quick brown fox jumped over the lazy dog.</p>
<p class="font-size-5xl ...">The quick brown fox jumped over the lazy dog.</p>
<p class="font-size-6xl ...">The quick brown fox jumped over the lazy dog.</p>
```

## Variants

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

### Responsive

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

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

### Hover-state

To include hover-state variants like `.hover:font-size-lg`, add `"font-size"` to the `$hover-variants` variable when [recompiling your CSS](https://www.zenplates.co/documentation/customization/using-sass-source-files):

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