One of the most annoying browser rendering flaws is that of the registered trademark (or any other text – such as footnotes) in superscript. It typically is way too large, throws off line spacing, and makes large blocks of text appear as though it’s been pelted with a shotgun.

The registered trademark symbol, ®, is generally not superscript as a default, and must be wrapped in a <sup> tag to raise it up from the baseline, and make it slightly smaller. The problem is that it never quite gets small enough.

<p class="bodytext">ProGravix<sup>&reg;</sup></p>

The trick is to style the <sup> tag with CSS…

p.bodytext {
	font-family: Arial,Helvetica,Geneva,Swiss,SunSans-Regular;
	font-size: 10pt;
	line-height: 14pt;
	font-weight: normal;
	color: black;
}

sup {
	font-size: 6pt;
}

Here you can see that we have added styling to a stylesheet that tells superscript-tagged-text to render as 6pt. The code above that shows a “bodytext” class defined with a default text size of 10pt. You will need to adjust the <sup> font size based on your specific needs.

You can alternatively adjust the <sup> font size relative to the surrounding text using percentages. It’s also a good idea to zero out line-height, and adjust the position of the superscript.

sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
	top: -0.5em;
}

If anything looks off for your specific use, just fiddle with the values. And when you think you’re done, check your work across as many browsers and platforms you can get access to. Honestly you should be doing this already – but let’s just assume you don’t already know that.

This has been today’s Clarified Butter.