Text Tracking

Letter spacing guidelines for typography.

Tailwind Letter Spacing

Usage Guidelines

Headlines

Tighter tracking for large headlines:

<h1 class="text-5xl tracking-tight">Big Headlines</h1>

All Caps

Wider tracking for uppercase text:

<span class="uppercase tracking-wider text-sm">
  LABEL TEXT
</span>

Body Text

Keep body text at normal tracking:

<p class="tracking-normal">Regular paragraph text.</p>

Best Practices

1. Tight for large - Big text benefits from tighter tracking
2. Wide for caps - Uppercase needs more space
3. Normal for body - Don't touch body text tracking
4. Subtle adjustments - Small changes make big differences

Common Patterns

<!-- Navigation label -->
<span class="text-xs uppercase tracking-widest">
  Menu
</span>
 
<!-- Section heading -->
<h2 class="text-3xl tracking-tight font-bold">
  Features
</h2>
 
<!-- Button text -->
<button class="tracking-wide font-medium">
  Get Started
</button>