Blog (view all)

As a front-end web developer or designer, you may be confused about which unit to use when decalring font-sizes in your CSS. Here I will attempt to explain what each of the possible units means and why one is better than another.

The Units:

1. “Ems” (em): The “em” is a scalable unit that is used in web document media. An em is equal to the current font-size, for instance, if the font-size of the document is 12pt, 1em is equal to 12pt. Ems are scalable in nature, so 2em would equal 24pt, .5em would equal 6pt, etc. Ems are becoming increasingly popular in web documents due to scalability and their mobile-device-friendly nature.
2. Pixels (px): Pixels are fixed-size units that are used in screen media (i.e. to be read on the computer screen). One pixel is equal to one dot on the computer screen (the smallest division of your screen’s resolution). Many web designers use pixel units in web documents in order to produce a pixel-perfect representation of their site as it is rendered in the browser. One problem with the pixel unit is that it does not scale upward for visually-impaired readers or downward to fit mobile devices.
3. Points (pt): Points are traditionally used in print media (anything that is to be printed on paper, etc.). One point is equal to 1/72 of an inch. Points are much like pixels, in that they are fixed-size units and cannot scale in size.
4. Percent (%): The percent unit is much like the “em” unit, save for a few fundamental differences. First and foremost, the current font-size is equal to 100% (i.e. 12pt = 100%). While using the percent unit, your text remains fully scalable for mobile devices and for accessibility.

Why should I use one of these over another?

It’s easy to understand the difference between font-size units when you see them in action. Generally, 1em = 12pt = 16px = 100%. When using these font-sizes, let’s see what happens when you increase the base font size (using the body CSS selector) from 100% to 120%.

In looking at the table above, it is apparent that both the em and percent units get larger as the base font-size increases, but pixels and points do not. Some people may argue that it is much easier to set an absolute size for your text using pixles(px) or points(pt), but you can acheive a much better experience for your visitors when using scalable text. Scalable text can be displayed appropriately on any device or any machine. This is especially useful now, as more and more of your end users may be viewing your content on a mobile device such as an iPhone or BlackBerry. For this reason, the em and percent units are preferred for web document text.

It seems complicated to convert pixels (px) to ems (em). How can I make it easier?

Normally you would use a conversion table to figure out what your font-size should be from pixels (px) to ems (em). Many people try to wing it or spend some time guessing numbers, but there is a much easier way. If the html body is set to 1em (browser standard: 1em = 16px), and the font-size you would want is 12px that would be 0.75em. e.g. 10px converts to 0.625em, 22px converts to 1.375em.

Now to make this easier:

You can set the font-size of the body to 62.5% (that is 62.5% of the browser default of 16px), which equates to 10px, or 0.625em. Now you can set your font-size in ems with an easy to remember conversion. All you need to do is divide the px value by 10 to get your em value.

• 12px = 1.2em
• 13px = 1.3em
• 16px = 1.6em
• 8px = 0.8em
• etc…

This little trick makes your conversions very easy to remember and eliminates the need for conversion tables. There is one caveat though... you will still need to use a conversion table for nested elements when using ems, since the font-size: declaration in your css is relative to the element's parent. For example: a specification of font-size:0.8em; implies a font-size that is 0.8 times the em size of the parent element.