Superscripts, Subscripts & the Uneven Line Height Problem

If you’ve ever worked with superscripts or subscripts in your HTML pages, you will have noticed that they often distort the spacing between the lines in a paragraph. And even if you’ve set a value for the line-height CSS property for the paragraph, it is often ignored when displaying superscripts and subscripts.

Fortunately, there are two easy solutions.

Solution 1: Set Line-Height to Zero

The first way to fix this problem is to set the line-height of any superscripts or subscripts to zero. Additionally, you should also increase the paragraph line-height to accommodate the position of the superscripts or subscripts. See the code sample below:

p { line-height: 1.5em; }
sub, sup { line-height: 0; }

Solution 2: Use the Vertical-Align CSS Property

The second solution is to adjust the positioning of superscripts or subscripts. This is done by setting the vertical-align CSS property. See the code sample below:

sup { vertical-align: text-top; }
sub { vertical-align: text-bottom; }

The only drawback with this method is that it aligns the tops and bottoms of the superscripts and subscripts with the tops and bottoms of the text. (Note: You can also try using the other vertical-align attributes.)

Other Tricks

The browser determines the rendering and relative size of superscripts and subscripts. But you can override these general settings and determine your own sizes. To do so, you can simply add the font-size property to the element definition. In the same fashion, you can also adjust the color and font-weight properties, as well as any other CSS properties for these elements.