---
title: Typography
description: Comprehensive typography system with headings, text variants, labels, numbers, and more
icon: type
author:
  name: shadcn
  url: https://github.com/shadcn
mode: wide
---

### Installation

```package-install
npx shadcn@latest add @redpanda/typography
```

<ComponentPreview name="typography-demo" />

## Usage

Apply type styles with **`text-*` utility classes**. Each class carries the full style — size, line-height, weight and tracking — on its own, and works on any element. This is the recommended approach.

```tsx
<h1 className="text-heading-xl">Page title</h1>
<p className="text-lead">Intro paragraph under the title.</p>
<p className="text-body">Body copy for the page.</p>
<td className="text-caption">PARTITION</td>
<span className="text-body tabular-nums">1,284,905</span>
```

## Type Scale

Every style is a single `text-*` utility. Compose freely with color, alignment, and other utilities.

<ComponentPreview
  name="typography-utilities-demo"
  description="The text-* utilities applied directly to plain elements, label-over-value rows, and table cells."
/>

| Utility                               | Style                                                 | Size · line-height          | Weight |
| ------------------------------------- | ----------------------------------------------------- | --------------------------- | ------ |
| `text-heading-xl` – `text-heading-xs` | Headings (InterDisplay)                               | 24 → 14px · `leading-tight` | 500    |
| `text-lead`                           | Lead / intro paragraph                                | 18px · `leading-normal`     | 400    |
| `text-body-lg`                        | Body, one step up                                     | 16px · `leading-normal`     | 400    |
| `text-body`                           | Body / paragraph (default)                            | 14px · `leading-normal`     | 400    |
| `text-label`                          | Form & UI labels                                      | 14px · `leading-snug`       | 500    |
| `text-body-sm`                        | Small / helper text                                   | 12px · `leading-snug`       | 400    |
| `text-caption`                        | Caption / meta                                        | 10px · `leading-snug`       | 400    |
| `text-overline`                       | Overline / eyebrow above a title or value (uppercase) | 14px · `leading-snug`       | 600    |
| `text-overline-sm`                    | Overline, one step down                               | 12px · `leading-snug`       | 600    |

Line-heights use Tailwind's leading scale — `leading-tight` (1.25), `leading-snug` (1.375), `leading-normal` (1.5) — so they read as intentional steps, not magic numbers.

Size suffixes step **relative to `text-body`**, the 14px anchor — they do not name the Tailwind rung underneath, so `text-body-sm` is built on the `xs` rung and `text-body-lg` on `base`. Body sits at 14px because this is dense application UI rather than long-form prose, and that single choice is what offsets the two scales. `text-lead` stays a role rather than a size step: reach for it on a lede under a title, and for `text-body-lg` when you want body copy one notch roomier.

Both overline rungs uppercase in CSS rather than in the string, so your source copy and the accessible
name stay in sentence case. They are the eyebrow half of a label-over-value row; for the value half,
compose `font-mono` onto a size (`font-mono text-body`) — monospace is a family, not a step on this scale.

Each token bundles the **type identity** — size, line-height and tracking. Weight and color stay composable: for emphasis use `text-body font-medium`, and for muted text `text-body text-subtle`, rather than dedicated tokens. For a raw size with no weight or tracking, use Tailwind's own scale (`text-xs` … `text-5xl`), including `text-2xs` (10px) for dense tables and meta rows. For aligned numeric columns, compose `tabular-nums` onto any text style (e.g. `text-body tabular-nums`).

## Other Elements

Structural and inline elements that pair with the type scale.

<ComponentPreview name="typography-blockquote-demo" description="Blockquote for quoted text" />
<ComponentPreview name="typography-list-demo" description="Unordered and ordered lists" />
<ComponentPreview name="typography-inline-code-demo" description="Inline code snippets" />
<ComponentPreview name="typography-pre-demo" description="Preformatted code blocks" />
<ComponentPreview name="typography-link-demo" description="Hyperlinks" />
<ComponentPreview name="typography-hr-demo" description="Horizontal rule divider" />
<ComponentPreview name="typography-dl-demo" description="Description lists" />
<ComponentPreview name="typography-details-demo" description="Details/summary disclosure widget" />
<ComponentPreview name="typography-mark-demo" description="Highlighted text" />

## Choosing the Right Approach

1. **Any text style** → apply the matching `text-*` utility to your element _(recommended)_
2. **Raw size only**, no weight or tracking → Tailwind's `text-xs`…`text-5xl` (or `text-2xs` for 10px)
3. **Numerical data** → your text style + `tabular-nums` for aligned figures (e.g. `text-body tabular-nums`)
4. **Muted / secondary text** → `text-body text-subtle`
5. **Existing code** using `<Heading>` or `<Text>` → migrate to semantic HTML and utilities before updating

## In Context

Semantic HTML elements styled with the `text-*` utilities, composed into a realistic document.

<ComponentPreview
  name="typography-semantic-demo"
  description="Semantic elements styled with the text-* utilities, composed into a realistic document."
/>

## Removed APIs

:::warning
The `Heading` (`level` prop) and `Text` (`variant` prop) components from
`@/components/redpanda-ui/typography` were **removed** in this breaking release. Use the [utility classes](#type-scale) instead —
e.g. `text-heading-md` in place of `<Heading level={3}>`, and
`text-body text-subtle` in place of `<Text variant="muted">`. New code
must not use them.
:::