Typography & Text Styling

Understanding Typography in Tailwind

Typography is one of the most important aspects of web design. Good typography enhances readability, establishes visual hierarchy, and creates a professional appearance. Tailwind provides a comprehensive set of utilities for controlling every aspect of text styling.

Font Families

Tailwind includes three default font families based on system font stacks for optimal performance:

<!-- Sans-serif (default) - Clean, modern -->
<p class="font-sans">
    This is sans-serif text. Best for body copy, headings, and UI elements.
    Uses: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, etc.
</p>

<!-- Serif - Traditional, formal -->
<p class="font-serif">
    This is serif text. Best for traditional documents, long-form reading.
    Uses: Georgia, Cambria, "Times New Roman", Times, serif
</p>

<!-- Monospace - Code, technical -->
<p class="font-mono">
    This is monospace text. Best for code snippets, technical documentation.
    Uses: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace
</p>

Custom Font Families

You can add custom fonts (Google Fonts, local fonts, etc.) through your configuration file:

module.exports = {
    theme: {
        extend: {
            fontFamily: {
                // Add custom font families
                'display': ['Playfair Display', 'serif'],
                'body': ['Inter', 'system-ui', 'sans-serif'],
                'heading': ['Poppins', 'sans-serif'],
                'code': ['Fira Code', 'monospace'],
            },
        },
    },
}

// Usage in HTML
<h1 class="font-display">Display Heading</h1>
<p class="font-body">Body text</p>
<code class="font-code">const code = true;</code>

Loading Custom Fonts

<!-- In your HTML head -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap"
      rel="stylesheet">

<!-- OR use @import in CSS -->
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');
</style>

Font Sizes

Tailwind provides a comprehensive font size scale from extra small to 9xl:

<p class="text-xs">Extra small text (0.75rem / 12px)</p>
<p class="text-sm">Small text (0.875rem / 14px)</p>
<p class="text-base">Base text (1rem / 16px) - Default</p>
<p class="text-lg">Large text (1.125rem / 18px)</p>
<p class="text-xl">Extra large text (1.25rem / 20px)</p>
<p class="text-2xl">2X large text (1.5rem / 24px)</p>
<p class="text-3xl">3X large text (1.875rem / 30px)</p>
<p class="text-4xl">4X large text (2.25rem / 36px)</p>
<p class="text-5xl">5X large text (3rem / 48px)</p>
<p class="text-6xl">6X large text (3.75rem / 60px)</p>
<p class="text-7xl">7X large text (4.5rem / 72px)</p>
<p class="text-8xl">8X large text (6rem / 96px)</p>
<p class="text-9xl">9X large text (8rem / 128px)</p>

Practical Typography Hierarchy

