Typography and Fonts

Great typography does most of the heavy lifting in web design. Tailwind CSS gives you a complete typographic toolkit: font families, a harmonious size scale, weights, line heights, letter spacing, and overflow handling. In this lesson you will learn the utilities professionals combine to make text look intentional.

Font Families

Tailwind ships three font stacks out of the box:

font-sans — a modern system UI stack (default)
font-serif — classic serif faces like Georgia
font-mono — monospace for code

html

<p class="font-sans">Clean interface text</p>
<p class="font-serif">Editorial, book-like text</p>
<code class="font-mono">const x = 42;</code>

You can register custom fonts (like Google Fonts) in your theme configuration, which we cover in the customization lesson.

The Font Size Scale

Font sizes go from text-xs up to text-9xl. Each size also sets a sensible default line height:

| Class | Size | |---|---| | text-sm | 14px | | text-base | 16px | | text-lg | 18px | | text-xl | 20px | | text-2xl | 24px | | text-4xl | 36px |

A classic heading hierarchy looks like this:

html

<h1 class="text-4xl font-bold">Page title</h1>
<h2 class="text-2xl font-semibold">Section heading</h2>
<p class="text-base text-gray-600">Body copy at a comfortable size.</p>
<p class="text-sm text-gray-400">Fine print and captions.</p>

Font Weight

Weights range from font-thin (100) to font-black (900). The ones you will actually use daily are font-normal (400), font-medium (500), font-semibold (600), and font-bold (700). A common trick: use font-medium instead of bold for buttons and labels; it reads as confident without shouting.

Line Height and Letter Spacing

leading-tight, leading-snug, leading-normal, leading-relaxed, leading-loose control line height. Large headings usually want leading-tight; long paragraphs read better with leading-relaxed.
tracking-tight, tracking-normal, tracking-wide control letter spacing. Big display headlines often pair text-5xl font-bold tracking-tight.

html

<h1 class="text-5xl font-bold leading-tight tracking-tight">
  Ship beautiful pages faster
</h1>
<p class="mt-4 leading-relaxed text-gray-600">
  Relaxed line height makes multi-line paragraphs easier to scan and read.
</p>

Handling Overflowing Text

Real content is unpredictable, so Tailwind includes safety nets:

truncate — one line with an ellipsis
line-clamp-3 — clamp to three lines with an ellipsis
break-words — break long unbroken strings like URLs

html

<p class="line-clamp-2 text-gray-700">
  This preview paragraph will be cut off after exactly two lines no matter how much content it contains...
</p>

Styling Rich Text with the Typography Plugin

Utilities are perfect for interfaces, but blog posts rendered from Markdown need styled headings, lists, and quotes without manual classes. The official @tailwindcss/typography plugin adds a prose class that styles an entire article beautifully:

html

<article class="prose lg:prose-lg">
  <!-- rendered markdown here -->
</article>

Key Takeaways

Use font-sans, font-serif, and font-mono for families; extend the theme for custom fonts.
The size scale from text-xs to text-9xl includes matched line heights.
Pair large headings with leading-tight and tracking-tight; body text with leading-relaxed.
truncate and line-clamp-* keep unpredictable content tidy.
The typography plugin styles long-form content with a single prose class.

Next up: Flexbox with Tailwind, where layout really begins.