HTML Buddies: <sub> & <sup>

These elements do not impart much visual style by default. Barring some novel layout, just watch your line-height. Note that screen readers will not announce by default that something is sub- or super-scripted. If you need that to be conveyed, lean on techniques I showed in the first week, which I replicate here strictly for the superscript.

Superscript

The vertical position can matter and the styles should reflect that.

At Ascender Line

For ordinals (42nd), fractions (2/3) and abbreviations (a/c for account of). They get a default browser style of vertical-align: super.

Above Ascender Line

Generally used for footnotes (thisA), exponents (E=mc2), particle charges (μ+) and isotopes (238U). They should get the style vertical-align: text-top, but that is generally not how you will see them on the web. It will also require some more leading (line-height).

Subscript

As with superscript, the vertical position can matter.

At Baseline

These are somewhat rare, generally limited to fractions (1/2) and abbreviations (c/o for care of). Make sure they have vertical-align: baseline.

Below Baseline

This is the typical use of subscript text, and receives a default browser style of vertical-align: sub. I’ll use an old joke to demonstrate this one: Johnny was a chemist’s son, but Johnny is no more. For what he thought was H2O was H2SO4.

Mixed

There are cases where you need to have superscript and subscript on top of one another. I am not a chemist and I do not know the best order in which to code these, but visually this is an example where you will need a custom style: 146C2+8

You can read more about when to use which alignment on which piece of content at Wikipedia.

References