Typography: Font Families, Sizes, Weights, Leading & Tracking0%
Typography: Font Families, Sizes, Weights, Leading & Tracking
Beginner12 min read•Updated: Jul 11, 2026
Typography: Font Families, Sizes, Weights, Leading & Tracking
Typography is the backbone of exceptional digital design. In Tailwind CSS, typography utilities govern font sizing, weights, line heights (leading), letter spacing (tracking), text alignment, and colors with absolute precision.
1. Font Size & Fluid Line Heights
Tailwind's text-{size} classes automatically pair sensible default line-heights with each font size:
| Class | Font Size | Line Height | Typical Usage |
|---|---|---|---|
text-xs | 0.75rem (12px) | 1rem (16px) | Badges, captions, timestamps |
text-sm | 0.875rem (14px) | 1.25rem (20px) | Secondary text, form helper text |
text-base | 1rem (16px) | 1.5rem (24px) | Body copy default |
text-lg | 1.125rem (18px) | 1.75rem (28px) | Subheadings, lead paragraphs |
text-xl | 1.25rem (20px) | 1.75rem (28px) | Card headers |
text-2xl | 1.5rem (24px) | 2rem (32px) | Section titles |
text-4xl | 2.25rem (36px) | 2.5rem (40px) | Hero titles |
2. Font Weights & Font Families
3. Leading (Line Height) & Tracking (Letter Spacing)
HTML
<!-- Tight line height for massive titles -->
<h1 class="text-5xl font-black leading-tight tracking-tight">
Empower Your Tech Career
</h1>
<!-- Loose line height for editorial readability -->
<p class="text-base text-slate-600 leading-relaxed tracking-normal">
Tailwind CSS provides complete control over typographic rhythm without leaving HTML.
</p>
- Tracking:
tracking-tighter,tracking-tight,tracking-normal,tracking-wide,tracking-widest.
4. Text Truncation & Line Clamping
HTML
<!-- Single line truncation with ellipsis -->
<p class="truncate max-w-xs">
A very long string of customer feedback that should truncate gracefully with three dots...
</p>
<!-- Multi-line clamp (e.g. blog excerpt card) -->
<p class="line-clamp-2 text-slate-500">
This paragraph will only render two complete lines of text before clipping cleanly with an ellipsis.
</p>
Interactive Quiz
Multiple Choice Questions
Question 1
What does the
truncate utility class do in Tailwind CSS?Question 2
Which Tailwind utility class controls letter-spacing (kerning)?
Question 3
Which font weight class corresponds to CSS
font-weight: 700;?Question 4
How can you limit a blog post preview description to exactly 3 lines of text in Tailwind CSS?
Question 5
In Tailwind CSS, what is the computed font size of
text-xl?Next Lesson
Flexbox Architecture: Justify, Align, Direction, Wrap & Gap
Continue learning with hands-on practice, examples, and exercises in the upcoming topic.
Related Lessons
Practice Quiz
Test your understanding of this lesson with 5 questions. Each question has one correct answer.