Tailwind CSS tutorial #20: Font Variant Numeric
Tags: webdev, css, tailwindcss, tutorial
Published: 2022-11-23 09:23:59

In the article, we will go into detail on how to use `font variant numeric`.

## Font Variant Numeric
**Format**
> `font variant numeric`

| Tailwind Class | CSS Property |
| ------ | ------ |
| `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	`|

## Font variant numeric classes:

- **normal-nums**: Using normal-nums will remove each effect of the font-variant-numeric class.
- **ordinal**: This value directly indicates the open type values i.e. ordn. The term makes use of special glyphs for ordinal markers.
- **slashed-zero**: This class slashed-zero used a zero with a slash, which proves to be very useful while distinguishing between 0 and O.
- **lining-nums**: This class corresponds to the open type values i.e lnum. This keyword activates the numbers lying on the baseline.
- **oldstyle-nums**: This class corresponds to the open type values i.e onum. This keyword activates the set of figures where some numbers have descendant.
- **proportional-nums**: This class activates those norms where not every number is of the same size. Its open type value is pnum.
- **tabular-nums**: This class open type value is tnum. It activates those sets of figures where a set of numbers is of the same size.
- **diagonal-fractions**: It’s open type value is frac. This activates those sets of figures where numerator and denominator are made smaller and are separated by a slash.
- **stacked-fractions**: It’s open type value is arac. This activates those set of figures where numerator and denominator are made smaller, stacked, and are separated by a horizontal line.

