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.
The vertical position can matter and the styles should reflect that.
For ordinals (42nd), fractions (2/3) and abbreviations (a/c for account of). They get a default browser style of
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 (
As with superscript, the vertical position can matter.
These are somewhat rare, generally limited to fractions (1/2) and abbreviations (c/o for care of). Make sure they have
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.
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.
<ins>(my week 1 challenge entry)