ContextQMD
Back to Content

font-variant-numeric

files/en-us/web/css/reference/properties/font-variant-numeric/index.md

latest5.6 KB
Original Source

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

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

css
font-variant-numeric: normal;
css
font-variant-numeric: ordinal;
css
font-variant-numeric: slashed-zero;
css
font-variant-numeric: tabular-nums;
css
font-variant-numeric: oldstyle-nums;
css
font-variant-numeric: lining-nums;
css
font-variant-numeric: proportional-nums;
css
font-variant-numeric: diagonal-fractions;
<!-- Source Sans Pro doesn't support stacked-fractions -->
html
<section id="default-example">
  <div id="example-element">
    <table>
      <tbody>
        <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>
        <tr>
          <td><span class="tabular">1st</span></td>
        </tr>
        <tr>
          <td><span class="tabular">3/4</span></td>
        </tr>
      </tbody>
    </table>
  </div>
</section>
css
@font-face {
  font-family: "Source Sans Pro";
  src:
    local("SourceSansPro-Regular"),
    url("/shared-assets/fonts/SourceSansPro-Regular.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}

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

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

.tabular {
  border: 1px solid;
}

Syntax

css
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:

html
<p class="ordinal">1st, 2nd, 3rd, 4th, 5th</p>
css
@font-face {
  font-family: "Source Sans Pro";
  src: url("https://mdn.github.io/shared-assets/fonts/SourceSansPro-Regular.otf")
    format("opentype");
  font-weight: normal;
  font-style: normal;
}

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

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

Specifications

{{Specifications}}

Browser compatibility

{{Compat}}

See also

  • {{cssxref("font-variant")}}
  • {{cssxref("font-variant-alternates")}}
  • {{cssxref("font-variant-caps")}}
  • {{cssxref("font-variant-east-asian")}}
  • {{cssxref("font-variant-emoji")}}
  • {{cssxref("font-variant-ligatures")}}
  • {{cssxref("font-variant-position")}}