Browser font with consistent numeral superscripts

Question

This question is a follow up to:

Why the display of Unicode characters for superscripted digits are not at the same height?

I would like to find a commonly available font, or better a font stack, which will give consistent display of the numeral sub- and superscript Unicode characters. These are represented in HTML thus:

⁰¹²³⁴⁵⁶⁷⁸⁹
₀₁₂₃₄₅₆₇₈₉

⁰¹²³⁴⁵⁶⁷⁸⁹₀₁₂₃₄₅₆₇₈₉

With the standard SO font stack on Chrome/Windows, superscript 1 2 and 3 look different to the other digits. How can I find a font which shows all of these glyphs consistently? Or is there a better set of Unicode characters I should use? I don't want to use <sup> or other <span> style if I can avoid it.

Answer 1

Check out the font coverage pages at fileformat.info, such as the page on superscript four: http://www.fileformat.info/info/unicode/char/2074/fontsupport.htm

We can expect a font that contains superscript four to contain all the superscript digits from zero to nine, though it does not hurt to check this after picking up your font candidate. Similarly, a font that contains subscript four also contains the other subscript digits.

Among the fonts, Lucide Sans Unicode is probably the only one that is fairly universally available on Windows systems. Among serif fonts, Palatino Linotype is generally but not universally available.

In any case, for HTML documents, it’s a good idea to list down alternative fonts in CSS. For example, if you use <span class=sup>&#x2074;</span> and your overall text font is a serif font (for mathematical texts, serif fonts are generally preferable), you could have a CSS rule like

.sup { font-family: Cambria, Palatino Linotype, 
       DejaVu Serif, Gentium, Symbola, Code2000; }

There is a small chance that none of the listed fonts contains the superscript. Then the browser should fall back to some available font, but especially older versions of IE often fail to do that. Therefore you might consider putting Lucida Sans Unicode at the end of the list.