Most good typefaces include OpenType alternates for superscript (superior) and subscript (inferior) figures. Web browsers don’t appear to use these by default, and instead mimic these characters by shrinking the font size and adjusting the vertical alignment. This presents a nice opportunity for some progressive enhancement.

The snippet below leverages a font’s true super-/subscript numerals by resetting the default browser styling and then setting the font-variant-position property with corresponding values for sup and sub elements. The whole thing is wrapped in an @supports ruleset, so we can display the original faux super-/subscript numerals for browsers that don’t support font-variant-position (looking at you, Chrome).

@supports (font-variant-position: normal) {
  sub,
  sup {
    /* Reset the typical browser default styling */
    font-size: inherit;
    vertical-align: baseline;
  }

  sup {
    font-variant-position: super;
  }

  sub {
    font-variant-position: sub;
  }
}

If you had heavier fallback styling for sup and sub, then the snippet would be adjusted with further @supports-scoped resets, like so:

/* Fallback styling, taken from Normalize */
/* https://github.com/necolas/normalize.css */

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

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

@supports (font-variant-position: normal) {
  sub,
  sup {
    /* Reset fallback styling */
    font-size: inherit;
    line-height: inherit;
    position: static;
  }

  sup {
    font-variant-position: super;
  }

  sub {
    font-variant-position: sub;
  }
}