Using <sup> is really useful when you’re dealing with trademarks. Most of the time, you probably won’t run into any issues, and the default styles will work perfectly for you. Unless you are using the superscript tag in a title that you’d like aligned with another title tag. For example, maybe you have two columns:

Welp, that just doesn’t work. Now the spacing is all screwy. Not to worry; three lines of CSS will fix that for you:

sup {
  vertical-align: top;
  position: relative;
  top: -0.3em;
}

…which results in:

line-height: perfect;

Alternatively…

If you like to keep this kind of stuff controlled by css, use this:

<h2  class="trademark">Join SKECHERS Elite</h2>

.trademark:after {
  content: "\2122";
  display: inline-block;
  margin-right: -1px; margin-left: 1px;
  position: relative; top: -0.1em;
}