Core Code
Core Code Modern Dev Handbook

Typography

Font sizes, weights, leading, tracking, and readable defaults.
On this page

Typography in Tailwind

Typography is one of the biggest “professional UI” separators. Tailwind gives you a predictable type scale and utilities for font size, weight, line height, letter spacing, and text rendering. The goal is not to decorate text, but to make content readable and consistent.

Font size utilities

Tailwind provides a scale from text-xs to text-9xl. In production, you should choose a limited subset for UI consistency.

text-xs  text-sm  text-base  text-lg  text-xl  text-2xl  text-3xl

Common UI defaults

  • Body text: text-sm or text-base
  • Muted text: text-sm + text-slate-600
  • Section titles: text-lg or text-xl + font-semibold
  • Page titles: text-2xl or text-3xl + font-bold

Font weight

Use font weight to create hierarchy without changing sizes too much.

font-normal  font-medium  font-semibold  font-bold

Line height (leading)

Line height is critical for readability. Tight line-height can look modern but becomes unreadable for paragraphs. Increase leading for text blocks.

<p class="text-sm leading-6">...</p>
<p class="text-base leading-7">...</p>

Letter spacing (tracking)

Tracking is mostly useful for headings, UI labels, and uppercase text.

tracking-tight  tracking-normal  tracking-wide

Text alignment and balance

Most long-form content is left-aligned. Centered paragraphs are harder to read. Reserve centered text for short hero lines or short captions.

Truncation and overflow

Real-world UIs contain unpredictable text: long names, translations, IDs. Tailwind provides utilities to prevent layout breaks.

Single-line truncation

<div class="truncate">Very long title that should not break layout...</div>

Multi-line clamping (requires plugin or custom CSS)

For multi-line truncation you typically use line-clamp utilities (often via a plugin). Use it for cards and previews, not for primary content.

Readable content width

Even perfect typography looks bad when line length is too wide. In production, constrain text blocks with max-w-*.

<article class="max-w-3xl">
  <p class="text-base leading-7">...</p>
</article>

UI typography pattern (headings + supporting text)

<div>
  <h2 class="text-lg font-semibold text-slate-900">Billing</h2>
  <p class="mt-1 text-sm text-slate-600">Manage your subscription and invoices.</p>
</div>

Typography plugin (for rich content)

If you have documentation pages, blogs, or rich HTML content, Tailwind's typography plugin (prose classes) can give you sensible defaults for headings, lists, code blocks, and spacing. This is useful when content is not hand-styled component-by-component.

Example prose usage

<article class="prose prose-slate max-w-none">
  ...
</article>

Common mistakes

  • Using too many font sizes and weights (visual noise).
  • Tight leading on paragraphs (hard to read).
  • Full-width text blocks without max-w constraints.
  • Ignoring long text overflow (UI breaks in real data).

Production checklist

  • Pick a small, consistent type scale for UI.
  • Use leading-6/leading-7 for paragraphs.
  • Constrain long content with max-w-*.
  • Handle long strings with truncate/overflow rules.
  • Use prose only for rich, document-like content.
Backgrounds & Gradients →