Learn CSS: How To Style Superscript Text

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 <span>™</span> tag around the “™” trademark symbol.
• Added some CSS to the opening span tag like this: <span style=””>
• Reset the font-weight using this CSS: <span style=”font-weight: 400;“>
• Reset the font-size using this CSS: <span style=”font-weight: 400; font-size: 2rem;“>
• Set the position using this CSS: <span style=”font-weight: 400; font-size: 2rem; position: relative;“>
• Set bottom spacing (raise the element up) using this CSS: <span style=”font-weight: 400; font-size: 2rem; position: relative; bottom: .35rem;“>

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!