'ems' Explained - text size for the web

Points or Pixels? Which text measurement is best to use for the web? Before answering that question you'd better throw 'ems' into the mix.

"What are ems?" I'm glad you asked.

Traditionally ems were defined as the width of the capital letter M of a particular typeface. But now ems are determined by the default point size used in a variety of text display programs such as web browsers.

Web browsers, across platforms, use a point size of 16 as their 'Medium' default font size therefore 1em is equivalent to 16 points in browsers which have their text size set to Medium.

The benefit of using ems when coding text size for websites is that it is scalable when the browser's default font size is changed by the user. Practically speaking, when a user chooses 'Large' in the text size menu of their web browser, the default font size increases which in turn increases the size of the text on screen, when defined as em in the websites code.

This may not automatically happen if the text size is measured in pixels or points.

For example: If the size of some text in a website is coded as 1em then it will be displayed at 16 points in a standard web browser BUT if the user wants to see larger text and sets the text size in the browser menu to Large (eg. 20 points) then the 1em sized text will be displayed as 20 point type.

Using pixels and points, which are fixed measurements, may not increase in size when the default text size is changed in the web browser.

For those who are interested in learning more about using ems when coding web pages this article at 'clagnut.com' will be of great help. Here is a simple pixel to em calculator for those who want to fit text to a particular pixel size on their web page.