I was recently updating a clients site by adding in some ® symbols as superscripts and subscripts. This resulted in some pretty nasty line heights as you can see below.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit®. Aenean ac orci in neque consectetuer viverra.® In eu tellus ut felis posuere sollicitudin. Nunc id lectus. Fusce quis turpis. Praesent egestas nunc sit amet lorem. Aliquam erat volutpat. Ut felis leo, lacinia molestie, molestie vitae, porttitor et, dolor. Quisque diam erat, rutrum non, cursus at, tempus in, libero. Maecenas dignissim dolor ut nibh. Suspendisse rutrum aliquet felis. Vivamus mi. Donec aliquam imperdiet mauris.
I searched on Google and found a few methods to correct this issue. They worked fine in Firefox but not in IE 6 and sometimes 7.
After experimenting a bit, I found a way that corrects this issue with CSS and works in Firefox, Opera, Safari, IE 6 and 7.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit®. Aenean ac orci in neque consectetuer viverra.® In eu tellus ut felis posuere sollicitudin. Nunc id lectus. Fusce quis turpis. Praesent egestas nunc sit amet lorem. Aliquam erat volutpat. Ut felis leo, lacinia molestie, molestie vitae, porttitor et, dolor. Quisque diam erat, rutrum non, cursus at, tempus in, libero. Maecenas dignissim dolor ut nibh. Suspendisse rutrum aliquet felis. Vivamus mi. Donec aliquam imperdiet mauris.
sup
{
vertical-align: baseline;
font-size: 0.8em;
position: relative;
top: -0.4em;
}
sub
{
vertical-align: baseline;
font-size: 0.8em;
position: relative;
bottom: -0.4em;
}
Just adjust the position and font size to suit your taste.