# Tabular Numbers

**MUST** · **ID:** `content-tabular-numbers` · **Category:** content
**Source:** [Vercel](https://github.com/vercel-labs/agent-skills/blob/main/skills/web-design-guidelines/SKILL.md)
**Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/content-tabular-numbers

> MUST: Tabular numbers for comparisons (`font-variant-numeric: tabular-nums` or a mono like Geist Mono)

Use tabular-nums for comparisons and tables

Proportional numbers have varying widths (1 is narrower than 8), making columns misalign. Tabular numbers have uniform width, so digits stack vertically in tables and make comparisons easier. Essential for prices, metrics, and data tables. The same property carries a second switch worth reaching for on identifiers: `font-variant-numeric: slashed-zero` cuts a stroke through the zero so an order number, an API key, a serial, or a licence plate cannot be misread as an `O` by someone transcribing it.

## Bad — do not do this

`content-tabular-numbers-bad`

```tsx
export function TabularNumbersBad() {
  return (
    <div className="w-full max-w-sm">
      <div className="bg-card border border-border rounded-lg p-4">
        <table className="w-full text-sm">
          <thead>
            <tr className="border-b border-border">
              <th className="text-left py-2">Item</th>
              <th className="text-right py-2">Price</th>
            </tr>
          </thead>
          <tbody>
            <tr className="border-b border-border">
              <td className="py-2">Product A</td>
              <td className="text-right py-2">$1,234.56</td>
            </tr>
            <tr className="border-b border-border">
              <td className="py-2">Product B</td>
              <td className="text-right py-2">$987.00</td>
            </tr>
            <tr className="border-b border-border">
              <td className="py-2">Product C</td>
              <td className="text-right py-2">$12.99</td>
            </tr>
          </tbody>
        </table>
      </div>
      <p className="text-xs text-error mt-4">
        Proportional numbers don't align vertically
      </p>
    </div>
  );
}
```

## Good — do this

`content-tabular-numbers-good`

```tsx
export function TabularNumbersGood() {
  return (
    <div className="w-full max-w-sm">
      <div className="bg-card border border-border rounded-lg p-4">
        <table className="w-full text-sm">
          <thead>
            <tr className="border-b border-border">
              <th className="text-left py-2">Item</th>
              <th className="text-right py-2" style={{ fontVariantNumeric: 'tabular-nums' }}>Price</th>
            </tr>
          </thead>
          <tbody style={{ fontVariantNumeric: 'tabular-nums' }}>
            <tr className="border-b border-border">
              <td className="py-2">Product A</td>
              <td className="text-right py-2">$1,234.56</td>
            </tr>
            <tr className="border-b border-border">
              <td className="py-2">Product B</td>
              <td className="text-right py-2">$987.00</td>
            </tr>
            <tr className="border-b border-border">
              <td className="py-2">Product C</td>
              <td className="text-right py-2">$12.99</td>
            </tr>
          </tbody>
        </table>
      </div>
      <p className="text-xs text-success mt-4">
        Tabular numbers align perfectly for easy comparison
      </p>
    </div>
  );
}
```

## References

- [font-variant-numeric](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/font-variant-numeric)
- [jakubkrehel — variable-fonts-and-opentype.md (slashed zero)](https://raw.githubusercontent.com/jakubkrehel/skills/main/skills/better-typography/variable-fonts-and-opentype.md)