Alexander Blackman

Superiors & inferiors

If like me you are a tad compulsive and like to practise typography, you get hung up over little details like using genuine small caps, correct dashes and not using dumb quotes.

I was looking at some superscript and subscript text in my style guide and I wasn’t sure whether I was using genuine super/subscript characters. On this website I use Cloud.typography by Hoefler & Co. to provide web fonts. I had a few reasons for this:

  1. their solution does not use Javascript;
  2. the overall high quality of their typefaces;
  3. 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 source all is revealed:

Screenshot of Hoefler and Co.s website showing the character references in the page source

I think this is actually better, as <sup> and <sub> take normal sized text 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;
}

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

Animation comparing Unicode superior and inferior characters with CSS generated equivalent

Notice for example how the number one has an extra pair of serifs and the zero is more vertical. As well as being different shapes, 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 than this.

If your typeface of choice does have the glyphs you need then using them is easy, either use:

  • 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 main reason I would favour character references is that they use glyphs designed specifically for a context, and not a CSS modified version of another glyph. It is the equivalent of using faux-bold when you could use bold in the first place.

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

A note about screen readers

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

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

List of common character references

The numeric references are somewhat unintuitive, as certain characters were available in earlier encodings (superscript 1, 2 and 3) whereas other characters were added later.

Glyph Character Reference Rendered
Subscript 0
Subscript 1
Subscript 2
Subscript 3
Subscript 4
Subscript 5
Subscript 6
Subscript 7
Subscript 8
Subscript 9
Superscript 0
Superscript 1 &&xB9; ¹
Superscript 2 ² ²
Superscript 3 ³ ³
Superscript 4
Superscript 5
Superscript 6
Superscript 7
Superscript 8
Superscript 9
Greater than > >
Less than < <
Non-breaking space    
Ampersand & &
Degree &#B0; °
Degree celsius
Minus
Times × ×
Divide ÷ ÷

Resources

—Alex
31 May 2015

Back to start Previous: Next: