Superscript Tag <sup> and Line Height

Written on October 13, 2014

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:

Wrong way to use the sup tag

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:

Wrong way to use the sup tag

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;
}