Pixels, Ems and Percentages

When using styles we often want to specify the size of various elements, such as font sizes. This brings us neatly to the subject of how to specify sizes using HTML and CSS.

Pixels

You will most likely be familiar with pixels - the little dots that make up the picture on our monitor. It is common in computer programs to specify sizes in pixels. For example if we choose a font size of 12 pixels, the largest letters will be sized to be 12 pixels high, with the shorter letters scaled proportionally.

This is fine for most computer programs because we can choose a font size that will suit our screen size and resolution. However, it can cause problems with web pages. Because web pages will be viewed by people with vastly different screen resolutions and sizes, a font specified in pixels can appear tiny on some screens, and huge on others. Most web designers choose a font size of around 12 pixels because this gives a reasonable compromise.

Ems

Pixels are all very well, but wouldn't it be better if there was a way to let the user choose the size of the fonts based on their own personal preferences? And wouldn't it be even better if we didn't have to program any fancy option menus, and the website just automatically knew what font size the user preferred? Well, thanks to ems, that's exactly what we do have!

Every web browser has a default text size, which the user can specify to meet their needs, usually via a menu that allows them to choose the font size from a selection of large, medium and small sizes. We can use ems to base our font sizes on the user's default font size.

One em (1em) is equal to the font size our user has selected. So using a font size of 1em on our web pages is a pretty safe way of ensuring our text is readable for every one of our visitors. You can also play around with font sizes slightly; for example you might like your text to look a bit smaller, so you could choose 0.8em for your paragraph text to scale your font size to 80% of the default value. Or you might set your headings to 1.4em to make them stand our more. Bear in mind though that as we move further away from 1em, we are moving further away from the text size that our users like best.

Using ems is an extremely powerful way to specify our font sizes without having to worry about how it will look on everyone's monitors. We can also use ems to specify any other sizes we want, from paragraph spacing to menu bar widths. It is a good idea to use ems wherever possible, because it gives us the peace of mind that our web pages will be readable to all of our visitors.

Percentages

Finally we can use percentages to specify sizes. In the case of things like fonts, they work in exactly the same way as ems - the value you specify is calculated as a percentage of the user's settings, so 80% is the same as 0.8em.

Percentages can also be useful for specifying element widths. For example, we might want to set up an HTML table with three columns, where we want the overall table width to change to fill the user's screen, but we want each of our three columns to be evenly sized. To do this we could specify a table width of 100% and then column widths of 33% each.