How to add the service mark symbol with HTML

Posted January 23rd, 2010 in Code by Mario Seijo

HTML has a tag known as <sup> which stands for superscript text. This tag properly places text half a character above the baseline.

Example:
bite size technology, design and marketing ideasSM

In order to achieve the service mark symbol as you see above, you need to align your “SM” text to the top of its line-height and decrease the font size to 50% of its original size. The following code samples will produce the service mark symbol on your web pages.

CSS code:

sup { vertical-align: text-top; font-size: 50%; }

HTML code:

bite size technology, design and marketing ideas<sup>SM</sup>

Let me know in the comments section if this code helps you, or better yet, share it with others who might need it.

Switch to our mobile site