# Letter spacing

> Utilities for controlling the tracking (or letter spacing) of an element.

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

| Class               | Properties                 |
| ------------------- | -------------------------- |
| `.tracking-tighter` | `letter-spacing: -.05em;`  |
| `.tracking-tight`   | `letter-spacing: -.025em;` |
| `.tracking-normal`  | `letter-spacing: 0;`       |
| `.tracking-wide`    | `letter-spacing: .025em;`  |
| `.tracking-wider`   | `letter-spacing: .05em;`   |

## Usage

Control the letter spacing of an element using the `.tracking-{size}` utilities.

```html
<p class="tracking-tighter ...">The quick brown fox jumped over the lazy dog.</p>
<p class="tracking-tight ...">The quick brown fox jumped over the lazy dog.</p>
<p class="tracking-normal ...">The quick brown fox jumped over the lazy dog.</p>
<p class="tracking-wide ...">The quick brown fox jumped over the lazy dog.</p>
<p class="tracking-wider ...">The quick brown fox jumped over the lazy dog.</p>
```

## Variants

By default, only responsive variants are generated for letter spacing utilities.

### Responsive

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

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

### Hover-state

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

```scss
$hover-variants: (
  // ...
  "letter-spacing",
);
```