Superiors and inferiors

If like me you are a tad compulsive you get hung up over details like using genuine small caps and correct dashes.

I was looking at some superscript and subscript text in my style guide and wasn’t sure whether I was using genuine super/subscript characters.

Sub subscripts close up

On this website I use Cloud.typography by Hoefler & Co. to provide web fonts. I had a few reasons for this:

  • their solution does not use Javascript
  • the overall high quality of their typefaces, and
  • better typographic control

I discovered that instead of using <sup> and <sub> elements to wrap around a string of text, Hoefler and Co. themselves use character references.

Somewhat annoyingly they don’t tell you this or make it clear, but if you look at the page source all is revealed:

Hoefler and co html entities

I think this is actually better, as <sup> and <sub> take normal sized text and just shrinks them down.

For example the popular Normalize.css includes the following rules:

 sub,
    sup {
     font-size: 75%;
     line-height: 0;
     position: relative;
     vertical-align: baseline;
 }

    sup {
     top: -0.5em;
    }

 sub {
     bottom: -0.25em;
    }

True superscript and subscript glyphs are quite different from their shrunken counterparts. Here you can see a comparison between the two:

Unicode html comparison

Notice for example how the number one has an extra pair of serifs and the zero is more vertical.

The Unicode characters also sit more snuggly with the rest of the text – especially the subscripts.

Using character references

The real trick is what glyphs does the typeface you want to use actually have? Also, what happens if you use a character reference that is not in your font of choice?

In theory, the browser will substitute from another font, but the reality can be more complicated.

If your typeface does have the glyphs you need, then using them is easy. Use either:

  • a named character reference (HTML entity), for example &
  • a decimal number, for example &
  • or a hexadecimal number, for example &

It makes no difference which you use, but hexadecimal numbers are preferred because not all glyphs have a named character reference.

Are character references better or worse than sup and sub elements?

It is a legitimate concern whether a string of text wrapped by a <sup> or <sub> is more semantic, or more accessible than a character reference.

I believe on a technical level the answer is no as both are valid markup.

Some will argue that a character reference is not as clear when looking at the source. On the other hand, you can argue that using <sup> and <sub> elements is more verbose and uses more bytes.

The reason I favour character references is that they use glyphs designed specifically for a context. They are not a CSS modified version of another glyph.

As with most web technologies there are some support issues. It is worth checking how well a given character reference performs.

A note about screen readers

I was amazed that screen readers may not announce common characters like the minus symbol (−) or the multiply (×) symbol.

While they should have no problems with superiors and inferiors, it is a concern that well formatted text can become garbage.

List of common character references

The numeric references are somewhat unintuitive. Certain characters were available in earlier encodings – superscript 1, 2 and 3 – whereas other characters were added later.

Glyph Character Reference Rendered
Subscript 0 &#x2080;
Subscript 1 &#x2081;
Subscript 2 &#x2082;
Subscript 3 &#x2083;
Subscript 4 &#x2084;
Subscript 5 &#x2085;
Subscript 6 &#x2086;
Subscript 7 &#x2087;
Subscript 8 &#x2088;
Subscript 9 &#x2089;
Superscript 0 &#x2070;
Superscript 1 &#xB9; ¹
Superscript 2 &#xB2; ²
Superscript 3 &#xB3; ³
Superscript 4 &#x2074;
Superscript 5 &#x2075;
Superscript 6 &#x2076;
Superscript 7 &#x2077;
Superscript 8 &#x2078;
Superscript 9 &#x2079;
Greater than &#x3E; >
Less than &#x3C; <
Non-breaking space &#xA0;  
Ampersand &#x26; &
Degree &#B0; °
Degree celsius &#x2103;
Minus &#x2212;
Times &#xD7; ×
Divide &#xF7; ÷