How to Use ems for HTML Font Size?

HTML font size is specified in CSS stylesheet using pixels, ems or keywords. I have rarely found keywords much useful. Using pixel guarantees control over the look of the web page but the issue is that if we use pixels for font size, then the web page is not as accessible in IE.

For example, open this web page in IE and select “largest” for the text size under “View” menu as seen in the screenshot below:

How to Increase Font Size In IE

You will notice that the font size increases hence making this web page more accessible for some people. The reason font size increases is because I have specified the font size in ems and not pixels (this is actually a bug in IE that you cannot increase font size when specified in pixels). I have realized that I can completely control the look of the web page using ems.

How to Use Ems?

I found this article that does a very good job of explaining how to use ems (This article has been updated on A list Apart). Thanks to this article, I have completely stopped using pixels for font size.

As explained by the article on, this is what I do: I declare the default font size in body as 62.5% and hence bring down the default font size from 16px to 10px. Then for the rest of the elements on the web page I calculate the font size based on my default font size of 10px.

I did try to declare the default font size for body as 75% (75% of 16 = 12) but then my calculation for the rest of the elements on the web page got messed up. So, it is much easier to make the default as 62.5% and then work out the font size for the rest of the elements on the web page.

Tags: , , ,

3 Responses to “How to Use ems for HTML Font Size?”

  1. Kenya says:

    A very helpful article Thanks

  2. Cesar says: your link to this page doesn’t work. But thank you anyway for your article.

  3. Thanks for the article, actually i’m designing a website for a client who needs ie6 compatibility so it’s a little difficult to control font sizes

Leave a Reply