Letter Spacing

Control tracking with .tracking-* utilities that tighten or loosen character spacing.

Overview

Use tracking-* classes to tighten or open text without changing the font size.

Class	CSS	Effect
.tracking-tightest	letter-spacing: -0.1em;	Ultra-condensed for logos
.tracking-extra-tight	letter-spacing: -0.075em;	Tight headings
.tracking-tighter	letter-spacing: -0.05em;	Compact subheads
.tracking-tight	letter-spacing: -0.025em;	Slightly condensed body copy
.tracking-normal	letter-spacing: 0em;	Default spacing
.tracking-wide	letter-spacing: 0.025em;	Labels and uppercase text
.tracking-wider	letter-spacing: 0.05em;	Buttons and navigation
.tracking-widest	letter-spacing: 0.1em;	Section labels
.tracking-extra-wide	letter-spacing: 0.15em;	Display typography
.tracking-ultra-wide	letter-spacing: 0.2em;	Dramatic headlines

Example

<div class="elementor-element text-center">
  <p class="uppercase text-sm tracking-widest text-gray margin-bottom-2">
    Changelog
  </p>
  <h1 class="text-5xl font-black tracking-tightest text-black margin-bottom-4">
    Unified bundled framework
  </h1>
  <button class="button-primary button-lg tracking-wide uppercase">
    Read the release notes
  </button>
</div>

Tracking compounds with uppercase transforms. Start at .tracking-wide for .uppercase text so characters do not feel cramped.