Tailwind Typography

What Do Typography Utilities Cover?

Tailwind's typography utilities span font family (font-sans), font size (text-lg), font weight (font-bold), line height (leading-6), letter spacing (tracking-wide), text alignment (text-center), and text decoration (underline), among others.

Together, these utilities replace nearly everything you'd otherwise write in a body, h1-h6, or p CSS rule, directly inside your markup.

<article class="max-w-2xl">
  <h1 class="text-3xl font-bold tracking-tight text-slate-900">Article Title</h1>
  <p class="mt-2 text-sm font-medium text-slate-500">Published on March 3</p>
  <p class="mt-6 text-base leading-7 text-slate-700">
    Body text with comfortable line height for long-form reading.
  </p>
</article>

Five different typography utilities work together here: size, weight, tracking, color, and line height.

Typography Utility Categories

class="font-sans font-serif font-mono"
class="text-sm text-lg text-2xl"
class="font-normal font-medium font-bold"
class="leading-tight leading-normal leading-loose"
class="tracking-tight tracking-wide"

• Font family utilities (font-sans, font-serif, font-mono) switch the typeface stack.
• Font size utilities (covered in depth next lesson) set both size and a matching default line height.
• Font weight utilities range from font-thin (100) to font-black (900).
• Line height (leading-*) and letter spacing (tracking-*) fine-tune readability.

Typography Utilities Cheatsheet

A cross-section of the most useful typography utilities across every category.

Font Family Utilities

Tailwind ships three default font family stacks: font-sans, font-serif, and font-mono, each a curated list of system and web-safe fonts. You can override these in tailwind.config.js to use your own custom typefaces.

<p class="font-sans">Sans-serif body text (default in most projects).</p>
<p class="font-serif">Serif text, often used for editorial content.</p>
<code class="font-mono">Monospace text, ideal for code snippets.</code>

Line Height and Letter Spacing

leading-* controls the vertical space between lines of text, crucial for long-form readability. tracking-* controls horizontal space between characters, often used to add polish to uppercase headings or labels.

<p class="leading-loose text-slate-700">
  Loose line height improves readability for longer paragraphs of body text.
</p>
<h4 class="text-sm font-bold uppercase tracking-widest text-slate-500">
  Section Label
</h4>

The Official Typography Plugin

For rendering rich text from a CMS or Markdown, where you can't add utility classes to every element, the official @tailwindcss/typography plugin provides a single prose class that beautifully styles headings, paragraphs, lists, and links automatically.

npm install -D @tailwindcss/typography

<article class="prose lg:prose-lg">
  <!-- Raw HTML from a CMS or Markdown renderer -->
  <h1>Article Title</h1>
  <p>Automatically styled paragraph text.</p>
</article>

The prose class applies sensible typographic defaults to every nested element without needing individual utility classes.

Typography and Readability for SEO

Search engines and users both reward readable content. Comfortable font sizes, adequate line height, and constrained line lengths reduce bounce rate and improve time-on-page, both indirectly beneficial for SEO.

Good Example

<p class="max-w-prose text-base leading-7 text-slate-700">
  Comfortable font size, line height, and line length for readability.
</p>

Bad Example

<p class="text-xs leading-none">
  Tiny font size with tight line height that is hard to read for most users.
</p>

• Use at least text-base (16px) for primary body text.
• Pair long-form text with leading-relaxed or leading-7 for comfortable reading.
• Constrain paragraph width with max-w-prose or a similar value.

Common Mistakes

• Using too many different font sizes and weights on one page, creating visual noise instead of clear hierarchy.
• Setting body text below text-sm (14px) for primary reading content, hurting accessibility and readability.
• Forgetting to configure custom fonts in tailwind.config.js and instead overriding font-family with raw CSS.
• Applying the Typography plugin's prose class to elements that already have their own detailed utility styling, causing conflicting styles.
• Ignoring line height entirely and relying only on font size, which often results in cramped-looking paragraphs.

Key Takeaways

• Typography utilities cover font family, size, weight, line height, letter spacing, and decoration.
• Font size utilities automatically pair with a sensible default line height.
• The @tailwindcss/typography plugin's prose class is ideal for CMS or Markdown-rendered content.
• Readable typography (adequate size, line height, and line length) benefits both users and SEO.
• Custom font families should be configured in tailwind.config.js, not overridden with raw CSS.