Tailwind CSS Typography — Font Size, Weight, and Text Styling

In this tutorial, you will learn about Tailwind CSS Typography. We cover key concepts, practical examples, and best practices to help you master this topic.

Tailwind CSS typography utilities provide complete control over text appearance -- font size (text-), weight (font-), line height (leading-), alignment (text-), decoration, transformation, and letter spacing (tracking-*).

What You'll Learn

You will learn how to use Tailwind's type scale, apply text color and alignment, control line height independently from font size, and style text with decoration and transformation utilities.

Why It Matters

Typography is 90 percent of web design. DodaTech's content sites use Tailwind's typography utilities to ensure consistent reading experiences across articles, documentation, and UI components.

Real-World Use

DodaZIP uses a combination of text-sm for file names, text-lg for section headings, and text-xs with tracking-wide for uppercase labels -- all from Tailwind's type scale with no custom CSS.

flowchart LR
    A[Spacing] --> B[Typography]
    B --> C[Font Size]
    B --> D[Font Weight]
    B --> E[Line Height]
    B --> F[Alignment]
    B --> G[Decoration]
    style B fill:#38bdf8,stroke:#0284c7,color:#fff
    style C fill:#22c55e,stroke:#16a34a,color:#fff

Font Size Scale

<div class="space-y-2">
  <p class="text-xs">text-xs (0.75rem / 12px)</p>
  <p class="text-sm">text-sm (0.875rem / 14px)</p>
  <p class="text-base">text-base (1rem / 16px)</p>
  <p class="text-lg">text-lg (1.125rem / 18px)</p>
  <p class="text-xl">text-xl (1.25rem / 20px)</p>
  <p class="text-2xl">text-2xl (1.5rem / 24px)</p>
  <p class="text-3xl">text-3xl (1.875rem / 30px)</p>
  <p class="text-4xl">text-4xl (2.25rem / 36px)</p>
</div>

Expected output: A type scale progression from extra small (12px) to 4xl (36px), each with different font sizes.

Font Weight

<div class="space-y-1">
  <p class="font-thin">font-thin (100) - Thin text</p>
  <p class="font-light">font-light (300) - Light text</p>
  <p class="font-normal">font-normal (400) - Normal text</p>
  <p class="font-medium">font-medium (500) - Medium text</p>
  <p class="font-semibold">font-semibold (600) - Semibold text</p>
  <p class="font-bold">font-bold (700) - Bold text</p>
  <p class="font-extrabold">font-extrabold (800) - Extrabold text</p>
  <p class="font-black">font-black (900) - Black text</p>
</div>

Expected output: Eight weight levels from thin to black, showing progressively thicker text.

Line Height and Alignment

<div class="space-y-8">
  <div>
    <p class="text-sm leading-none">leading-none (1) - No extra line height</p>
    <p class="text-sm leading-tight">leading-tight (1.25) - Tight spacing</p>
    <p class="text-sm leading-normal">leading-normal (1.5) - Normal spacing</p>
    <p class="text-sm leading-relaxed">leading-relaxed (1.625) - Relaxed spacing</p>
    <p class="text-sm leading-loose">leading-loose (2) - Loose spacing</p>
  </div>

  <div class="space-y-2">
    <p class="text-left">text-left - Aligned left</p>
    <p class="text-center">text-center - Aligned center</p>
    <p class="text-right">text-right - Aligned right</p>
    <p class="text-justify">text-justify - Justified alignment that stretches text across the full width of its container.</p>
  </div>
</div>

Expected output: Five line height values from tight to loose, and four text alignment options.

Text Decoration and Transformation

<div class="space-y-2">
  <p class="underline">underline - Underlined text</p>
  <p class="line-through">line-through - Strikethrough text</p>
  <p class="overline">overline - Overlined text</p>
  <p class="no-underline">no-underline - Removes underline from links</p>

  <p class="uppercase mt-4">uppercase - All caps</p>
  <p class="lowercase">lowercase - All lowercase</p>
  <p class="capitalize">capitalize - First letter of each word capitalized</p>

  <p class="tracking-tight mt-4">tracking-tight (-0.025em) - Tight letter spacing</p>
  <p class="tracking-normal">tracking-normal (0) - Normal letter spacing</p>
  <p class="tracking-wide">tracking-wide (0.025em) - Wide letter spacing</p>
</div>

Expected output: Three decorations, three transformations, and three letter-spacing values.

Combining Typography Utilities

<div class="max-w-md mx-auto p-6 bg-white rounded-lg shadow">
  <h1 class="text-2xl font-bold text-gray-900 tracking-tight">
    Article Title
  </h1>
  <p class="mt-1 text-sm font-medium text-indigo-600 uppercase tracking-wide">
    Category: Technology
  </p>
  <p class="mt-4 text-base leading-relaxed text-gray-700">
    This paragraph combines text-base for size, leading-relaxed for comfortable reading, and text-gray-700 for readable contrast. The combination of three utilities creates a complete text style.
  </p>
</div>

Expected output: A styled card with a large bold title, uppercase category label, and readable body paragraph -- all composed from individual typography utilities.

Common Mistakes

1. Using Heading Tags Without the Right Size

A <h1> with text-sm is semantically correct but visually inconsistent. Match the heading level to the visual weight.

2. Ignoring Line Height with Large Text

Large text (text-3xl+) needs leading-tight or leading-none to avoid excessive line spacing.

3. Using text-justify on Narrow Containers

Justified text on small screens creates uneven word spacing. Prefer text-left on responsive layouts.

4. Not Using tracking-* With Uppercase

Uppercase text without letter spacing feels cramped. Add tracking-wide or tracking-wider.

5. Mixing Too Many Colors

Using multiple text colors on one page creates visual noise. Limit to 2-3 text color utilities per page.

Practice Questions

1. What is the default font size (text-base)? 1rem (16px). It matches the browser default font size.

2. How do you make text bold in Tailwind? Use font-bold (weight 700). Also font-semibold (600) for medium bold.

3. What utility controls the space between lines? leading-* controls line-height. Values range from leading-none to leading-loose.

4. How do you make text all uppercase? Use uppercase. For small caps style, use uppercase tracking-wide with a smaller font size.

5. Can you underline text on hover only? Yes: hover:underline applies underline only when hovering.

Challenge

Style an article excerpt using only Tailwind typography utilities: a large heading, a small uppercase date, a body paragraph with good readability, and a read-more link with hover underline.

FAQ

Mini Project

Build an article page with a title, byline, category tag, body paragraphs, and a blockquote. Use Tailwind typography utilities for all text styling: heading sizes, weights, line heights, alignment, and decoration.

What's Next

Now explore Color Utilities to understand background, text, and border color classes. Then combine typography with colors to create complete component designs.