How to style trade mark with heading

Question

My Heading should look like this. Image

When I use the span and reduce the size TM my picture then looks like this, image

TM does not stand up, as the first picture How to fix that?

Answer 1

You can use sup. Or if you use ™ it should align to the top. But if you're using the letters "TM" and adjusting the font-size then you can either use vertical-align or a flex layout with align-items.

.flex span, .inline span {
  font-size: .5em;
}
.flex {
  display: flex;
  align-items: flex-start;
}
.inline span {
  vertical-align: top;
}

<p>Text <sup>&trade;</sup></p>
<p>Text <span>&trade;</span></p>
<p class="flex">Text <span>TM</span></p>
<p class="inline">Text <span>TM</span></p>