# Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/font-variant-numeric.mdx

import { ApiTable } from "@/components/api-table.tsx";
import { Example } from "@/components/example.tsx";
import { Figure } from "@/components/figure.tsx";
import { ResponsiveDesign } from "@/components/content.tsx";

export const title = "font-variant-numeric";
export const description = "Utilities for controlling the variant of numbers.";

<ApiTable
  rows={[
    ["normal-nums", "font-variant-numeric: normal;"],
    ["ordinal", "font-variant-numeric: ordinal;"],
    ["slashed-zero", "font-variant-numeric: slashed-zero;"],
    ["lining-nums", "font-variant-numeric: lining-nums;"],
    ["oldstyle-nums", "font-variant-numeric: oldstyle-nums;"],
    ["proportional-nums", "font-variant-numeric: proportional-nums;"],
    ["tabular-nums", "font-variant-numeric: tabular-nums;"],
    ["diagonal-fractions", "font-variant-numeric: diagonal-fractions;"],
    ["stacked-fractions", "font-variant-numeric: stacked-fractions;"],
  ]}
/>

## Examples

### Using ordinal glyphs

Use the `ordinal` utility to enable special glyphs for the ordinal markers in fonts that support them:

<Figure>

<Example>{<p className="text-center font-source text-lg text-gray-900 ordinal dark:text-gray-200">1st</p>}</Example>

```html
<!-- [!code classes:ordinal] -->
<p class="ordinal ...">1st</p>
```

</Figure>

### Using slashed zeroes

Use the `slashed-zero` utility to force a zero with a slash in fonts that support them:

<Figure>

<Example>{<p className="text-center font-source text-lg text-gray-900 slashed-zero dark:text-gray-200">0</p>}</Example>

```html
<!-- [!code classes:slashed-zero] -->
<p class="slashed-zero ...">0</p>
```

</Figure>

### Using lining figures

Use the `lining-nums` utility to use numeric glyphs that are aligned by their baseline in fonts that support them:

<Figure>

<Example>
  {<p className="text-center font-source text-lg text-gray-900 lining-nums dark:text-gray-200">1234567890</p>}
</Example>

```html
<!-- [!code classes:lining-nums] -->
<p class="lining-nums ...">1234567890</p>
```

</Figure>

### Using oldstyle figures

Use the `oldstyle-nums` utility to use numeric glyphs where some numbers have descenders in fonts that support them:

<Figure>

<Example>
  {<p className="text-center font-source text-lg text-gray-900 oldstyle-nums dark:text-gray-200">1234567890</p>}
</Example>

```html
<!-- [!code classes:oldstyle-nums] -->
<p class="oldstyle-nums ...">1234567890</p>
```

</Figure>

### Using proportional figures

Use the `proportional-nums` utility to use numeric glyphs that have proportional widths in fonts that support them:

<Figure>

<Example>
  {
    <div className="max-w-xs text-right">
      <p className="font-source text-lg text-gray-900 proportional-nums dark:text-gray-200">12121</p>
      <p className="font-source text-lg text-gray-900 proportional-nums dark:text-gray-200">90909</p>
    </div>
  }
</Example>

```html
<!-- [!code classes:proportional-nums] -->
<p class="proportional-nums ...">12121</p>
<p class="proportional-nums ...">90909</p>
```

</Figure>

### Using tabular figures

Use the `tabular-nums` utility to use numeric glyphs that have uniform/tabular widths in fonts that support them:

<Figure>

<Example>
  {
    <div className="max-w-xs text-right">
      <p className="font-source text-lg text-gray-900 tabular-nums dark:text-gray-200">12121</p>
      <p className="font-source text-lg text-gray-900 tabular-nums dark:text-gray-200">90909</p>
    </div>
  }
</Example>

```html
<!-- [!code classes:tabular-nums] -->
<p class="tabular-nums ...">12121</p>
<p class="tabular-nums ...">90909</p>
```

</Figure>

### Using diagonal fractions

Use the `diagonal-fractions` utility to replace numbers separated by a slash with common diagonal fractions in fonts that support them:

<Figure>

<Example>
  {<p className="text-center font-source text-lg text-gray-900 diagonal-fractions dark:text-gray-200">1/2 3/4 5/6</p>}
</Example>

```html
<!-- [!code classes:diagonal-fractions] -->
<p class="diagonal-fractions ...">1/2 3/4 5/6</p>
```

</Figure>

### Using stacked fractions

Use the `stacked-fractions` utility to replace numbers separated by a slash with common stacked fractions in fonts that support them:

<Figure>

<Example>
  {
    <p className="text-center font-ubuntu-mono text-lg text-gray-900 stacked-fractions dark:text-gray-200">
      1/2 3/4 5/6
    </p>
  }
</Example>

```html
<!-- [!code classes:stacked-fractions] -->
<p class="stacked-fractions ...">1/2 3/4 5/6</p>
```

</Figure>

### Stacking multiple utilities

The `font-variant-numeric` utilities are composable so you can enable multiple variants by combining them:

<Figure>

<Example>
  {
    <dl className="mx-auto grid max-w-2xs grid-cols-2 text-gray-900 dark:text-gray-200">
      <dt className="border-b border-gray-200 py-2 dark:border-white/10">Subtotal</dt>
      <dd className="border-b border-gray-200 py-2 text-right slashed-zero tabular-nums dark:border-white/10">
        $100.00
      </dd>
      <dt className="border-b border-gray-200 py-2 dark:border-white/10">Tax</dt>
      <dd className="border-b border-gray-200 py-2 text-right slashed-zero tabular-nums dark:border-white/10">
        $14.50
      </dd>
      <dt className="py-2 font-medium">Total</dt>
      <dd className="py-2 text-right font-medium slashed-zero tabular-nums">$114.50</dd>
    </dl>
  }
</Example>

```html
<!-- [!code classes:slashed-zero,tabular-nums] -->
<dl class="...">
  <dt class="...">Subtotal</dt>
  <dd class="text-right slashed-zero tabular-nums ...">$100.00</dd>
  <dt class="...">Tax</dt>
  <dd class="text-right slashed-zero tabular-nums ...">$14.50</dd>
  <dt class="...">Total</dt>
  <dd class="text-right slashed-zero tabular-nums ...">$114.50</dd>
</dl>
```

</Figure>

### Resetting numeric font variants

Use the `normal-nums` property to reset numeric font variants:

```html
<!-- [!code classes:slashed-zero,tabular-nums,normal-nums] -->
<p class="slashed-zero tabular-nums md:normal-nums ...">
  <!-- ... -->
</p>
```

### Responsive design

<ResponsiveDesign
  property="font-variant-numeric"
  defaultClass="proportional-nums"
  featuredClass="tabular-nums"
  element="p"
/>