Layouts that do not change sizes or formats benefit from points and pixels, which are absolute measuring devices. Absolute sizes ensure that the site's typography looks the same from one browser to another, and this was a key issue during the digital days prior to mobile devices such as tablets and smart phones. And although users have learned how to enlarge or reduce digital text using web browser preferences, relative sizes will help typography adapt from large formats such as televisions or desktop computers to the middle road of laptops and tablets, and all the way down to smaller smart phone screens. But understanding the em begins with the user's browser. Getting to the type preferences varies from browser to browser, but we'll look at Firefox since it delivers four different font styles.

The Preferences panel in Firefox. Note how Fonts & Colors details Arial at a size of 16.

Clicking Advanced from the panel above gives you more detail about the font preferences. In this case, 16 is the default for Proportional, Serif, and Sans-serif fonts. The Monospaced Courier gets sized to 13.

The first thing at play is the preference "Allow pages to choose their own fonts, instead of my selections above," which allows the font style and font size settings in a site's CSS to display as the designer/developer intended. If I unchecked that preference, the fonts displayed in Firefox would default to what I have set above, and if so, all of the CSS type set to serif would display as the sans serif Arial. During the 1990s, a small number of designers would do something similar with the Netscape browser: they'd force Netscape to use their type settings and have all sans-serif as Univers and all serif type as Univers. But with it checked, and with Firefox's text set to 16 pixels for proportional, serif, and sans serif, 1 em (or the equivalent 100%) means that type would appear as 16 pixels. CSS for a paragraph setting would appear as p { font-size:1em;} and smaller settings could use decimals such as 0.5 or 0.2 em (0.5em or 0.2em).

A browser with type set to 16 pixels yields:

• 1 em = 16 pixels = 100%
• 0.5 em = 8 pixels = 50%
• 1.5 em = 24 pixels = 150%
• 2.0 em = 32 pixels = 200%

Users who want larger text will set their browser to display it as large as 20 points to yield:

• 1 em = 20 pixels = 100%
• 0.5 em = 10 pixels = 50%
• 1.5 em = 30 pixels = 150%
• 2.0 em = 40 pixels = 200%

Relative sizing with an em or a percentage (%) will adapt text size to the user and the device, but absolute sizing will not. Designers and developers have differing philosophies about relative and absolute sizing methods. Some will go as far as creating a separate CSS for each device (desktop, tablet, and phone), with each one's typography set in the pixel size to fit. But as more users gain control of their browsers' typography settings, relative sizing with the em or percentage delivers user-friendly results without the need for multiple CSS type settings.