Recently a student of mine pointed out a common web page layout problem that I had been unaware of. Of course, once it was pointed out to me, I couldn’t unsee it, and had to find a solution. On the same day, Šime Vidas made me aware of a subtle new CSS addition to control typographic layout. This article introduces both.
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:
WOFF revolutionized web typography, cutting through competing and incompatible formats to create a single, universal webfont standard accepted equally by browser vendors, device manufacturers and font foundries. It’s been so successful that a strong argument exists for some sites to simplify their stylesheets by delivering only .woff fonts: the standard has been supported in IE since version 9, in Android since 4.4, and in every other browser for at least the past several releases.*
However, there’s still plenty of room for improvement, particularly in file size and delivery speed. Acting essentially as a wrapper for the OTF and TTF font formats, .woff offered some compression, but not the most efficient packing of information. Making font file sizes smaller makes pages render faster, avoiding the dreaded “Flash Of Unstyled Text”… which is where .woff2 comes in. Using an updated algorithm, WOFF2 creates fonts that are on average 30% smaller than traditional .woff font files, with no loss in quality.
