Using CSS to Format Superscript

Do you find yourself using superscript in your writing often? This would be the "rd" added as a suffix to 3 when you mean third. For example:

3^rd grade - 3^rd base - 3^rd donut

It doesn't come up very often for everyone, but when it does you will want to style it correctly. For most fonts in HTML a superscript element in the middle of a paragraph will cause a minor display issue. This is variably dependent on both the browser and the font used. To see what I'm talking about, see the following screen shot from a recent page on rd.com (Reader's Digest). Pay particular attention to the 2^nd or 3^rd line from the bottom.

It's hard to notice, but the line with the text about the 44^th president is causing a few pixels of extra space between it and the line above. This is throwing the line spacing out of a consistent flow and it distracts the eye. The following code line added to your CSS code settings will prevent this issue.

sup { font-size: .5em; }

Default styles usually make the superscript smaller than the surrounding text, but not always small enough to prevent it from hitting the ceiling in the line above and causing the incorrect line spacing. This code will make sure that it is HALF the size of the paragraph font no matter what you may change it to later.

Some but not all word processing programs will automatically format your text typed as 3rd to display as 3^rd and it's updated as you type. For your web site, you will want to be sure to use superscript, but you will also want to style it correctly for every browser.

More Information

• CSS Creator Subscript and Superscript
• style-sheets.com - SUP - Superscript

Update: I wanted to find out about other tips that are available and I found this option that may be a bit better.

sub, sup { line-height: 0px; }

The inspiration and idea came from Web Matters - CSS superscript spacing, but that page goes into more detail about how the elements are styled by default. Their actual suggestion is to increase the standard line height for the whole page to 1.4em and then set the superscript line height to zero within that element. But this is easier as far as I can tell. YMMV!