So you’ve noticed it too? Your superscript and subscript tags are breaking your nice clean line-heights, aren’t they? It’s something that has bothered me for quite some time too, but for some reason I didn’t think to fix it until today when someone asked me about it.

Just insert the following CSS declarations to your style sheet and you’re good to go:

sup, sub {
    vertical-align: baseline;
    position: relative;
    top: -0.4em;
}
sub { top: 0.4em; }

Check Out the Result

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam¹, quis nostrud exercitation ullamco laboris nisi ut aliquip ex^® ea commodo consequat. Duis aute irure_x dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa_y qui officia deserunt mollit anim id est laborum.

— lipsum

More Explanation

Originally, I thought that just setting the line-height of the sub and sup tags to zero would work, and it did, for every browser but IE6. So, knowing that the default styles for the super/subscript tags is to change the vertical-align, we can just reset those to the baseline and relatively position from there, which will not cause our other lines to displace.

Easy as pie, right?