<article class="max-w-3xl mx-auto p-8">

    <!-- Main heading - Largest, boldest -->
    <h1 class="text-5xl md:text-6xl font-bold text-gray-900 mb-4 leading-tight">
        The Complete Guide to Modern Web Typography
    </h1>

    <!-- Subheading - Medium size, lighter weight -->
    <p class="text-xl md:text-2xl text-gray-600 mb-8 leading-relaxed">
        Learn how to create beautiful, readable text that enhances user experience
        and establishes clear visual hierarchy.
    </p>

    <!-- Meta information - Small, subtle -->
    <div class="flex items-center gap-4 text-sm text-gray-500 mb-12">
        <span>Published: January 15, 2026</span>
        <span>•</span>
        <span>8 min read</span>
        <span>•</span>
        <span>By John Doe</span>
    </div>

    <!-- Section heading -->
    <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4 mt-12">
        Understanding Typography
    </h2>

    <!-- Body paragraph - Comfortable reading size -->
    <p class="text-lg text-gray-700 mb-6 leading-relaxed">
        Typography is the art and technique of arranging type to make written language
        legible, readable, and appealing when displayed. Good typography enhances the
        user experience by making content easy to consume and understand.
    </p>

    <!-- Subsection heading -->
    <h3 class="text-2xl md:text-3xl font-semibold text-gray-900 mb-3 mt-8">
        Key Principles
    </h3>

    <!-- List with proper sizing -->
    <ul class="list-disc list-inside text-lg text-gray-700 space-y-2 mb-6">
        <li>Readability: Text should be easy to read</li>
        <li>Hierarchy: Important content should stand out</li>
        <li>Consistency: Use a limited set of styles</li>
        <li>Spacing: Proper line height and letter spacing</li>
    </ul>

    <!-- Blockquote - Distinguished styling -->
    <blockquote class="border-l-4 border-blue-500 pl-6 py-4 my-8 bg-blue-50">
        <p class="text-xl font-medium text-gray-800 italic mb-2">
            "Typography is what language looks like."
        </p>
        <cite class="text-sm text-gray-600 not-italic">— Ellen Lupton</cite>
    </blockquote>

    <!-- Small heading -->
    <h4 class="text-xl font-semibold text-gray-900 mb-2 mt-6">
        Practical Tips
    </h4>

    <!-- Small text - Caption, footer -->
    <p class="text-sm text-gray-500 mt-12">
        Last updated: January 15, 2026 | © 2026 Typography Guide
    </p>

</article>

Font Weight

Control text thickness with font weight utilities:

<p class="font-thin">Thin (100)</p>
<p class="font-extralight">Extra Light (200)</p>
<p class="font-light">Light (300)</p>
<p class="font-normal">Normal (400) - Default</p>
<p class="font-medium">Medium (500)</p>
<p class="font-semibold">Semi Bold (600)</p>
<p class="font-bold">Bold (700)</p>
<p class="font-extrabold">Extra Bold (800)</p>
<p class="font-black">Black (900)</p>

Font Weight Best Practices

<!-- Primary heading: Bold or extra bold -->
<h1 class="text-4xl font-bold">Main Heading</h1>

<!-- Secondary heading: Semibold -->
<h2 class="text-3xl font-semibold">Section Heading</h2>

<!-- Body text: Normal (400) -->
<p class="text-base font-normal">Regular paragraph text</p>

<!-- Emphasis: Medium or semibold -->
<strong class="font-semibold">Important text</strong>

<!-- De-emphasis: Light -->
<span class="font-light text-gray-500">Less important text</span>

Line Height (Leading)

Line height controls the vertical spacing between lines of text:

<!-- Relative line heights -->
<p class="leading-none">No line height (1)</p>
<p class="leading-tight">Tight line height (1.25)</p>
<p class="leading-snug">Snug line height (1.375)</p>
<p class="leading-normal">Normal line height (1.5) - Default</p>
<p class="leading-relaxed">Relaxed line height (1.625)</p>
<p class="leading-loose">Loose line height (2)</p>

<!-- Fixed line heights -->
<p class="leading-3">Line height: 0.75rem (12px)</p>
<p class="leading-4">Line height: 1rem (16px)</p>
<p class="leading-5">Line height: 1.25rem (20px)</p>
<p class="leading-6">Line height: 1.5rem (24px)</p>
<p class="leading-10">Line height: 2.5rem (40px)</p>

Line Height Best Practices

<!-- Headings: Tighter line height -->
<h1 class="text-5xl font-bold leading-tight">
    Multi-line heading with tight spacing for visual impact
</h1>

<!-- Body text: Relaxed line height -->
<p class="text-lg leading-relaxed">
    Body paragraphs benefit from more generous line height (1.625 or 1.75)
    for comfortable reading. This reduces eye strain and improves comprehension.
</p>

<!-- Small text: Normal line height -->
<p class="text-sm leading-normal">
    Small text like captions uses normal line height (1.5).
</p>

<!-- Buttons/UI: Leading-none for vertical centering -->
<button class="px-4 py-2 bg-blue-600 text-white leading-none">
    Button Text
</button>

