Overview
Usetracking-* 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.