Eventually you’ll need to include superscripted text in your site text, and when you do you’ll find that the HTML standard provides a special tag specifically for that purpose. Everything contained in a <sup> tag will be interpreted as superscripted text by browsers, and will be displayed as such. However, you’ll find that the default style for the tag leaves a little to be desired. Specifically, use of the tag will alter the surrounding line height as the superscript text is rendered above the other text on the line. Here’s some example HTML, with a superscripted copyright symbol:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer arcu. Cras turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Nulla <sup>©</sup> rutrum porta pede. Vivamus at nisi ac nibh eleifend suscipit. Vivamus eros mauris, accumsan eu, egestas eget, auctor vitae, dui.
And here’s how that code will be rendered by default in most browsers:
We can’t have that. The issue occurs because the <sup> tag actually gets assigned some default styles, namely vertical-align: superscript;, which causes the spacing issues. There are many suggested CSS fixes on the web, but the best cross-browser solutions override the vertical-align assignment and specifically place the tag:
sup {
height: 0;
line-height: 1;
position: relative;
top: -0.6em;
vertical-align: baseline !important;
vertical-align: bottom;
}
And there you have it! Now the previous code will render like so:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer arcu. Cras turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla© rutrum porta pede. Vivamus at nisi ac nibh eleifend suscipit. Vivamus eros mauris, accumsan eu, egestas eget, auctor vitae, dui.
