So what is the best unit to use for font size when designing a web page?

Choosing a font size when designing a web site is one of many important, and sometimes confusing, decisions that you have to make. Designer can and should control the font size through CSS to power and overwrite the browser's default font size setting. This decision depends on other factors, such as, your target audience, your intended background color (The contrast between the font color & background color), language, as well as whether you are using a serf or san-serf font (Legibility of your font).

Things will be easier if there is some kind of standard or rule that the designer can follow when it comes to font size for a web page.

The most popular units for font size on the web is the Pixel, Point (1/72 of and inch), em (displays fonts based on the font size set in the user's browser), and Percent (%). Setting your font size, 1em, will allow the font size to be equal to the browser’s default font size, in most cases16px. When it comes to using Percent (%), scalable like the em, the current font-size is equal to 100%. So it is very similar to the em. The only difference between them is that when the user’s browser font size is set to SMALLEST, an em is smaller than a percent, and when set to LARGEST, an em is larger than a percent. When you are using em & percent, your text will inherit the sizes of the parent objects. For example, if you set the body text to 12 px, and set the H1 to 200%, and H2 to 50%, the result is relative to the body 12px (H1 200% of the 12px, H2 50% of the 12 px).

This subject of which unit to use for your font size, is still debatable. It is a dynamic subject as browser settings and preferences are changing with upgrades. It is also a matter of opinion. I personally believe that using a percent is the best option.

Here are a few things that you need to keep in mind, which could help you in making a decision:

• It is important to set the line-height in your CSS as a number value so it scales according to the font size.
• Most browsers have a default font size of 16px.
• In general, 1em = 12pt = 16px = 100%