Last update : June 24, 2014

Because of the wide range of settings and equipment that people might be using to access the web, there is no “best font size”. Font sizes should be specified using relative units like percentage or em since these will allow the user to adjust font sizes up or down to suit their own requirements.

With CSS you can specify font size as a percentage of the font size of a parent element. For example, headings are inside the body of the page. If you don’t set a size for the text in the body, the text of the body will be the size that the reader has chosen as their default size. An ’em’ is equal to the computed value of the ‘font-size’ property of the element on which it is based. The exception is when an ’em’ occurs in the value of the ‘font-size’ property itself, in which case it refers to the font size of the parent element. It may be used for vertical or horizontal measurement.

A default font size of 16 pixels is used for the body if the browsers are configured as follows :

• Internet Explorer, choose View>Text Size>Medium
• Opera, choose View>Zoom>100%
• Firefox, choose View>Text Size>Normal

Some web designers recommend to set the font size in the body to 10 pixels (63%) to allow easier calculations of the em-values (in this case 1.4 em gives a font size of 14 pixels). In the case of embedding elements, this gives no real advantage for the calculations.

em versus pixel

The following table shows the relations between pixels and em’s for different font-sizes, based on a default font size of 16 pixels = 1.0 em.