For developers, superscript and subscript formatting in HTML can be annoying, to say the least. In the spirit of saving readers of this post some headaches, I wanted to share some advice on handling superscript and subscript.

There are many issues with formatting in HTML 4.0 that result in an unattractive reading within paragraphs. Most of these issues are a result of the character set that the browser uses as default, or a defined character set in the document head (Ex. UTF-8). However, the issue that subscript and superscript cause is a product of vertical alignment specified within the browser's default. That is to say, a paragraph will look truncated because the superscript or subscript is beyond the line height of the inherited height of the font. For example, in the image below, you will see how the paragraph is truncated:

The answer to fixing this problem is with CSS. There are two ways to handle this in CSS, depending on your needs. One way is to simply increase the line-height of the paragraph tag so that everything has proportionately greater spacing.

Example: using PX for measurements for simple math (you could do the equivalent with EM as well):

This approach is usually not ideal because it makes the paragraph much longer. The strong point of this solution is that it allows the subscript and superscript to really pop out. This works well for math or scientific documentation where you want it to be obvious.

For a more practical approach, we can use position:relative to resolve this by setting the superscript and subscript properties to relative and adding top or bottom positioning. (Note the following example is based off of 12px font size.)

 ...resulting in this: