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 Clagnut.com, 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.

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

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.