font-variant-numeric

{{CSSRef}}

The font-variant-numeric CSS property controls the usage of alternate glyphs for numbers, fractions, and ordinal markers.

{{InteractiveExample("CSS Demo: font-variant-numeric")}}

font-variant-numeric: normal;

font-variant-numeric: slashed-zero;

font-variant-numeric: tabular-nums;

font-variant-numeric: oldstyle-nums;

<section id="default-example">
  <div id="example-element">
    <table>
      <tr>
        <td><span class="tabular">0</span></td>
      </tr>
      <tr>
        <td><span class="tabular">3.54</span></td>
      </tr>
      <tr>
        <td><span class="tabular">1.71</span></td>
      </tr>
    </table>
  </div>
</section>

@font-face {
  font-family: "Fira Sans";
  src:
    local("FiraSans-Regular"),
    url("/shared-assets/fonts/FiraSans-Regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

section {
  font-family: "Fira Sans", sans-serif;
  margin-top: 10px;
  font-size: 1.5em;
}

#example-element table {
  margin-left: auto;
  margin-right: auto;
}

.tabular {
  border: 1px solid;
}

Syntax

font-variant-numeric: normal;
font-variant-numeric: ordinal;
font-variant-numeric: slashed-zero;
font-variant-numeric: lining-nums; /* <numeric-figure-values> */
font-variant-numeric: oldstyle-nums; /* <numeric-figure-values> */
font-variant-numeric: proportional-nums; /* <numeric-spacing-values> */
font-variant-numeric: tabular-nums; /* <numeric-spacing-values> */
font-variant-numeric: diagonal-fractions; /* <numeric-fraction-values> */
font-variant-numeric: stacked-fractions; /* <numeric-fraction-values> */
font-variant-numeric: oldstyle-nums stacked-fractions;

/* Global values */
font-variant-numeric: inherit;
font-variant-numeric: initial;
font-variant-numeric: revert;
font-variant-numeric: revert-layer;
font-variant-numeric: unset;

This property can take one of two forms:

either the keyword value normal
or one or more of the other values listed below, space-separated, in any order.

Values

normal
- : This keyword leads to the deactivation of the use of such alternate glyphs.
ordinal
- : This keyword forces the use of special glyphs for the ordinal markers, like 1st, 2nd, 3rd, 4th in English or a 1a in Italian. It corresponds to the OpenType values ordn.
slashed-zero
- : This keyword forces the use of a 0 with a slash; this is useful when a clear distinction between O and 0 is needed. It corresponds to the OpenType values zero.
<numeric-figure-values>
- : These values control the figures used for numbers. Two values are possible:
  - lining-nums activating the set of figures where numbers are all lying on the baseline. It corresponds to the OpenType values lnum.
  - oldstyle-nums activating the set of figures where some numbers, like 3, 4, 7, 9 have descenders. It corresponds to the OpenType values onum.
<numeric-spacing-values>
- : These values controls the sizing of figures used for numbers. Two values are possible:
  - proportional-nums activating the set of figures where numbers are not all of the same size. It corresponds to the OpenType values pnum.
  - tabular-nums activating the set of figures where numbers are all of the same size, allowing them to be easily aligned like in tables. It corresponds to the OpenType values tnum.
<numeric-fraction-values>
- : These values controls the glyphs used to display fractions. Two values are possible:
  - diagonal-fractions activating the set of figures where the numerator and denominator are made smaller and separated by a slash. It corresponds to the OpenType values frac.
  - stacked-fractions activating the set of figures where the numerator and denominator are made smaller, stacked and separated by a horizontal line. It corresponds to the OpenType values afrc.

Formal definition

{{cssinfo}}

Formal syntax

{{csssyntax}}

Examples

Setting ordinal numeric forms

Click “Play” in the code blocks below to edit the example in the MDN Playground:

<p class="ordinal">1st, 2nd, 3rd, 4th, 5th</p>

@font-face {
  font-family: "Source Sans Pro";
  src: url("https://mdn.github.io/shared-assets/fonts/SourceSansPro-Regular.otf")
    format("opentype");
  font-weight: 400;
  font-style: normal;
}

.ordinal {
  font-family: "Source Sans Pro";
  font-size: 2rem;
  font-variant-numeric: ordinal;
}

{{EmbedLiveSample("font-variant-numeric-example")}}

Specifications

{{Specifications}}

Browser compatibility

{{Compat}}

docs.rodeo

MDN Web Docs mirror