Letter Spacing (Tracking)

Letter spacing controls the horizontal space between characters:

<p class="tracking-tighter">Tighter letter spacing (-0.05em)</p>
<p class="tracking-tight">Tight letter spacing (-0.025em)</p>
<p class="tracking-normal">Normal letter spacing (0em) - Default</p>
<p class="tracking-wide">Wide letter spacing (0.025em)</p>
<p class="tracking-wider">Wider letter spacing (0.05em)</p>
<p class="tracking-widest">Widest letter spacing (0.1em)</p>

Letter Spacing Use Cases

<!-- Uppercase text: Wider spacing for readability -->
<h3 class="text-sm uppercase tracking-wider text-gray-600">
    Section Label
</h3>

<!-- All caps headings: Widest spacing -->
<h2 class="text-2xl uppercase tracking-widest font-bold">
    FEATURED PRODUCTS
</h2>

<!-- Large headings: Tighter spacing for visual density -->
<h1 class="text-6xl font-bold tracking-tight">
    Hero Headline
</h1>

<!-- Body text: Normal spacing (default) -->
<p class="text-base tracking-normal">
    Regular paragraph text uses default letter spacing.
</p>

<!-- Tags/labels: Slight wider spacing -->
<span class="text-xs uppercase tracking-wide bg-blue-100 text-blue-800 px-2 py-1">
    NEW
</span>

Text Alignment

<p class="text-left">Left aligned text (default in LTR languages)</p>
<p class="text-center">Center aligned text</p>
<p class="text-right">Right aligned text</p>
<p class="text-justify">Justified text stretches to fill the full width</p>

<!-- Responsive alignment -->
<p class="text-center md:text-left">
    Center on mobile, left on tablet and up
</p>

Text Decoration

<!-- Underline -->
<p class="underline">Underlined text</p>
<p class="underline decoration-2">Underline with 2px thickness</p>
<p class="underline decoration-blue-500">Blue underline</p>
<p class="underline decoration-wavy">Wavy underline</p>
<p class="underline decoration-dotted">Dotted underline</p>
<p class="underline decoration-double">Double underline</p>

<!-- Overline -->
<p class="overline">Overline text</p>

<!-- Line through -->
<p class="line-through">Strikethrough text</p>

<!-- No decoration -->
<a href="#" class="no-underline">Link without underline</a>

<!-- Hover states -->
<a href="#" class="no-underline hover:underline">
    Underline on hover
</a>

Underline Offset

<p class="underline underline-offset-1">Small offset (1px)</p>
<p class="underline underline-offset-2">Medium offset (2px)</p>
<p class="underline underline-offset-4">Large offset (4px)</p>
<p class="underline underline-offset-8">Extra large offset (8px)</p>

<!-- Stylish link with custom underline -->
<a href="#" class="underline underline-offset-4 decoration-2 decoration-blue-500
                     hover:decoration-blue-700 transition-colors">
    Beautiful link
</a>

Text Transform

<p class="uppercase">UPPERCASE TEXT</p>
<p class="lowercase">lowercase text</p>
<p class="capitalize">Capitalize Each Word</p>
<p class="normal-case">Normal case (removes transform)</p>

<!-- Common use case: Labels and tags -->
<span class="text-xs uppercase tracking-wide text-gray-600">
    Category Label
</span>

Text Overflow and Truncation

<!-- Truncate with ellipsis (single line) -->
<p class="truncate w-64">
    This is a very long text that will be truncated with an ellipsis...
</p>

<!-- Text ellipsis (requires white-space and overflow) -->
<p class="overflow-hidden text-ellipsis whitespace-nowrap w-64">
    Long text that will be cut off with ellipsis
</p>

<!-- Clip (no ellipsis) -->
<p class="overflow-hidden text-clip whitespace-nowrap w-64">
    Long text that will be clipped without ellipsis
</p>

