Part 28: Text Alignment, Line Height & Letter Spacing

Fine-tuning line height (leading) and letter spacing (tracking) separates amateur typography from professional editorial design.

1. Text Alignment

• text-left: Left aligned.
• text-center: Center aligned.
• text-right: Right aligned.
• text-justify: Justified text block.

2. Line Height (Leading)

In CSS, line-height controls vertical space between text lines. In Tailwind, this is controlled via leading-*: - leading-none: 1.0 (tight headers). - leading-tight: 1.25 (display titles). - leading-snug: 1.375. - leading-normal: 1.5. - leading-relaxed: 1.625 (ideal for reading long articles). - leading-loose: 2.0.

<p class="text-slate-700 leading-relaxed text-lg">
  Articles with leading-relaxed are significantly more comfortable to read over long reading sessions.
</p>

3. Letter Spacing (Tracking)

Controls horizontal space between characters via tracking-*: - tracking-tighter: -0.05em - tracking-tight: -0.025em (great for massive headings) - tracking-normal: 0 - tracking-wide: 0.025em - tracking-wider: 0.05em - tracking-widest: 0.1em (ideal for uppercase subheadings and badges)

<span class="text-xs uppercase font-bold tracking-widest text-blue-600">
  Case Study
</span>

Key Takeaways

• Use tracking-widest on uppercase badges.
• Use leading-relaxed on body text for high editorial readability.

In Part 29, we will master Text Colors, Background Colors & Opacity Modifiers!