How to remove extra space after subscript 2 in Internet Explorer

Question

I am building a website that uses a subscript 2 a lot, as in H₂O. The ₂ is created with the HTML code ₂ rather than the tag.

Here's the problem, in Internet Explorer there is a large space after the ₂. How can I fix this with #css ?

Screenshot of site in IE9

Answer 1

This is a font problem. There is no perfect solution, because the page uses the SUBSCRIPT TWO character (which is fine in principle) – not with any HTML code but as such, as a UTF-8 encoded character (which is fine) and it uses the Open Sans font, which is a nice font but does not contain SUBSCRIPT TWO. This means that browsers will use some fallback font, and IE seems to use a font where the glyph for SUBSCRIPT TWO has a lot of space on the right of the graphic (you can see this by painting the character with the mouse; the fallback font in IE seems to be something like Batang in this case).

There are two ways to deal with this.

You can list down your preferred fallback fonts in the font-family declaration. In your CSS rule for body, instead of just font-family: 'Open Sans', you could use e.g.

font-family: 'Open Sans', 'Calibri', 'Arial Unicode MS', 'DejaVu Sans', 'FreeSans',
  'Lucida Sans Unicode';

It’s difficult to say what you should put into the list and in which order, but the above should cover almost all browsing situations, with tolerable rendering results. There is still the problem that you would mix glyphs from different fonts, so the result won’t really be good. For optimal results, the subscript should come from the same font as other characters.

Another way is to use a different basic font instead of Open Sans. Among Google fonts, you might consider Source Sans Pro. It is a nice sans-serif font family, with many typefaces (with weights starting at 200), and it contains SUBSCRIPT TWO; you need to check the box “Latin Extended (latin-ext)” when selecting it at Google Web Fonts, otherwise SUBSCRIPT TWO won’t be included.