# Typography — Tailwind CSS

Source: https://www.skillbyai.com/en/tailwind/c-type

> Size, weight, line height and text handling.

## Readable text by default

Typography utilities cover size (`text-sm` to `text-9xl`, each with a matching line height), weight (`font-medium`, `font-bold`), line height (`leading-relaxed`), letter spacing (`tracking-tight`), alignment (`text-center`), transform (`uppercase`) and overflow (`truncate`, `line-clamp-3`). `text-lg/7` sets the size and line height together. `text-balance` and `text-pretty` improve line wrapping in headings and paragraphs. For long-form content, the official typography plugin's `prose` class styles whole articles.

## An article header

Common text utilities.

```html
<header class="max-w-2xl">
  <p class="text-sm font-semibold uppercase tracking-wide text-cyan-700">Guide</p>
  <h1 class="mt-2 text-4xl font-bold tracking-tight text-balance text-gray-900">
    Building layouts with Tailwind CSS
  </h1>
  <p class="mt-4 text-lg/8 text-gray-600 line-clamp-3">A practical introduction...</p>
</header>
```

## Limit line length

max-w-prose or max-w-2xl keeps paragraphs readable at roughly 60 to 75 characters per line.

**Quiz:** Which utility limits text to three lines with an ellipsis?

- [ ] truncate-3
- [x] line-clamp-3
- [ ] text-3
- [ ] leading-3

*Answer:* line-clamp-3. truncate is for a single line.