## **Code**
```html
<ul class="container mx-auto divide-y divide-gray-400 divide-dotted">
  <li class="flex items-center justify-between px-4 py-2">
    <div>
      <div class="font-sans font-light text-4xl align-middle mb-2" style="font-family: 'Source Sans Pro'">42nd</div>
      <div class="text-xs font-mono font-light text-gray-500 mt-2"><span class="font-bold">font-variant-numeric: </span>: normal</div>
    </div>
    <div class="text-xs font-semibold font-mono whitespace-nowrap px-2 py-1 ml-5 rounded text-white bg-pink-500 rounded-2">normal-nums</div>
  </li>

  <li class="flex items-center justify-between px-4 py-2">
    <div>
      <div class="ordinal font-sans font-light text-4xl align-middle mb-2" style="font-family: 'Source Sans Pro'">42nd</div>
      <div class="text-xs font-mono text-gray-500 mt-2"><span class="font-bold">font-variant-numeric</span>: ordinal</div>
    </div>
    <div class="text-xs font-semibold font-mono whitespace-nowrap px-2 py-1 ml-5 rounded text-white bg-pink-500 rounded-2">ordinal</div>
  </li>

  <li class="flex items-center justify-between px-4 py-2">
    <div>
      <div class="slashed-zero font-sans font-light text-4xl align-middle mb-2" style="font-family: 'Source Sans Pro'">20,000</div>
      <div class="text-xs font-mono font-light text-gray-500 mt-2"><span class="font-bold">font-variant-numeric</span>: slashed-zero</div>
    </div>
    <div class="text-xs font-semibold font-mono whitespace-nowrap px-2 py-1 ml-5 rounded text-white bg-pink-500 rounded-2">slashed-zero</div>
  </li>

  <li class="flex items-center justify-between px-4 py-2">
    <div>
      <div class="slashed-zero font-sans font-light text-4xl align-middle mb-2" style="font-family: 'Source Sans Pro'">802,701</div>
      <div class="text-xs font-mono font-light text-gray-500 mt-2"><span class="font-bold">font-variant-numeric</span>: lining-nums</div>
    </div>
    <div class="text-xs font-semibold font-mono whitespace-nowrap px-2 py-1 ml-5 rounded text-white bg-green-500 rounded-2">lining-nums</div>
  </li>

  <li class="flex items-center justify-between px-4 py-2">
    <div>
      <div class="oldstyle-nums font-sans font-light text-4xl align-middle mb-2" style="font-family: 'Source Sans Pro'">299,792,458</div>
      <div class="text-xs font-mono font-light text-gray-500 mt-2"><span class="font-bold">font-variant-numeric</span>: oldstyle-nums</div>
    </div>
    <div class="text-xs font-semibold font-mono whitespace-nowrap px-2 py-1 ml-5 rounded text-white bg-green-500 rounded-2">oldstyle-nums</div>
  </li>

  <li class="flex items-center justify-between px-4 py-2">
    <div>
      <div class="proportional-nums font-sans font-light text-4xl align-middle" style="font-family: 'Source Sans Pro'">01-01-1885</div>
      <div class="proportional-nums font-sans font-light text-4xl align-middle mb-2" style="font-family: 'Source Sans Pro'">11-12-1955</div>
      <div class="text-xs font-mono font-light text-gray-500 mt-2"><span class="font-bold">font-variant-numeric</span>: proportional-nums</div>
    </div>
    <div class="text-xs font-semibold font-mono whitespace-nowrap px-2 py-1 ml-5 rounded text-white bg-blue-500 rounded-2">proportional-nums</div>
  </li>

  <li class="flex items-center justify-between px-4 py-2">
    <div>
      <div class="tabular-nums font-sans font-light text-4xl align-middle" style="font-family: 'Source Sans Pro'">01-01-1885</div>
      <div class="tabular-nums font-sans font-light text-4xl align-middle mb-2" style="font-family: 'Source Sans Pro'">11-12-1955</div>
      <div class="text-xs font-mono font-light text-gray-500 mt-2"><span class="font-bold">font-variant-numeric</span>: tabular-nums</div>
    </div>
    <div class="text-xs font-semibold font-mono whitespace-nowrap px-2 py-1 ml-5 rounded text-white bg-blue-500 rounded-2">tabular-nums</div>
  </li>


  <li class="flex items-center justify-between px-4 py-2">
    <div>
      <div class="diagonal-fractions font-sans font-light  text-4xl align-middle mb-2">1/2</div>
      <div class="text-xs font-mono font-light text-gray-500 mt-2"><span class="font-bold">font-variant-numeric</span>: diagonal-fractions</div>
    </div>
    <div class="text-xs font-semibold font-mono whitespace-nowrap px-2 py-1 ml-5 rounded text-white bg-yellow-400 rounded-2">diagonal-fractions</div>
  </li>

  <li class="flex items-center justify-between px-4 py-2">
    <div>
      <div class="stacked-fractions font-mono font-light  text-4xl align-middle mb-2" style="font-family: 'Ubuntu Mono'">1/2</div>
      <div class="text-xs font-mono font-light text-gray-500 mt-2"><span class="font-bold">font-variant-numeric</span>: stacked-fractions</div>
    </div>
    <div class="text-xs font-semibold font-mono whitespace-nowrap px-2 py-1 ml-5 rounded text-white bg-yellow-400 rounded-2">stacked-fractions</div>
  </li>

</ul>
```
**Full code:**
The overall code will be attached to [repo ](https://github.com/codewithshubhi/learn-tailwind-css/blob/main/font%20numeric%20varient.html)link.

**Overall Output**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zicacncr7wvffirmtv6a.png)![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k8btq6cn143q812z3xen.png)


**Resources:**
[tailwind.css](https://tailwindcss.com/docs)

Thank you for reading :), To learn more, check out my blogs on [Flex Direction](https://dev.to/shubhicodes/tailwind-css-tutorial-13-flex-direction-i8j), [Hackathons](https://dev.to/shubhicodes/all-about-hackathons-how-to-find-participate-win-42kk) and [Flex Wrap](https://dev.to/shubhicodes/tailwind-css-tutorial-14-flex-wrap-kee).
If you liked this article, consider following me on [Dev.to](https://dev.to/shubhicodes) for my latest publications. You can reach me on [Twitter](https://twitter.com/heyShubhi).

Keep learning! Keep coding!! 💛