How to prevent uneven linespacing
when subscripts or superscripts are used
on web pages

The problem

The use of subscripts (sub markup) or superscripts (sup markup) tends to make lines of texts unevenly spaced on web pages. The seriousness of the problem depends on many things, including the font face of the text and the vertical alignment of subscripts and superscripts. These factors partly depend on the browser.

Solution: kill `vertical-align`, do positioning

Several approaches have been proposed to deal with the problem, but the simplest and most effective appears to be the following CSS approach:

set the vertical-align property of subscripts and superscripts to zero (or, equivalently, to the value baseline)
declare those elements as relatively positioned
position them in the vertical direction as desired, e.g. lowering subscripts by 0.8ex and raising superscripts by 1ex.

This works well, making line spacing even. The following simple CSS code can be used:

sup, sub { vertical-align: 0;
           position: relative; }
sup { bottom: 1ex; }
sub { top: 0.8ex; }

Test it!

The following table lets you test the effect on your browser.

Testing the effect of the suggested styling
Unstyled	Styled
This is sample text. Here is a subscript: H₂. Look at the effect on linespacing. Here are some superscripts: 10⁻²⁷, H⁺. This is the end of the sample.	This is sample text. Here is a subscript: H₂. Look at the effect on linespacing. Here are some superscripts: 10⁻²⁷, H⁺. This is the end of the sample.

Making the spacing large enough

Care should be taken to make the line spacing (the value of the line-height property) large enough to prevent subscripts or superscripts hitting characters on other lines too badly.

As a rule, when subscripts or superscripts are used, the entire page should have a basic line spacing of 1.3 or more. This can be set in CSS as follows:

* { line-height: 1.3; }

When you have both superscripts and subscripts in a paragraph, consider making linespacing even bigger.

Additional notes

Choosing the displacement

There are several things to consider when choosing specific values for the bottom and top property, specifying the vertical displacements of superscripts and subscripts. They might be different for different subscripts and superscripts even within one page. Relevant issues include the following:

font face
the nature of the characters appearing as subscripts or superscripts (compare e.g. H^w with H⁺)
the character to which a subscript or superscript is attached (compare e.g. a² with T²)
semantics: e.g., in the expression 1^st, superscripting is just stylistic, whereas in 10⁶ it is essential that the superscript be understood as a superscript (exponent).

The sample style sheets for HTML in CSS specifications suggest the following as common browser defaults:

sub { vertical-align: sub; }
sup { vertical-align: super; }

However, the meanings of the keyword values for vertical-align, i.e. sub and super, is browser-dependent. In practice, the values are rather different in different browsers and often not very well chosen.

There is no way create the same vertical positioning as with those keywords when you use the method described here. On the other hand, there is normally no reason to do so. We do not need to reproduce each browser’s default rendering of subscripts and superscripts but rather create good rendering. Usually we want to get rid of the browser differences in this issue, and this is easily achieved.

The unit `ex`

The suggestion above uses the ex unit, which equals the x-height (the height of letters like x, s, and a) in the current font. This is usually logical, since the vertical position of superscripts and subscripts should normally relate to that height.

However, some browsers (most notably Internet Explorer) interpret ex mechanically as half of em, the font size. Regarding such browsers, it does not really matter whether you specify bottom: 1ex or bottom: 0.5em. Nevertheless, the ex unit is more natural.

Regarding the variation of the ex to em ratio, check my test page for estimating the relative x-height.

Note that both the ex unit and the em unit relate to the properties of the font of the current element, here the sub or sup element. This font is typically smaller than copy text. Thus, setting e.g. bottom: 1ex for sup sets the baseline of that element somewhat lower than the top of the letter x in copy text.

In this approach, you need not set the font size of subscripts or superscripts to make linespacing even. You can do so, and it is sometimes a good idea, since some characters suffer too much from the default reduction (typically, to 83%) of font size in sub and sup elements (e.g., in T^a). On the other hand, some characters might need stronger reduction (e.g., in t₀), as a matter of taste.

Potential need for padding

Special considerations apply when the following conditions are met:

the first line of a block contains (or may contain) a superscript, or the last line may contain a subscript
the block has a (top or bottom) border or a background color (or image) set.

In this situation, a superscript or subscript may hit or even cross the border or the visible edge, even if linespacing is relatively large. You may consider making it even larger, but it is usually better to set top and bottom padding for the block. (For esthetics, set them both and to the same value if you set one of them.) The following table illustrates this. The styling of superscripts and subscripts is as indicated here, and line-height is set to 1.3. The block has a border around it, with no padding in the first alternative.

A demo of the need for padding in some situations
As styled simply	Additionally, 0.2em padding
10⁻²⁷, H⁺. H₂.	10⁻²⁷, H⁺. H₂.

In general, a block with a border or with a background needs some padding in order to look good. Typically, values like 0.1em above and below and 0.2em on the left and on the right are suitable. Superscripts and subscripts just need to be taken into consideration when choosing the specific values.

Linespacing in MS Word

For comparison, let us consider the linespacing problem in Microsoft Word. Most people use the Format/Font command or an equivalent shortcut when they need to use a subscript or a superscript in Word (and cannot or do not wish to use just superscript characters such as “²”). This means using direct font-level formatting, which is rather inflexible. This is a problem especially since there are often good reasons to consider changing the presentation.

In Word, subscripting or superscripting does not directly cause uneven linespacing. However, it results in considerable reduction in font size. The reduction might be acceptable for characters with simple glyphs, such as digits, especially when a sans-serif font is used. In other situations, it may need fixing.

Confusingly, if you select a subscript (or superscript) in Word, you will see that the font size, as displayed in the font size menu, is the same as for copy text. The reason is that Word performs internal and implicit size reduction, to about 2/3 of the nominal size. Thus, for 12pt text, the subscript size corresponds to about 8pt. To make it more reasonable, you would have to set the font size of the subscript larger than copy text size! Then linespacing probably becomes uneven.

Uneven linespacing could also be caused by font size variation inside text or even by font variation. For example, if you use Arial Unicode MS just for a single character in a paragraph otherwise in Arial, the height of the line is changed. The reason is that when linespacing is defaulted (or set to “1”) in Word, Word internally selects a line height that depends on the font face. For Arial Unicode, this results in larger line height than for Arial of the same font size. Thus, the glyph from a different font has a line height requirement that exceeds the basic line height of the text. This is rather confusing, but the cure is simple though not widely known: Set the line height of the paragraph to a fixed value. When you open the paragraph formatting window (e.g., via the Format/Paragraph command), you can see that the line height is defaulted to “1.” Change that to the value “Exactly” and use the menu to the right of it to enter the specific value. Do not accept the default that equals the current font size but select or type something suitably larger, such as 14pt for 12pt serif text.

Of course, this introduces some inflexibility, since if you change the font size, you will have to change the line height value as well. On the other hand, this will not be a serious problem if you use styles in Word. You could e.g. modify the Normal style or some other style you use as the basis for all paragraphs. While you are at it, you could also define styles (and your own keyboard shortcuts) for subscripts and superscripts. That way you can set their font size as desired. In fact, you can define them so that they are not subscripts and superscripts in the Word sense but text with specific vertical position (set in font-level formatting). This is remotely analogous with the CSS technique discussed above. In this approach, you would set the font size separately (since there is no implied font size reduction), and you could set the vertical position to a suitable value, instead of just accepting the way Word positions subscripts and superscripts.

How to prevent uneven linespacing when subscripts or superscripts are used on web pages