Letter Spacing
- Adjust letter spacing using tracking classes.
Letter Spacing (Tracking) Precision Control
What Letter Spacing Really Does
Letter spacing controls the horizontal distance between characters.
In UI design, letter spacing directly affects:
Readability
Scannability
Visual rhythm
Perceived quality of text
In Tailwind CSS, letter spacing is controlled using tracking utilities.
Why Letter Spacing Matters in UI
Different text types require different spacing:
Text Type Ideal Spacing Small UI text Slightly wider Headings Tighter Buttons Wider Long paragraphs Normal Uppercase text Wider (mandatory)
Bad spacing makes text feel:
Cheap
Crowded
Hard to scan
Good spacing feels:
Clean
Premium
Intentional
Tailwind Letter Spacing Utilities
Common utilities:
tracking-tighter
tracking-tight
tracking-normal
tracking-wide
tracking-wider
tracking-widest
Tight Letter Spacing for Headings
tracking-tight reduces letter spacing to create a stronger and more compact heading.
<h1 class="text-4xl font-bold tracking-tight">
Dashboard Overview
</h1>Why:
Large text already has visual space
Tight spacing improves authority
Wide Letter Spacing for Buttons
tracking-wider increases letter spacing to improve clarity for buttons and labels.
<button class="uppercase tracking-wider text-sm font-medium">
Submit
</button>Why:
Buttons are scanned, not read
Wider spacing improves recognition
Small Helper Text
This is a small helper or instruction text usually shown below an input field to guide the user. It uses small font size and light gray color to make it subtle.
<p class="text-xs tracking-wide text-gray-500">
Required field
</p>Why:
Small text needs breathing room
Advanced Rule
The smaller the text → the more spacing it needs
The larger the text → the tighter it should beThis rule alone fixes many typography issues.
Text Transform - Meaning Over Decoration
What Text Transform Is Used For
Text transform changes letter case, not content meaning.
Common transforms:
Uppercase
Lowercase
Capitalize
In UI, text transform is used to:
Establish hierarchy
Standardize labels
Improve scanning
Tailwind Text Transform Utilities
uppercase
lowercase
capitalize
normal-case
Uppercase Status Label
Displays small uppercase text with extra letter spacing and semi-bold weight, commonly used for labels or status indicators.
<span class="uppercase tracking-wider text-xs font-semibold">
Status
</span>Correct use cases:
Buttons
Tags
Labels
Badges
Navigation items
Avoid for:
Paragraphs
Long sentences
Forms instructions
Capitalized Heading
Displays text with the first letter of each word capitalized to improve visual readability in headings.
<h3 class="capitalize text-lg font-medium">
user profile settings
</h3>Use when:
Data comes dynamically
You want consistent appearance
Avoid when:
Case has semantic meaning
Acronyms or brand names exist
Lowercase Text Label
Displays text in lowercase with a small font size and muted gray color for a minimal and subtle UI label.
<span class="lowercase text-sm text-gray-500">
optional
</span>Used in:
Subtle UI hints
Metadata
Secondary information
Lowercase feels:
Calm
Informal
Minimal
Accessibility Note
Text transform affects visual display only:
Screen readers read original text
SEO is unaffected
Still:
Avoid ALL CAPS for long content
It hurts readability and accessibilit
Text Truncation - Handling Overflow Gracefully
Why Text Truncation is Critical in Real UI
In real applications:
Text length is unpredictable
User-generated content exists
API data varies
Without truncation:
Layout breaks
Cards become uneven
UI looks unprofessional
Text truncation ensures layout stability.
Single-Line Truncated Text
Truncates long text in a single line with an ellipsis to prevent layout breaking.
<p class="truncate w-64">
This is a very long title that should not break layout
</p>What this does:
Forces single line
Adds ...
Prevents overflow
Used for:
Card titles
Table columns
Navigation items
File names
Required Conditions for truncate
Truncation only works if:
Width is constrained (w-*, max-w-*)
Element is block or inline-block
Common mistake:
<p class="truncate"> <!-- won't work -->
Correct:
<p class="truncate max-w-xs">
Multi-Line Truncation
Tailwind provides line-clamp utilities (plugin-based, often enabled by default).
Multi-Line Text Truncation
Limits text to two lines and truncates the remaining content with an ellipsis using the line-clamp utility.
<p class="line-clamp-2">
Long description that should only show two lines before truncating.
</p>Use cases:
Blog previews
Product descriptions
Cards with summaries
Why this is powerful:
Preserves layout
Improves scanning
Keeps content balanced
When NOT to Truncate Text
Avoid truncation when:
Text is critical
Instructions are involved
Forms are being filled
Error messages are shown
Never truncate:
Legal text
Warnings
Validation messages
Combined Text Utilities Pattern
Demonstrates truncation, uppercase labels, and multi-line clamping together to maintain clean and readable UI content.
<div class="w-64">
<h3 class="text-lg font-semibold tracking-tight truncate">
Extremely Long Product Name That Should Not Break UI
</h3>
<p class="text-xs uppercase tracking-wider text-gray-500">
category
</p>
<p class="text-sm line-clamp-2 leading-relaxed">
This description is long enough to need truncation while still remaining readable.
</p>
</div>This demonstrates:
Tight spacing for headings
Uppercase + tracking for labels
Truncation for layout control
Professional typography behavior
Common Beginner Mistakes
Uppercasing long paragraphs
Using default spacing everywhere
Truncating important content
Forgetting width for truncation
Overusing tracking-widest
Typography mistakes often look subtle but feel very wrong.
Typography decisions should always support content purpose.