Typography
Letter Spacing Preview
Preview Tailwind CSS tracking utilities
All Tracking Options
tracking-tighter(-0.05em)The quick brown fox
Tightest spacing
tracking-tight(-0.025em)The quick brown fox
Tight spacing
tracking-normal(0em)The quick brown fox
Normal (default)
tracking-wide(0.025em)The quick brown fox
Wide spacing
tracking-wider(0.05em)The quick brown fox
Wider spacing
tracking-widest(0.1em)The quick brown fox
Widest spacing
Side by Side Comparison
Heading Example
tighter
tight
normal
wide
wider
widest
All Caps Example
The quick brown fox
The quick brown fox
The quick brown fox
The quick brown fox
The quick brown fox
The quick brown fox
Usage Tips
For Headings
Large headings often look better with tighter tracking.
Tight Heading
For All-Caps
All-caps text benefits from wider tracking for readability.
Spaced out text
For Body Text
Body text should use normal tracking for optimal readability.
Regular paragraph text with default letter spacing.
For Elegance
Wide tracking adds a luxurious, editorial feel.
Elegant Styling