Making and Faking Ordinals on Web Pages

Ordinals are “counting words” like 1ˢᵗ, 2ⁿᵈ and 19ᵗʰ: they are characters that express position in a series. So-called “superior” letters are used to present some abbreviations in a similar way, such as Mᴹᴱ for the French “Madame”. All of these are forms of superscripted text, commonly used for references to footnotes, chemical compounds, and mathematical exponents.

Unfortunately, superscripted text can be difficult to create and typeset correctly on the web. If you want to use finely detailed layout that includes ordinals on your pages, there are several possible solutions:

Best option: OpenType

A well-crafted typeface has ordinals built in, and an embedded OpenType font should have the capacity to display them. Conversion to ordinals happens automatically in applications like Microsoft Word, but not in browsers, where it must be turned on with CSS.

Depending on the typeface and its range of ordinal characters, you may apply the CSS to all paragraphs, only certain elements, or <span> elements with classes. In this case, I’ll choose the latter:

span.ord {

font-variant-numeric: ordinal;

-moz-font-feature-settings: "ordn";

-ms-font-feature-settings: "ordn";

-webkit-font-feature-settings: "ordn";

font-feature-settings: "ordn";

}

Applied to this paragraph:

<p>The <span class="ord">1st</span> place prize is awarded to Constance Yeargood.

Results in (in this case, displayed using the embedded Source Sans Pro typeface):

The 1st place prize is awarded to Constance Yeargood.

Once the CSS is applied, the effect is also true for higher numbers:

<p>In the next two minutes humanity will take more photographs than it did during the entire <span class="ord">19th</span> century.

Creates:

In the next two minutes humanity will take more photographs than it did during the entire 19th century.

Note that ordinals are not the only effect of this CSS: character strings like “No.1” will be automatically converted to the numero sign plus the associated number, if the typeface supports it:

Please visit us at No23 Charing Cross Road

Modern browsers have good support for ordinals, with the disappointing exception of their mobile cousins, at least at their current state. This situation is complicated by the fact that ordinals are best supported in OpenType fonts (.otf). While .woff should support the feature, font hosts often strip it out when converting from .otf to .woff. As a result, relatively few webfonts have glyphs that support the feature, although their numbers are growing: right now, it’s something of a hit-and-miss affair. Take care when purchasing and using web fonts, try to give priority to .otf versions, and inspect their features closely.

2ⁿᵈ solution: Unicode characters

If your chosen web font does not have OpenType features and/or does not have the correct glyphs, you can usually fake ordinals by using Unicode characters. Again, these must be built into the typeface, but they are far more common. They can be entered as HTML entities using decimal notation, it’s usually easiest to simply copy and paste the characters into your text. I’ve left them here for you as a reference:

Presented as a string of characters, you may find that the lowercase ordinals “jump” up and down a great deal in some typefaces; both Latin sets are also missing characters that are not commonly used for ordinals, such as the letter Q.

<sup> & Entities

Alternatively, you can place ordinal characters inside a <sup> tag. (Or, if the characters are intended to appear below the baseline, the <sub> element). If it is supported in the typeface, the browser should use the appropriate Unicode glyphs (shown above) to display the characters inside the tag:

<p>The 2<sup>ND</sup> runner-up is Mythorpe Marmaduke.

Produces:

The 2^ND runner-up is Mythorpe Marmaduke.

For powers or limited footnotes, there are also HTML entities:

These solutions come with a few potential problems:

• <sup> and <sub> come integrated with some line-height, throwing off page leading by pushing the text above them slightly higher. To address this, reset the elements in CSS:

sub, sub { line-height: 0; }

Conclusion

The typesetter’s goal should always be make text easy to read, so there is no one solution that can pointed to as being “correct”. The question is always “given this typeface used in this way under these reading conditions, what is the clearest way to present this text?”

If a word like loft appears similar to 10th on your pages, then you should probably use ordinals to clarify the text; which technique you use depends on the browser and typeface. Sometimes you might only want to use ordinals on headings; in other cases, it might be the entire body text.