Keep consistent line spacing with <sup> and <sub>

Question

Adding a <sup> or <sub> tag can throw off the line-spacing of a text block, how can I prevent this?

Answer 1

In addition to @DannyBeckett’s excellent answer, there is a completely different approach, which produces better typographic quality when it works – but currently does not work except for a few fonts (mostly the Microsoft C fonts) in modern browsers. I would expect it to become a realistic option within a few years, and it could be useable even now under some conditions.

Instead of using sup, you can use, say, <span class=sup> and specify that superscript-style glyphs be used, by setting

.sup { font-feature-settings: "sups"; }

along with the browser-prefixed versions of font-feature-settings.

Demo available. It can be expected to work in modern Windows environments, hardly elsewhere.

This only works for fonts that actually contain such glyphs, in a manner accessible using OpenType features, and with increasing but still limited browser support. But when it works, it uses glyphs designed by the typographer who created the font, so they can be expected to suit the font well (this expectation is not always met, though).

So in addition to removing the line spacing problem, this also helps against the problem that implementations of sup use just reduced-size versions of normal characters in a higher vertical position (so that the strokes tend to be too thin, and to avoid making this problem too big, implementations tend to use modest size reduction, so the result is too large).

Using a downloadable font via @font-face would sound like a good idea in this respect. However, among the Google fonts I tested, only Source Sans Pro seems to contain superscript glyphs for letters, and a) using it as hosted by Google does not give access to them for some reason, b) when processed with FontSquirrel, the glyphs are there but somehow distorted (e.g., the “h” appears higher than “t”), even though they seem to be OK in the original .ttf file.

(The reason for using span and not sub is that for the latter, you would have to set font size to 100% to avoid the default size reduction. This would be OK if IE did not have the nasty bug of interpreting percentages wrong in this context, as relating to the default font size of the element in IE and not to the parent element font size.)

Answer 2

Use CSS to override the default browser style:

sup, sub
{
    height: 0;
    line-height: 1;
    vertical-align: baseline;
    _vertical-align: bottom;
    position: relative;
}

sup { bottom: 1ex; }
sub { top: .5ex; }

Note that before version 7, IE treated vertical-align uniquely among other browsers. Using this approach, I need the underscore hack for IE 6 and below.

Before:

After:

Source