Tailwind CSS - Font Variant Numeric

Tailwind CSS - Font Variant Numeric

Tailwind CSS includes utilities for controlling advanced typographic features of OpenType fonts, such as how numbers, fractions, and ordinals are displayed. These classes allow you to create more refined and professional-looking numeric text.

Critical: Font Support is Required

Important: These utilities will only have a visible effect if the font you are using supports the specific OpenType feature. Many standard system fonts have limited support. For best results, use a modern, feature-rich font like Inter, Roboto, or Fira Sans, often available from services like Google Fonts.

Controlling Numeric Styles

Below are the available utilities and their primary use cases.

Class	Properties	Best For
normal-nums	font-variant-numeric: normal;	Resetting all special numeric styling.
ordinal	font-variant-numeric: ordinal;	Styling ordinals like 1st, 2nd, 3rd.
slashed-zero	font-variant-numeric: slashed-zero;	Distinguishing the number 0 from the letter O in code or IDs.
lining-nums	font-variant-numeric: lining-nums;	Aligning numbers with the height of uppercase letters.
oldstyle-nums	font-variant-numeric: oldstyle-nums;	Numbers with varying heights that blend into body text.
proportional-nums	font-variant-numeric: proportional-nums;	Numbers with variable widths for better readability in prose.
tabular-nums	font-variant-numeric: tabular-nums;	Aligning numbers vertically in tables or financial data.
diagonal-fractions	font-variant-numeric: diagonal-fractions;	Styling fractions with a slash, like 1/2.
stacked-fractions	font-variant-numeric: stacked-fractions;	Creating stacked fractions, common in recipes (e.g., ½).

Practical Example: Typographic Comparison

This example uses the ‘Inter’ font from Google Fonts to demonstrate the effect of different font variant numeric classes. Notice how tabular-nums aligns the numbers in the ‘Price’ column, while slashed-zero clarifies the ‘Product ID’.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tailwind Font Variant Numeric</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
  <script src="https://cdn.tailwindcss.com"></script>
  <style>
    body {
      font-family: 'Inter', sans-serif;
    }
  </style>
</head>
<body class="bg-gray-100 p-8">
  <div class="max-w-2xl mx-auto bg-white p-6 rounded-lg shadow-md">
    <h1 class="text-2xl font-bold mb-4">Product Inventory</h1>

    <p class="mb-4 ordinal">
      This is the **1st** shipment of the month. The **2nd** will arrive on the **3rd**.
    </p>

    <table class="w-full text-left">
      <thead>
        <tr class="border-b">
          <th class="p-2">Product ID</th>
          <th class="p-2">Stock</th>
          <th class="p-2 text-right">Price</th>
        </tr>
      </thead>
      <tbody>
        <tr class="border-b">
          <td class="p-2 font-mono slashed-zero">PROD-A01B02</td>
          <td class="p-2 tabular-nums">1,024</td>
          <td class="p-2 text-right tabular-nums">$1,099.50</td>
        </tr>
        <tr class="border-b">
          <td class="p-2 font-mono slashed-zero">PROD-C34O56</td>
          <td class="p-2 tabular-nums">8</td>
          <td class="p-2 text-right tabular-nums">$45.00</td>
        </tr>
        <tr>
          <td class="p-2 font-mono slashed-zero">PROD-X98B00</td>
          <td class="p-2 tabular-nums">15,000</td>
          <td class="p-2 text-right tabular-nums">$120.75</td>
        </tr>
      </tbody>
    </table>

    <div class="mt-6">
        <h2 class="font-bold">Recipe Fractions:</h2>
        <p>Default: 1/2 cup flour, 3/4 tsp salt.</p>
        <p class="diagonal-fractions">Diagonal: 1/2 cup flour, 3/4 tsp salt.</p>
        <p class="stacked-fractions">Stacked: 1/2 cup flour, 3/4 tsp salt.</p>
    </div>
  </div>
</body>
</html>