<!-- Multi-line truncation (requires @tailwindcss/line-clamp plugin) -->
<p class="line-clamp-3">
    This paragraph will be truncated after 3 lines with an ellipsis at the end.
    Any content beyond the third line will be hidden. This is perfect for preview
    cards where you want to show a limited amount of text before the user clicks
    to read more.
</p>

Line Clamp Plugin

# Install the plugin
npm install -D @tailwindcss/line-clamp

// Add to tailwind.config.js
plugins: [
    require('@tailwindcss/line-clamp'),
]

<!-- Usage -->
<p class="line-clamp-1">Single line truncation</p>
<p class="line-clamp-2">Two line truncation</p>
<p class="line-clamp-3">Three line truncation</p>
<p class="line-clamp-none">Remove truncation</p>

Typography Plugin

The official Typography plugin provides beautiful typographic defaults for content-heavy pages:

# Install
npm install -D @tailwindcss/typography

// Add to tailwind.config.js
plugins: [
    require('@tailwindcss/typography'),
]

Using the Prose Class

<article class="prose lg:prose-xl max-w-none">
    <h1>Article Title</h1>
    <p>
        The prose class applies beautiful typographic defaults to vanilla HTML.
        You don't need to add utility classes to every element - the plugin
        handles it automatically.
    </p>

    <h2>Section Heading</h2>
    <p>
        Headings, paragraphs, lists, blockquotes, code blocks, tables - everything
        is styled automatically with optimal spacing, colors, and font sizes.
    </p>

    <ul>
        <li>Proper list styling</li>
        <li>Consistent spacing</li>
        <li>Beautiful by default</li>
    </ul>

    <blockquote>
        Blockquotes are styled with subtle borders and distinctive formatting.
    </blockquote>

    <pre><code>const code = true;
console.log('Code blocks too!');</code></pre>
</article>

Prose Modifiers

<!-- Size modifiers -->
<article class="prose-sm">Small prose</article>
<article class="prose">Base prose (default)</article>
<article class="prose-lg">Large prose</article>
<article class="prose-xl">Extra large prose</article>
<article class="prose-2xl">2X large prose</article>

<!-- Color modifiers -->
<article class="prose prose-slate">Slate color scheme</article>
<article class="prose prose-gray">Gray color scheme</article>
<article class="prose prose-zinc">Zinc color scheme</article>
<article class="prose prose-neutral">Neutral color scheme</article>
<article class="prose prose-stone">Stone color scheme</article>

<!-- Invert for dark backgrounds -->
<article class="prose prose-invert bg-gray-900">
    Light text on dark background
</article>

<!-- Responsive prose -->
<article class="prose md:prose-lg lg:prose-xl">
    Small on mobile, larger on desktop
</article>

Summary

In this lesson, we explored Tailwind's comprehensive typography utilities:

• Font Families: Sans, serif, mono, and custom fonts
• Font Sizes: Comprehensive scale from xs to 9xl
• Font Weight: Thin (100) to black (900)
• Line Height: Control vertical spacing between lines
• Letter Spacing: Adjust horizontal space between characters
• Text Alignment: Left, center, right, justify
• Text Decoration: Underline, overline, line-through with customization
• Text Transform: Uppercase, lowercase, capitalize
• Text Overflow: Truncate, ellipsis, line-clamp
• Typography Plugin: Beautiful defaults for content-heavy pages

Key best practices:

• Establish clear hierarchy with font size and weight
• Use tighter line heights for headings (1.1-1.3)
• Use relaxed line heights for body text (1.5-1.75)
• Add wider letter spacing to uppercase text
• Limit font families to 2-3 maximum for consistency
• Load only the font weights you actually use
• Use the Typography plugin for article/blog content
• Make typography responsive - adjust sizes and line heights on mobile

Congratulations! You've completed the first 5 lessons of Tailwind CSS. You now understand utility-first principles, installation, fundamentals, colors, and typography. In the next lessons, we'll dive into layout utilities, responsive design, and advanced Tailwind features.