Learn CSS: How To Style Superscript Text

I’m redesigning a website, and I added a “TM” trademark symbol to a headline... it didn’t look good. The trademark symbol was bold and stood out too much. Here’s how I fixed it...

I’m redesigning a website, and I added a “™” trademark symbol to a headline... it didn’t look good.

The trademark symbol was bold and stood out too much.

Here are the changes I wanted to make...

Un-bold the “™” trademark symbol.
Reduce the size of the “™” trademark symbol (a bit).
Adjust the height position of the “™” trademark symbol.

Web browsers can render content in funny ways.

CSS was invented to give web designers tight control over how web browsers display content.

So I added some CSS.

Here’s how I made it look better...

First I created the headline with the “™” trademark symbol in it.

Type Option+2 for a “™” trademark symbol.
Type Option+g for a “©” copyright symbol.

Here’s the original headline code:

<h1>I Make WordPress Easy™ for non-coders, web designers, and developers.</h1>

Here’s how that original headline code looked:

To fix the way the “™” trademark symbol looks, I added a SPAN tag around the trademark symbol with some CSS code.

Here’s the final headline code with the CSS style code:

<h3>I Make WordPress Easy<span style="font-weight: 400; font-size:2rem; position: relative; bottom: .35rem;">™</span> for non-coders, web designers, and developers.</h3>

Below is a breakdown of each of the 4 CSS tags I added:

Added a ™ tag around the “™” trademark symbol.
Added some CSS to the opening span tag like this:
Reset the font-weight using this CSS:
Reset the font-size using this CSS:
Set the position using this CSS:
Set bottom spacing (raise the element up) using this CSS:

Here’s how the headline looks after adding the completed SPAN tag with the CSS:

The difference is subtle. But it is a noticeable difference.

CSS is a powerful web design coding language.

Are you using CSS on your website?

Consider consulting a web developer about how CSS can enhance your website.

If you want to learn CSS, here’s my favorite CSS book: https://amzn.to/4ouauGz

Cheers!