Sections

Letter spacing

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

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.

.tracking-tighter

The quick brown fox jumped over the lazy dog.

.tracking-tight

The quick brown fox jumped over the lazy dog.

.tracking-normal

The quick brown fox jumped over the lazy dog.

.tracking-wide

The quick brown fox jumped over the lazy dog.

.tracking-wider

The quick brown fox jumped over the lazy dog.

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

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